2022_02_15

• cookie : 영구저장 (만료시간), 보안이 좋지는 않지만 강화할 방법이 있다.
• localStorage: 영구저장, 보안상 좋지않다.
• sessionStorage: 브라우저 종료시 사라짐

localStorage

• localStorage.setItem([key], [value]) 저장
• localStorage.getItem([key]) 조회

localStorage.setItem("accessToken", accessToken || "")
localStorage.getItem("accessToken")

Next.js rendering

• prerendering : Browser에서 요청이오면 FE서버에서 미리 그려본다.
• diffing : Browser에 rendering을 한 후 prerendering과 비교하는 작업
• hydration: 서로 다른 변경사항을 적용

** 이와 같은 렌더링순서 때문에 localStorage를 조건없이 적용시키면 prerendering하는 과정에서 오류가 발생한다.

해결방밥

• process.brower

  if (process.browser) {
     if (localStorage.getItem("accessToken")) {
       setAccessToken(localStorage.getItem("accessToken") || "");
     }
  }

• typeof window

  if (process.browser) {
     if (localStorage.getItem("accessToken")) {
      setAccessToken(localStorage.getItem("accessToken") || "");
  	 }
  }

• useEffect : 화면이 그려진 후 실행되기 때문

  useEffect(() => {
      if (localStorage.getItem("accessToken")) {
        setAccessToken(localStorage.getItem("accessToken") || "");
      }
    }, []);

클로저(Closure)

: 함수와 함수가 선언된 어휘적 환경의 조합이다.

클로저 - JavaScript | MDN

HOC, HOF

• HOC(HighOrderComponent) : JSX를 return

• HOF(HighOrderFunction) : JSX를 리턴하지 않는다.

• HOC: 특정 컴포넌트를 실행하지 전 상위 컴포넌트를 먼저 실행시킨다.

  이를 이용하여 특정 인증이 필요한 페이지에서 토큰이 없을 경우 미리 접근을 금지할 수 있다.
  

• HOF: 기존 event.target.id사용법은 각 html tag에 id 값을 부여해야 하는 단점이 있었다. 이는 고유한 값이어야할 id가 다른 tag에서도 사용될 가능성을 야기하기에 이를 방지하기 위해 HOF를 사용한다.