1. Local Storage 활용

새로고침시 로그인 정보가 날아가는데 이를 방비하기 위해 브라우저 local stoarge에 accessToken을 저장할 수 있다.
session storage는 브라우저에서만 사용가능하고 브라우저를 끄면 정보가 사라진다
local storage는 브라우저에서만 사용가능하고 직접 삭제해줘야한다.
(ex:비회원의 장바구니 담기)
cookies는 백엔드와 통신이 가능하며 만료시간이 존재한다.

하지만 accessToken을 localstorage에 넣게되면 자바스크립트 몇줄만으로도 해킹이 가능하기 때문에 좋은 방법이 아니다.

한번 실행하면 제대로 동작하지만 새로고침했을때 Fetch가 제대로 동작하지 않는다. 이를 해결하기위해서 localstorage에 있는 토큰을 globalState에 다시 저장해줘야 한다.


하지만 localstorage에서 가져와도 새로고침시 동작이되지 않는다. 이는 Next.js 랜더링과 관련이 있다.

2. Next.js 렌더링의 원리

브라우저로 가져가기 전에 프론트엔드 서버에서 prerendering을 하게되는데 Mount되고 나서 실행되는 useEffect 혹은 onClick ,onChange 같은 함수들 실행되기 전까지 최초 1회 한번 하게된다.(전체적인 그림만 그리는 용도)
이 과정이 끝나고나서 브라우저에 HTML CSS JS를 보내주게 된다.
이제 브라우저에서 prerendering 결과와 브라우저에서 그리는 그림을 비교(diffing)하여 최종 완성형(hydration)으로 그려주게 된다.

prerendering 할때 브라우저에서 가져오는 localstorage가 없기 때문에 Token 정보를 가져 올 수 없었던 것이다.

그렇다면 이를 해결하기 위한 방법으로는 vscode 주석을 통해 설명하겠다. 하지만 1시간 후에는 토큰이 만료가 되기 때문에 다시 로그인 해줘야한다.

3.Closure

함수 안에 함수를 실행시키고 싶을때 소괄호를 두번 써주면되는데 그 이유는
aaa()로 실행하게되면 결과값이 bbb로 나오게된다.
그래서 aaa()() 괄호를 한번 더 써주게되면 bbb() 실행시킬수 있다.

내부함수에서 외부함수에 접근할수 있는것을 Closure라고 한다.
let apple= "이건 사과에요" 라는 변수는 bbb() 밖에 있으나 가장 가까운 변수를 찾아가는 scopechain에 의해 변수를 console.log로 가져 올 수 있다.

4.이것부터 실행 => HOC/HOF

큰개념의 권한분기

브라우저(특정 페이지)와 백엔드 서버, 프론트 서버, DB가 있을때
일반적으로 유저가 사용하는 페이지와 관리자 페이지(유저가입정보, 통계보기 등)가 나누어져있다. 각각 도메인과 프론트엔드 파일을 따로 사용한다.

작은개념의 권한분기

하나의 페이지에서 로그인한 사람과 안한 사람의 접근 권한을 나눠줄 수 있다.
이러한것을 할 수 있게 react에서 나온 HOC같은 라이브러리가 있다.

Stack의 개념
First-in-Last-Out 먼저 들어간 스택들이 가장 나중에 나오고
Queue의 개념
First-in-First-Out 먼저 들어간 스택이 가장 먼저 나온다.

Aaa 컴포넌트에 Bbb 컴포넌트를 import 시키고있다. Bbb 컴포넌트에서는 props로 "철수"를 내려받고 있다.

함수형으로 이름을 바꾸고 props 또한 변수 이름이기 때문에 어떤 걸로 바뀌어도 상관없다.

Closure에 의해 Bbb 컴포넌트가 실행되기 전에 Hoc의 컴포넌트가 먼저 실행된다. 권한분기가 필요한 페이지에 권한분기체크로직 useEffect를 사용해주게 되면 페이지가 랜더링되기전에 실행할 수 있다.

최종적으로 아래와 같이 바꿔줄 수 있다. export default는 어떤 이름을 사용해도 상관없으니 Aaa 컴포넌트에 Hoc(Bbb)가 아닌 다른 이름을 사용해도되고 먼저 실행 컴포넌트에서는 화살표 함수로 바꿔주게 되면 훨씬 간단하다. 보통 Hoc 앞에 with를 많이 붙이고 로그인 검증에 사용되면 withAuth라는 단어를 많이 붙인다.