6월 9일의 학습목표
오늘 배울 것
1. 로그인 토큰 유지시키기 -> Next.js 렌더링
2. 자바스크립트 클로저
3. 권한분기를 위한 클래스 컴포넌트, 함수형 컴포넌트
어제는 로그인 토큰 정보를 변수에 담아놨음
만약 새로 접속을하거나 + 새로고침을 한다면 ?
브라우저는 다시 html, css, js를 다시 다운로드함..
=> 모든것이 새롭게! 따라서 로그인이 풀림 (state에 저장된 내용은 사라짐)
초기화를 막으려면?
html, css, js 와 관련이 없는 곳에 토큰을 저장해야함
=> localstorage에 저장해볼것
🔥 하지만 보안에 매우 취약... 원래는 변수에 담는게 맞음!
refresh 토큰을 배우기 전까지 임시로 사용해볼 것
localStorage : 브라우저를 껐다 켜도 남아있음 (브라우저 전용)
sessionStorage : 브라우저 껐다 키면 사라짐 (브라우저 전용)
cookie : 브라우저 껐다 켜도 남아있음 ➡️ 백엔드와 연동이 가능함
( ex. api 요청할 때 cookie를 같이 첨부해서 보낼 수 있음, 백엔드에서 데이터를 넣어줄 수 있음)
개발자도구 > 어플리케이션 > 로컬스토리지, 세션스토리지, 쿠키
콘솔에서 확인해보기 (html, css, js와 상관 없음! - 새로고침해도 남아있음! )
23-01~ 페이지 접속 -> app.tsx의 컴포넌트가 됨 -> 로그인 -> 23-01에서 로그인하고 받은 토큰을 글로벌 스테이트에 저장 ->
ApolloSetting(부모)에서는 헤더에 추가, api에 추가된 토큰 -> 23-01-success로 이동 -> 23-01-success에서는 토큰 추가해서 쿼리 날리기! -> 회원 정보가 나옴
Next.js의 렌더링 방식
브라우저가 f서버에 요청하면..
프리 렌더링 : frontend 서버에서 미리 한 번 그려봄. 큼지막한 태그 구조 정도만 (초기 기본 밑그림정도) / 유즈이펙트, 온클릭 등 
프리렌더링 후, h-c-j를 브라우저에 넘겨준다
diffing : 차이를 비교한다
hydration : 최종적으로 반영 ( onClick과 같은 h와 j의 바인딩은 이 시점에서! - 입력이 있어야하기 때문에 서버에서 실행하지 않음)
주소로 접속하면 -> 서버프로그램으로 요청이 들어간다 -> 서버프로그램 내부에서 화면을 한 번 그려봄 -> 그 결과를 브라우저에게 전달 -> 결과를 브라우저 화면에 그리기
하나의 소스코드가 두 군데서 읽히고 있음을 확인
따라서..
서버에는 로컬스토리지가 없기 때문에..
개발자도구에는 들어가있지만 프리렌더링하는 시점에서 로컬스토리지가 없다는 에러가 발생
refresh token 배우기 전까지?
useEffect 활용해서 ... 로컬스토리지에 넣어놓기
1시간이 지나면? -> 직접 지워서?
권한분기
서비스마다 다르지만...
ex) 로그인 여부(회원, 비회원)에 따라 특정 페이지 접근 가능 / 불가능
ex) 아이디 권한(등급 - 일반고객, 판매자 등)에 따라 특정 페이지 접근 가능 / 불가능
=> 권한에 분기를 주는 컴포넌트를 만들고 이를 이용해 사용자에 권한에 따라 보여주는 페이지를 다르게 주는 것을 권한 분기
- HOC와 closure에 대한 이해가 필요함
안에 있는 함수에서 밖에 있는 함수의 변수를 참조함
스코프 체인
local 스코프에 없으면 global 스코프에는 있나 스코프를 찾아 올라가는 것을 의미
브레이크포인트 잡기 - 디버깅
apple을 지나면서 클로저에 들어감
안에서 banana, apple 모두 사용 가능
함수방식
리턴 결과를 사용하는 것이기 때문에
bbb라는 이름은 사용하는 부분이 없음 -> 아무 이름이나 써도 상관 없음
권한분기 끝!
HOC
페이지 기준 (컴포넌트에 있을 필요 없음)
🥺 근데 로그인이 필요한 모든 페이지에 복붙?? 너무 많은데??? 바뀌게 되면 언제 수정??
-> 해결방법
1) 권한분기 적용에 사용할 공통 컴포넌트를 만들고 ,
2) 접속하는 페이지 실행 전에 공통 컴포넌트를 먼저 실행하고 => Higher Order Component(HOC)
3) 페이지에 접속하게 만들어주자
1번 _app.tsx
2번 useEffect가 있는 검증 로직 컴포넌트
3번 로그인 성공 페이지
Aaa컴포넌트에서 Hoc(Component)(pros) 로 실행하기
Hoc = 먼실행하고 싶은 컴포넌트에 있는
함수명
Component = 실행하고 싶은 컴포넌트 이름
props = 해당 컴포넌트 안에서 사용할 데이터?
실행결과는 props drilling을 통해 중간 과정이 있던 없던 props가 넘어가 1 Aaa-> 2 Bbb임.
retrun에 있는 Component (글로벌스코프), props(로컬스코프)임
따라서 중간 과정에서 useEffect를 실행해도 Bbb에 아무런
손상이 없음
하나만 만들어서 Aaa 속
함수명 바꿔가며 import하기
활용하기
함수형
컴포넌트형
구조 확인하기
다른 컴포넌트와 함께 실행되는 고차 컴포넌트이므로 이름 앞에 with 를 붙여준다.
예) withAuth, withApollo
퀴즈부분 추가공부
HOF : Higher Order Function
- HOC와 비슷하지만 HOC는 Component 형태, HOF는 Function 형태의 차이가 있다.
Component 형태: JSX(React HTML)를 return 한다
Function 형태: JSX를 return 안한다.
이전 방법 : 버튼을 클릭했을때 id 값을 가져오고, 그 id 값으로 특정한 작업을 할때 event.target.id
문제점 : id값은 고유한 값이기 때문에 남발하면 안되고, 중복 작성된경우 오작동이 일어날 가능성
id값을 가져와서 사용할때 프레임워크를 사용할때 발생했던 문제(ant design or Material UI를 사용할때) id값이 사라지는 문제를 해결
event.target.id 방법
export default function Id() {
const onClickButton = (event: any) => {
console.log(event.target.id);
};
return (
<button id={123} onClick={onClickButton}>
클릭
</button>
);
}HOF 방법
export default function HOF() {
const onClickButton = (id) => (event) => {
console.log(id);
};
return <button onClick={onClickButton(123)}>클릭</button>;
}오늘 공부를 돌아보며
6월에 들어서는 self study 시간이 많아지고 있는데, 스스로 공부할 시간이 많은게 좋으면서도, 아무래도 멘토님들의 수업을 통해서 좀 더 많이 배우고 싶을 때도 있다.당장 해야할 것은 엄청 많은데 하지도 않아놓구.
욕심만 많아서 이것도 배우고 싶고 저것도 배우고 싶고...
이것도 해보고싶고 저것도 해보고싶고 ㅋ
벌써 수료 이후에 또 뭘 공부하면 좋을지 줍줍하구...
지금 하는 것부터 잘 해야할텐데 !
