I'm a Fig, Not a Pig

Axios interceptor와 Refresh Token axios 공식문서에 따르면 interceptor는 api 요청에서 then이나 catch로 처리되기 전에 응답을 가로챌 수 있도록 하는 것이다. 프로덕트에서 로그인 시에만 가능한 행동들의 경우 header에 athorization : token 옵션을 함께 보내야한다. 이때 토큰이 만료되면 서버에서 토큰 만료로 인한 오류응답을 준다.(보통 401이나 403이 토큰 만료 오류이다) 토큰 탈취 문제를 피하고자 엑세스 토큰의 유효시간은 짧게 설정해두고 리프레시 토큰을 통해 엑세스 토큰을 재발급 받아야하는데 서비스를 이용하는 유저입장에서 반복적으로 401에러를 보는 것은 굉장히 불편한 일이다. 따라서 401에러가 나오면 유저가 보지 못하게 중간에서 가..

목차 1. Redux 2. 리덕스 언제 써야 할까? 3. 리덕스 vs Context API 4. 리덕스에서 사용되는 키워드 5. 리덕스의 3가지 규칙 6. 리덕스 사용하기 1. Redux 리덕스는 리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리이다. 리덕스를 사용하면 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있으며 글로벌 상태 관리도 손쉽게 할 수 있다. 리덕스에서는 리듀서와 액션이라는 개념을 사용한다. 따라서 개발 방식이 Context API와 useReducer Hook과 매우 유사하다. 참고로 redux 는 리액트에서 사용하기 위해 만들어진 라이브러리이긴 하지만 무조건 리액트와 함께 사용 할 필요는 없다. 일반 JavaScript 환경에서 사용 ..

목차 1. useCallback과 Memoization 2. useCallback 구조와 특징 3. useCallback 사용하기 1. useCallback과 Memoization useCallback은 Memoization 기법으로 컴포넌트의 성능을 최적화시켜주는 도구이다. Memoization 자주 사용되는 값을 받아오기 위해 반복적으로 계산을 해야한다면 이전에 이미 계산해둔 값을 캐싱해서 메모리에서 꺼내서 재사용하는 최적화기법이. 필요할때마다 매번 계산을 하는 것이 아니라 useMemo를 통해 캐싱해둔 값을 메모리에서 꺼내와서 재사용할 수 있다 아래와 같이 useMemo의 인자로 콜백함수를 넣어주면 이 함수가 return하는 값을 Memoization 해준다. useMemo(() => { retur..

1. node js 사용자 버전 설치2. 바탕화면, 내문서 등 원하는 곳에서 새로운 폴더 생성(이름: react-for-beginners)3. vscode에서 해당 폴더 열어줌4. vscode 상단 메뉴에서 Terminal - New Terminal 클릭 (명령어로 vscode 제어 가능)5. node -v 입력 후 현재 버전이 표시되면 node js 설치 성공한 것6. create-react-app 으로 리액트 프로젝트 생성    terminal에 npm init react-app 혹은 npm init react-app .을 입력하고 엔터(현재 폴더에 개발환경을 셋팅하겠다는 뜻)*이 때 뭐 설치하겠냐고 하면 y 눌러서 설치해주시면 됩니다.7. Success!가 뜨면 설치 완료8. 개발모드..

목차 1. useMemo 2. useMemo 구조 3. useMemo 예제1 3. useMemo 예제2 컴포넌트 최적화를 위해 사용되는 대표적인 hook은 useMemo와 useCallback이다. 오늘은 중에서useMemo에 대해 공부해보려고 한다. 1. useMemo useMemo는 리액트에서 컴포넌트의 성능을 최적화 하는데 사용되는 훅이다. useMemo에서 memo는 memoization을 뜻하는데 이는 그대로 해석하면 ‘메모리에 넣기’라는 의미이며 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 쉽게 말해 동일한 값을 반환하는 함수를 반복적으로 호출해야한다면 처음 값을 계산..

목차 1. useReducer 훅이란? 2. useReducer 구성요소 2-1) useReducer 함수 2-2) dispatch 함수 2-3) 3. reducer 함수 1. useReducer 훅이란? useRedcuer Hook은 react가 상태관리를 위한 reducer function에 접근할 수 있게 해준다. useState Hook과 매우 비슷한데, 차이점이라면 useReducer는 좀 더 복잡한 로직과 상태관리에서 사용되는 경우가 많다. 2. useReducer 구성요소 1. useReducer 함수 import React, { useReducer } from "react"; const [state, dispatch] = useReducer(reducer, initialState, init..

1. 컴포넌트의 Lifecycle 우선 컴포넌트의 Lifecycle이라는 개념을 알아보자. 컴포넌트는 1. 생성이 될 수도 있고(mount) 2. 재렌더링 될 수도 있고(update) 3. 삭제가 될 수도 있다(unmount) 컴포넌트의 Lifecycle을 알면 컴포넌트 인생 중간중간에 간섭할 수 있다. 여기서 간섭이란 코드실행을 말한다. 따라서 컴포넌트가 장착 될 때 특정 코드를 실행할 수도 있고 컴포넌트가 업데이트 될 때 특정 코드를 실행할 수도 있다. 2. 간섭하는 방법 "Detail 컴포넌트 등장 전에 이것좀 해줘" "Detail 컴포넌트 사라지기 전에 이것좀 해줘" "Detail 컴포넌트 업데이트 되고나서 이것좀 해줘" 이렇게 코드를 실행해달라고 간섭할 수 있는데 간섭은 갈고리(hook)를 달아..