개인프로젝트 - 하하하 3 : 기본적인 보안. 쿠키, 로컬스토리지. + 리액트 렌더링 방식

1. 로그인 상태 유지

 

완료사항

유저정보를 로컬스토리지에 저장하여 헤더에 활용하는 등 이후에도 활용 예상.

jwt를 쿠키로 저장해둠. (Access / Refresh)

 

고민하는 점

jwt vs Session 자체도 현재 의견이 많이 갈리는 듯하다.

jwt를 쿠키 혹은 로컬스토리지에 저장하는 지도 의견이 많이 갈린다. 각각의 장단점이 다 있어보인다.

jwt를 쿠키에 저장하고 RefreshToken을 httpOnly로 xss공격으로부터 기본적인 방어가 되어보이긴 하지만 이 역시도 완벽치는 않다.

 

우선은 jwt를 쿠키에 저장하고 RefreshToken을 rotation하는 방식으로 우선 개선해보려 한다.

 

 

2. 리액트 렌더링

App.js에 로컬스토리지로 부터 recoil atom에 값을 추가하는 코드를 useEffect안에 구성했다.

하지만 이 때문에 Home컴포넌트가 두번 렌더링 되어보인다.

 

App 컴포넌트 실행이 두번 된다.

처음엔 '로그인 유저 정보 : '가 undefined로 나온다.

하지만 이후에 App.js에서 userInfo가 set되고서 console.log(userInfo)를 했을 때에도 undefined로 나온다.

 

리액트 렌더링에 대한 깊은 이해가 필요해 보인다.