2022
1.Nextjs12 버전에서 redux-toolkit 타입스크립트로 설정하는 방법
dispatch를 사용하기 위해 store.ts에 type설정useDispatch와 action에 AppDispatch 지정참고 - https://curryyou.tistory.com/501
2.React 사용 시 JWT를 어디에 저장해야 하는지에 대한 고민
React에 대한 이해도가 거의 없을 때에는 redux에 JWT를 저장하는 방식을 생각하였다.하지만 redux는 새로고침 시 저장소가 초기화되므로 적합하지 않다.그럼 redux-persist를 이용하여 redux의 휘발성을 줄이는 방식을 써보는 것은 어떨까?하지만 re
3.JWT access/refresh token Flow
Flow 정리로그인 클릭로그인 성공하면 API서버가 토큰을 반환반환된 토큰을 저장하여 페이지를 이동하거나 사용자 인증이 필요한 요청을 수행할 때, 헤더에 토큰을 넣어보낸다.API 서버는 요청받은 message의 헤더에서 토큰을 찾아 승인된 사용자인지 확인한다.토큰을 어
4.Next.js - getStaticProps vs getServerSideProps
Next.js는 서버 사이드 렌더링 방식(SSR)을 제공하는 React의 풀스택 프레임워크이다.초기 접근 시에는 SSR 방식으로 페이지를 생성하고, 페이지 이동을 할 때는 CSR 방식으로 동작하기 때문에 부드러운 화면 전환이 가능하다.SSR와 CSR 방식의 특징 및 차
5.No router instance found. you should only use "next/router" inside the client side of your app.
빌드 시에 발생한 오류Exporting (4/22)Error: No router instance found. you should only use "next/router" inside the client side of your app.Error occurred prere
6.n일 동안 보지 않기 팝업 구현
참고 - Reference
7.indexOf(), findIndex(), find()의 차이점
indexOf()배열 안에 몇번째 인덱스인지 반환한다findIndex()배열 안에 내용물이 객체일때, 그 객체가 배열 안에서 몇번째에 있는지 반환한다find()주어진 조건에 해당하는 내용물을 통째로 반환한다
8.async / await 썼을때 안썼을때 응답?
js는 동기적실행이 된다 api호출에 시간이 걸림결과는?await 으로 api호출을 강제로 기다린다데이터 값을 받아오면 다시 실행
9.쿠키, 로컬 스토리지, 세션 스토리지
HTTP는 요청과 응답으로 이뤄지는 하나의 사이클이 끝나면, 연결이 끊어지는 무상태성을 띄어서 클라이언트의 상태를 보존하지 않는다클라이언트의 상태를 서버가 아닌 클라이언트에 저장해두고 필요시마다 데이터를 꺼내서 서버에 전달하는 방식으로 HTTP의 단점을 보완하고자 쿠키
10.ref로 외부영역 클릭 감지
ref 객체인 outsideRef 들과 div 엘리먼트를 연결합니다. outsideRef 객체들에 어떠한 값이 변경되었을 때만 실행되는 useEffect() 함수를 작성합니다 document에서 click 이벤트가 동작하면, handleClickOutside 함수
11.React-cookie 라이브러리
utils/cookies.tsutils 폴더에 쿠키 파일 생성import 해서 사용
12.성능 최적화를 위해 (prev => 함수형 업데이트)
useState 는 이전 state 값을 인자로 자동으로 받아오는 콜백 함수를 인자로 넣을 수 있다useCallback , useMemo 에서 성능 최적화 작업두번째 인자로 들어가는 dependency array의 요소를 줄일 수 있음이전 state 값을 가져오는 것을
13.검색창 input값을 관리하는 방법 (feat. ref, useState)
useState인풋값에 대한 validation이 필요할때 활용useRef
14.최적화를 위한 memo, useMemo, useCallback
렌더링 이후의 값과 전의 값을 비교해서 같으면 재생성하지말라고 하는것반드시 렌더링이 필요한곳에 무분별한 사용은 금지props를 받으면 렌더링을 하게 되는데 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용 특정한 값을 return 하여 memoriztion
15.ref를 props로 전달하기 위한 forwardRef()
function컴포넌트에서 ref는 props로 넘겨줄 수 없다forwardRef로 감싸주고 두번째 인자로 ref를 넘겨줘야한다
16.Contents-Type Header 와 Accept Header의 차이점
Content-Type HTTP 메시지(요청과 응답 모두)에 담겨 보내는 데이터의 형식을 알려주는 헤더이다. HTTP 표준 스펙을 따르는 브라우저와 웹서버는 Content-Type 헤더를 기준으로 HTTP 메시지에 담긴 데이터를 분석과 파싱을한다. 만약 Cont
17.axios interceptors를 이용해 token만료시 refreshToken 자동요청
사용자 인증에는 크게 세션/쿠키 인증과 토큰 기반 인증이 있는데, 대표적인 토큰 기반의 인증으로 JWT(Json Web Token)을 많이 사용한다.JWT 토큰 인증 방식은 제 3자에게 토큰이 탈취되는 경우 보안에 취약하다는 단점이 있어 토큰에 유효기간을 부여하여 보안
18.새로고침 후 로그인 유지
로컬스토리지, 세션스토리지, 쿠키 아무거나 사용해도 됨자동로그인을 원하면 localStorage (영구적)브라우저를 닫으면 로그인이 풀리는 것을 원하면 sessionStorage로그인 시 토큰 저장로그아웃 시 토큰 삭제
19.DOM에 접근하는 useRef (리랜더링 x)
useReducer state를 변경하는 useState의 확장판 useMemo useCallback 콜백안의 함수를 언제 새로 셋팅해줄건지를 디펜던시 조건에 의존하여 결정한다