TIL - 2022.02.15 화요일

오늘 배운 것

---

1. Next.js의 렌더링 원리 (pre-rendering과 hydration)

로그인 권한분기를 실습하기 위해 브라우저를 새로고침해도 accessToken이 유지되도록 만들어야 했다. refreshToken은 바로 익히기 조금 어렵다고 해서, 브라우저의 localStorage에 accessToken을 임시방편으로 저장해두기로 결정. 그런데 막상 localStorage에 accessToken을 setItem 하려 하니 다음과 같은 에러가 발생했다.

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

Next.js의 diffing과 hydration때문에 발생하는 현상이라고 한다. 서버 사이드 렌더링(SSR) 방식 프레임워크의 특징이라고 하는데.. 솔직히..! 진짜 솔...직히..! 아직 무슨 소리인지 잘 모르겠다.🤯 내가 지금까지 이해한 내용만 먼저 적어둔다.

1. 브라우저에서 프론트엔드 서버로 데이터를 요청한다.
2. 프론트엔드 서버에서 페이지를 미리 그려본다. (pre-rendering)
3. html/css/js를 브라우저로 보낸다.
4. pre-rendering한 내용과 차이점을 비교해가며 브라우저에 기본 틀을 그린다. (diffing)
5. diffing 후 최종 결과물을 브라우저에 반영한다. (hydration)

* Next.js는 서버 사이드에서 페이지의 html 구조를 먼저 렌더링한 뒤 전송한다.
* 프리렌더링된 html과 최소한의 js에 나머지 js를 전송해서 얹는다.
(이 프로세스가 물이 차오르는 것과 유사하다 하여 hydration이라고 부르는 듯)

결국 localStorage가 브라우저에만 존재하기 때문에 발생하는 문제였다. 서버에서 pre-rendering 될 때, 서버 단에는 localStorage가 아예 존재하지 않기 때문에 에러가 발생하는 것. 이러한 문제는 다음과 같은 세가지 방법으로 해결이 가능하다.

// Case 1. 브라우저에서만 코드가 동작하도록 한다.
	if (process.browser) {
    if (localStorage.getItem("accessToken")) {
      setAccessToken(localStorage.getItem("accessToken") || "");
    }
  }

// Case 2. Window가 존재하는 경우에만 코드가 동작하도록 한다.
  if (typeof window !== "undefined") {
    if (localStorage.getItem("accessToken")) {
      setAccessToken(localStorage.getItem("accessToken") || "");
    }
  }

// Case 3. useEffect로 브라우저에 mount된 후 코드가 동작하도록 한다.
  useEffect(() => {
    if (localStorage.getItem("accessToken")) {
      setAccessToken(localStorage.getItem("accessToken") || "");
    }
  }, []);

주의점
Case 1, Case 2의 경우, 실행구문 안에 setState가 들어갔을 때 무한루프에 빠질 수 있다.
setState를 사용하는 경우에는 useEffect를 사용하자.

 

2. Javascript의 Closure

데이터 구조에는 크게 스택(STACK)과 큐(QUE) 두 가지가 있다.

JavaScript는 스택 방식으로 작동한다. 스택 구조 원리에 따라 스코프 체인이 생겨난다. 특정한 영역 내에서 함수를 호출할 경우 Local > Closure > Global 순으로 함수를 찾아들어가는데, 이 때 Closure는 외부 함수에 접근할 수 있는 내부 함수를 칭한다. Local에 없는 함수를 근접한 외부인 Closure에서 찾고, Closure에도 없으면 Global에서 찾는 것. 호이스팅이나 클로져와 같은 자바스크립트의 핵심적인 동작원리를 실행 컨텍스트라고 한다.

참고 : https://poiemaweb.com/js-execution-context

Execution Context | PoiemaWeb

크롬 개발자 툴의 디버깅 도구에서도 확인할 수 있다.🤯

 

3. HOC/HOF

각각 고차 컴포넌트(Higher Order Component)와 고차 함수(Higher Order Function)의 약자이다. 단어를 보면 알 수 있듯 HOC는 컴포넌트, HOF는 함수. 오늘은 HOC를 사용해서 페이지 접속시 로그인 인증 여부를 검증하는 권한 확인 컴포넌트를 만들었다. 그리고 HOF를 사용해서 jsx에 불필요하게 들어간 id 값도 제거해줬음.

 

앞으로 할 것

---

- 솔직히 오늘 공부한 내용은 다 이해 못했다. 머리 쪼개질 것 같음🤯

- Next.js의 서버 사이드 렌더링 개념에 대해 좀 더 공부해보자. 이해가 안되더라도 일단 가능한 선까지는 쭉쭉쭉.

- JavaScript의 실행 컨텍스트도.. 이해하고 싶다..! 모던 자바스크립트 책 사서 읽어볼 것.

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=251552545 

모던 자바스크립트 Deep Dive

- 새로 만든 프로젝트 폴더 랜딩 페이지 만들기. 오늘의 집 레이아웃을 클론할 생각이다.