2/15 TIL localStorage, next.js, stak구조, HOF/HOC

localStorage

loginToken을 가져와서 globalState에 저장하면 Br가 새로고침할떄마다 state가 사라진다.
=> Br에 저장하는 방법
1. cookie: 영구저장(만료시간)
2. localStorage: 영구저장
3. sessionStorage:브라우저 종료시 사라짐

next.js 렌더링 방식

FontendServer에서 html,css,js를 Br에 보내주기 전에 미리 그려본다(prerendering)
br에서 받은 데이터로 그리기고 난 후, 서버에서 미리 그려본 것이랑 비교(diffing)을 해서 변경사항을 적용(hydration)해준다.
아래와 같이 서버에서 실행될때는 LocalStorage 값을 못 읽기 때문에 브라우져에서만 실행되도록 해주어야 한다.

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

stack 구조

나중에 들어온게 먼저 나감(FirstIN,LastOut)
ex) Js에서 콜스택
<=> Q구조 : 먼저 들어온게 먼저 나감

breakPoint

개발자 도구 소스 탭에서 브라우져가 그려지다가 멈추는 부분 설정

스코프체인

먼저 Local에서 찾고 closure에서 찾고 그 다음에Global에서 찾는다. 클로저를 참조 할 수 있게 한다.

closure

자신을 감싸고 있는 외부 함수의 데이터에 접근하는 것을 말한다. 자바스크립트는 함수를 리턴하고, 리턴하는 함수가 클로저를 형성한다. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다.

function a (apple) {
    return function (banana) {
    	console.log(apple)
        console.log(banana)

    }
}
a(10)
// 10
a(10)(5)
// 10
// 5

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

HOF(high order function)

: 먼저 실행되는 컴포넌트(With ~)

HOC(high order component)

: JSX를 return 하면 컴포넌트 아니면 함수

_APP.TSX: 모든페이지가 실행되기 전에 실행됨.
aaa = 3 (window.aaa에 저장 )