[TIL] 2022-04-13

오늘의 TIL

1. Next.js 렌더링에 이런 원리가 있다니! >> Diffing/Hydration

• Cookie, Local Storage, Session Storage
• Pre-rendering
• diffing/hydration

  localStorage는 새로고침 이후에도 데이터가 사라지지 않는다.
  Next.js는 브라우저에서 요청이 오면 프론트 서버에서 먼저 미리 그려보고나서(Pre-rendering) 브라우저에 그려본것을 비교(diffing)하고 변경사항을 적용(hydration)한다.
  Pre-rendering 때는 브라우저의 저장소인 localStorage가 존재하지 않는다.
  localStorage의 값을 읽어오려면 브라우저일 경우에만 실행되도록 조건을 주거나 useEffect 안에서 접근해야 한다.

2. 자바스크립트에 이런것이?! >> Closure

• Stack, Queue

  스택은 Last-in First-out 구조로 먼저 실행되는 순서대로 쌓인다.
  스코프 체인에 의해서 지역 변수, Closure(가장 가까운 외부 함수), 글로벌 순으로 변수를 찾아 나간다.
  클로저는 외부 함수에 접근할 수 있는 내부 함수를 말한다.
  클로저를 이용해서 HOC, HOF를 사용할 수 있다.

3. 잠깐! 이것 먼저 실행해줘! >> HOC/HOF

• Higher Order Component
• Higher Order Function

  HOC: 특정 컴포넌트를 실행하기 전에 먼저 실행시켜주는 컴포넌트이다.
  HOC는 with를 붙여서 이름을 짓는 것이 관례이다.
  JSX를 리턴하면 HOC, 그렇지 않으면 HOF이다.
  material-ui, ant-design 등의 컴포넌트를 이용하면 id값을 사용할 수 없었는데, HOF를 사용하면 이를 해결할 수 있다.
  HOC를 이용해서 로그인 권한이 필요한 페이지 앞에 HOC을 감싸서 토큰 검증하는 로직이 먼저 수행되도록 추가했다.

self-study

• 페이지 접속 시 로그인 권한 체크 추가