1️⃣ 첫번째 시간
❌ 문제점들
새로고침 했더니 로그인 정보가 사라짐
1시간이 지났더니 로그인 정보가 사라짐
(변수에 accessToken을 담아놨기 때문에 사라지는것임)
그래서 localstorage 에 저장해야함!!!
하지만 refreshToken 이후로는 localstorage에 저장하지 않음‼️
임시용으로 생각하면 됨
🤔 왜 토큰이 사라질까?
1.브라우저에서 로그인함
2.인증(Authentication) 과정 이후 JWT 토큰을 브라우저에 돌려주었음
3.돌려받은 JWT토큰을 accessToken이라는 이름으로 브라우저에 저장함
4.새로고침을 한다면 프론트엔드에서 html,css,js를 다시 받아오고 기존에 받아놓은 accessToken은 사라지게됨!!!!
🤔 accessToken 사라지지 않게 하려면?
html, css, js와 관련이 없는 곳에 저장해야함!
브라우저에 이것들과 관련이 없는 곳으로는 localStorage, sessionStorage, Cookie 등이 있음
=> 이들 중 localStorage, cookie
는 브라우저를 껐다 켜도, 새로고침해도 남아있음!!
🍪 Cookie : 백엔드 연동 가능 (api요청할때 쿠키를 같이 첨부해서 요청가능)
refreshToken을 배우기 전까지만 임시로 localStorage에 accessToken을 저장하는 방법을 배워보자 (보안취약 문제점 존재)
순서 이해!!!
1.액세스 토큰을 setState에 저장함
2.저장된 액세스토큰이 아폴로세팅에 추가됨(전역적으로), Authorization에 이용되게됨
3.저장된 액세스토큰을 이용해서 로그인 success 페이지로 router push 해줌
4. 로그인 success페이지에서 페치로 유저 정보 불러옴
Next.js의 렌더링 원리
초기의 기본적인 밑그림을 그려봄 (브라우저에서 그리는게 아니라 서버에서 그림)
그린 내용과 브라우저를 비교해봄(diffing)
변경된 부분이 있으면 그 부분을 바꾸거나 하는 과정을 하게됨(hydration)
브라우저에는 로컬스토리지가 있지만 서버에서 프리렌더링할때 로컬스토리지가 있을 수 없기 때문에 "로컬스토리지 undefined"라는 에러메세지가 출력된것임
🤔 정말 프리렌더링으로 한번 그리고 브라우저에서도 한번 더 그리나?
한번은 서버(yarn dev 프로그램)에서, 한번은 브라우저(localStorage 저장소)에서 실행됨
하나의 소스코드가 각각 읽혀지고 있음
2️⃣ 두번째 시간
권한분기 (ex_ 특정 페이지는 로그인 한 사람만 접속가능하게 하고 다른 특정 페이지는 로그인하지 않은 사람도 접속 가능하게 하는것 등)
우리가 지금 보려는 것은 사용자 페이지 내에서 어떤 페이지는 로그인 한 사람만 볼 수 있는 페이지(마이페이지), 어떤 페이지는 로그인 하지 않은 사람도 접속할 수 있는 페이지인지를 처리하는게 주된 주제임!
==>이를 위해서는 HOC(High Order Component)와 closure를 이해해야함
bbb 안에 apple의 변수가 존재 하지 않기 때문에 밖에 있는 apple의 변수를 참조할 수 있음!!!
✔️ bbb쪽의 { } : 로컬스코프
✔️ 바깥쪽 : 클로져스코프
✔️ 스코프 체이닝 : 로컬스코프 안에 변수가 없다면 바깥쪽의 변수를 참조하는것
3️⃣ 세번째 시간
모든 페이지에 useEffect 구문을 복사 붙여넣기 해도 되지만 나중에 유지보수측면에 있어서 힘들어 질 수 있음!!!!
먼저 실행되는 High Order Component를 만들려면....?
Hoc(사과자리)(바나나자리)
먼저실행 컴포넌트 상관 없이 실행 순서는 aaa컴포넌트 -> bbb컴포넌트
"먼저실행 컴포넌트"에 useEffect 사용하면 됨
먼저실행컴포넌트를 만들어서 함수 안에 함수를 만들었음
기존과 실행순서는 동일함(aaa -> bbb) 하지만 그 사이에 먼저실행컴포넌트를 하나 끼워넣기 한 것임.
component:클로저 스코프
props:로컬스코프
기존과 동일한 순서이지만 먼저실행컴포넌트를 끼워넣음으로써 로직을 추가할 수 있게 된것임
이러한 컴포넌트를 만들어서 import해와서 쓰면 된다
제일오른쪽 : bbb실행 되기 전에 HoC가 먼저 실행됨
우리가할것
1.HOC컴포넌트 만들기
2.필요한 페이지에 import해와서 Hoc로 감싸주기
_app.tsx의 는 수정할것 없음
HoC는 항상 다른컴포넌트와 같이(with)쓰이고 먼저 실행된다
⭐️ withAuth로 감싸준 페이지는 로그인 전용 페이지가 되는 것임!!!!! ⭐️
