짧은코딩

Axios 만들기 import axios, { AxiosError, AxiosResponse } from "axios"; interface Post {} interface Created {} interface Data { title: string; body: string; userId: number; } // date에 타입을 줄 때 그냥 any로 하면 타입핑을 포기한다는 것이다. //따라서 제네릭을 이용해서 타입이 any가 아니여도 괜찮다. interface Config { // method는 string으로 해도 되지만 이렇게 좁혀주는 것이 더 좋다. method?: "post" | "get" | "put" | "patch" | "delete" | "head" | "options"; url?: str..

Redux 서버에서 데이터 수정을 하면 프론트에서 값이 바뀌고, 프론트에서 데이터 수정을 하면 서버에서 값이 바뀌는 양방향 코딩을 하게되면 문제가 발생할 수 있다. 코드가 좀 복잡해지면 값이 이상하게 꼬일 수 있다. 따라서 Redux를 활용해서 데이터 관리를 쉽게 해줄 수 있다. Redux는 꼭 리액트에서만 사용하는 것은 아니다. 그치만 리액트에서 Redux를 많이 사용한다. -예시 리액트에서 A, B, C 컴포넌트가 있고 A가 제일 위 부모 태그, C가 제일 아래 자식 태그라 하면 state값을 다 따로 관리 해주게된다. 이 state를 다 같이 관리하기 위해서 Redux에 state를 저장하고 쉽게 관리 할 수 있다. 즉 컴포넌트 간의 state를 관리 할 때 사용하면 된다. 만약 컴포넌트 B에서만 ..

axios 분석 axios는 XMLHttpRequest 기반이라 fetch보다 기능이 다양하다. 게다가 브라우저와 노드 모두 사용이 가능하다. -가상 api 주소가 필요할 때 사용하는 주소 사이트 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2021, serving ~1.7 billion requests each month. jsonplaceholder.typicode.com -ts에서 함수에 속성 추가하..

react-cookie react-cookie는 쿠키를 만들어 줄 수 있는 라이브러리이다. -npm 사이트 https://www.npmjs.com/package/react-cookie react-cookie Universal cookies for React. Latest version: 4.1.1, last published: a year ago. Start using react-cookie in your project by running `npm i react-cookie`. There are 505 other projects in the npm registry using react-cookie. www.npmjs.com npm i react-cookie 이 명령어로 다운 받을 수 있다. 적용 -uti..

X-Requested-With 프로젝트 중에 로그인 axios를 했는데 실행이 되지 않았다. 백엔드 요청에 X-Requested-With 헤더가 포함되어 있었다. X-Requested-With 헤더는 해당 요청이 Ajax라는 것을 의미한다. 저렇게 백엔드 요청을 보고 있는 헤더는 추가해줘야 된다. 그리고 X-Requested-With를 쓰는 다른 이유는 CORS를 통해 서버 동의 없이 Ajax 요청을 할 수 없기에 CSRF 공격을 방지할 수 있다. 즉 보안을 강화시켜준다. 적용 const headers = { "X-Requested-With": "XMLHttpRequest", }; 먼저 이렇게 headers 안에 헤더를 만들어 놓는다. axios .post( "https://waycabvav.shop/l..

form form 안의 버튼에 보통 submit를 많이 사용한다. 하지만 form 안에 버튼이 여러 개인데 하나의 버튼에서만 submit를 사용하고 싶으면 다른 버튼의 type에는 이렇게 type을 button으로 만들어야 한다. 그렇지 않으면 다른 버튼을 눌러도 요청이 가버린다. -예시 가입하기 이런식으로 form 안에서는 type을 지정해줘야 한다.

TS로 컴포넌트 파일 만들 시 주의점 TS에서는 파일 경로명의 앞 글자를 무조건 대문자로 해야한다. 그렇지 않으면 Property 'checkIdModal' does not exist on type 'JSX.IntrinsicElements'. 이런 오류가 발생한다. 컴포넌트의 앞 글자를 대문자로 바꿨더니 에러가 바로 해결되었다. 처음에 아무리봐도 틀린 것이 없었었다. 구글링을 해보니까 해결법을 알게되었다. 다음부턴 꼭 기억해야겠다.

슬라이드 만들기 이미지 준비하기 우선 슬라이드에 활용 할 이미지를 준비한다. 이미지 리스트 만들기 -slideList.ts export const slideList = [ { id: 1, src: "slideImage/img1.jpeg", alt: "첫번째 슬라이드", }, { id: 2, src: "slideImage/img2.jpeg", alt: "두번째 슬라이드", }, { id: 3, src: "slideImage/img3.jpeg", alt: "세번째 슬라이드", }, { id: 4, src: "slideImage/img2.jpeg", alt: "세번째 슬라이드", }, ]; id, src, alt로 이미지의 정보를 담은 리스트를 만든다. 이미지 출력하기 {slideList.map((v) => ..

HTTP/1.0 HTTP/1.0은 기본적으로 한 연결당 하나의 요청을 처리하도록 설계되었다. 이로인해 RTT가 증가한다. 서버에서 파일을 가져올 때마다 TCP의 3-way handshake를 열어야해서 RTT가 증가한다. RTT: 패킷이 목적지까지 갔다가 돌아오는 시간, 즉 패킷 왕복 시간 RTT 증가 해결 방법 연결할 때마다 RTT가 증가하면 서버에 부담이 많아지고 응답 시간이 길어진다. 이를 해결하기 위해 이미지 스플리팅, 코드 압축, 이미지 Base64 인코딩을 사용했다. -이미지 스플리팅 이미지를 많이 다운 받으면 과부하가 걸려서 많은 이미지가 합쳐져 있는 하나의 이미지를 받고 이를 기반으로 background-image의 position을 이용해 이미지를 표기하는 법이다. -코드 압축 코드 압축..

기본 설정 강좌에서 Next는 9버전을 사용했다. Next는 import React from 'react'가 있어도 없어도 상관없다. 넥스트는 pages 안에 있는 파일들을 인식해서 코드 스플리팅 된 개별적인 페이지로 만들어준다. 따라서 pages의 이름은 무조건 pages이어야 한다. -package.json "scripts": { "dev": "next" }, dev에 next를 넣어주면 npm run dev를 했을 때 next가 실행된다. 페이지 추가하기 -회원가입 페이지 const Signup = () => { return 회원가입 페이지 }; export default Signup; 만약 회원가입 페이지를 만들고 싶으면 그냥 이렇게 만들면된다. 그리고 url에 /singup을 붙이면 회원가입 페..