[TIL] 22.12.01 - Diffing / Hydration, 로그인 검증, Closure, HOF / HOC

nana·2022년 12월 1일

TIL

목록 보기

39/50

Diffing / Hydration

로컬스토리지 저장 시 객체를 넣지 못하므로, JSON.strigify해서 문자열로 넣어주고,
다시 가져올 때 JSON.parse해준다

이렇게 하면 localstorage가 undefined 라고 오류가 발생한다.

Next.js의 렌더링 원리

Next.js는 총 두 번 렌더링 된다.

브라우저에서 주소를 입력해서 프론트엔드에 서버에 접속하면, 프론트 서버 프로그램에서 렌더링 전에 성능 확인을 위해 브라우저 없이 가상으로 화면을 그려본다. (pre-rendering)

그 후 브라우저에서 다시 화면을 그리고, 두 개를 비교한 뒤 업데이트 한다. (hydration)

비교한 두 화면의 차이점을 diffing이라 한다.

pre-rendering할 때, 브라우저가 가지고 있는 localStorage가 없다. (alert과 같은 기능)
-> localStorage is not defined가 뜨는 이유

process.brower를 조건으로 주면 브라우저에서만 렌더링 되고, 그 외에는 프론트엔드 서버에서만 렌더링 된다.

그러나 이 방법은 좋은 방법이 아니다.

useEffect는 마지막으로 한번만 렌더링 되기 때문에 useEffect를 사용해서 localStorage에 accessToken을 저장할 수 있다.

pre-rendring에는 화면만 그리고 클릭과 같은 함수는 실행이 되지 않기때문에,
함수 안에 localStorage.getItem시 localStorage에 저장된 데이터를 가져올 수 있다.

권한분기 - 로그인 검증

class : HOC
functioanl : HOC/ custom-hooks

Closure

Closure 스코프는 Local 스코프의 바깥에 있는 영역을 의미한다.

function aaa() {
  const apple = 10;

  function bbb() {
    const banana = 20;
    console.log(banana);
    console.log(apple); // 스코프 체인
  	console.log(qqq);	// 스코프 체인
    
    function ccc() {
      const tomato = 30;
      console.log(tomato);
      console.log(banana);
      console.log(apple);
      console.log(qqq);
    }

  ccc();
  }
 
  const qqq = 3;

  bbb();
}

aaa();

스코프 체인은 Local에 없으면 Closure로, Closure에서 Global로 이동하는 것이다.

bbb가 실행된 상태일때, bbb는 Local, apple,qqq는 Closure 스코프가 된다.
ccc가 Local이면, Closure 스코프는 bbb, aaa가 된다.

-> 스택 (FILO) 구조

HOF / HOC

HOF


// 1. 함수를 리턴하는 함수
function aaa() {
  const apple = 10;

  return function bbb() {
    const banana = 20;
    console.log(banana);
    console.log(apple);
  };
}

aaa()		// aaa실행
aaa()() 	// 20, 10 (bbb를 실행한 결과값)


// 2. 함수를 리턴하는 함수 - 인자가 있는경우
function aaa(apple) {
  return function(banana) {
    console.log(banana);
    console.log(apple);
  };
}

aaa(10)(20);	// 20, 10

// 3. 함수를 리턴하는 함수 - 화살표 함수

const aaa = (apple) => (banana) => {
  console.log(banana);
  console.log(apple);
};

aaa(10)(20);	// 20, 10

// 4. 함수를 리턴하는 함수 - 인자 3개

const aaa = (apple) => (banana) => (tomato) => {
  console.log(banana);
  console.log(apple);
  console.log(tomato);
};

aaa(10)(20)(30);	// 20, 10, 30