23일차 / Diffing/Hydration, Closure, HOC/HOF

김혜진·2022년 4월 13일

Diffing / Hydration

F12 -> Application

세션 스토리지는 브라우저를 끄면 사라진다.
로컬 스토리지는 영구적으로 저장이 되어서 껐다 켜도 남아있다. 직접 삭제해야 함.

로컬 스토리지에 중요한 정보를 저장해두는 것은 좋지 않다.

액세스 토큰을 빼낼 수 있기 때문에 해킹당할 위험이 있음.
아직 리프레시 토큰을 배우지 않았기 때문에 일단 로컬 스토리지에 액세스 토큰을 담아두도록 하겠습니다.

새로고침 = 재접속
변수, State, globalState 등 새롭게 받아오니까 안이 비어지게 된다.
새로고침하면 항상 초기화가 되어 다운받아오게 된다.
그러면 다시 로그인을 해야되고...
그래서 임시로 로컬 스토리지에 브라우저를 껐다 켜도 액세스 토큰이 살아있게끔 해주겠다.

vsCode에서 로컬 스토리지를 입력하면 바로 나온다. => 브라우저에 이미 있는 것이기 때문에
.setItem => 만들어줘
.getItem => 가져와줘
.key => 키를 뽑아온다

로그인을 하면 액세스 토큰이 생기는지
로그인을 하면 페이지가 자동으로 넘어가는지
확인을 해준다.

로컬 스토리지에 등록하면 브라우저를 껐다 켜도 액세스가 가능하게 된다!
(보안적으로 좋은 방법은 아님)

로컬 스토리지는 토큰이 안 사라지게 하는 수단에 불과하고

새로고침 했을 때 사라지지 않게 해주려면 로컬 스토리지에 있는 액세스 토큰을 글로벌 스테이트 리코일 스테이트에 다시 넣어주어야 한다.

토큰이 있으면 넣어주고 없으면 빈 문자열 보여줘.

브라우저에 주소를 치소 엔터를 치면 프론트엔드로 접속을 한다.
yarn dev라는 프로그램 자체에서 html,css,js를 주기 전에 프론트에서 소스코드를 한 번 돌려본다.
즉, 서버에서 그림을 한 번 그려보는 것 => prerendering
전체적인 큰 그림, 큰 구조만 그려본다. 그 다음에 html, css, js를 던져준다.
브라우저에서도 그림을 그리고, 프론트에서 그린 그림과 비교를 한다. => diffing
diffing 이후의 최종 완성형으로 업데이트 하는 것을 hydration이라고 한다.

중요한 것은 프리렌더링 할때는 로컬스토리지라는 개념이 없다.
이것들은 브라우저에 있는것이라 브라우저에서 그릴 때는 정상작동하지만
프론트 서버의 yarn dev라는 프로그램에서는 브라우저라는 개념이 없기때문에 localstroge. 이라고 찍으면 localstorage가 뭐냐? 하는 것이다.

웹 에디터 만들 때 하이드레이션의 문제가 발생 => 나중에 더 다루게 된다.

브라우저 접근 가능한 방법 = typeof window
윈도우가 없다면 = vsCode에서 실행되고 있다면

프리렌더링, 브라우저에서 두 번 실행이 되고 있다!
브라우저에서는 문제없지만 프리렌더링에서 localStorage가 뭐냐? 고 하는 이유.

useEffect는 브라우저에서 실행이 되는거니까, 사용해보자!

  useEffect(() => {
    const mylocalstorageAccessToken = localStorage.getItem("accessToken");
    setAccessToken(mylocalstorageAccessToken || "");
  });