4/13
브라우저 자체에다가 저장도 가능하다! 대표적인 공간들이 관리자-애플리케이션-저장용량
로컬 스토리지: 다른곳에 못보낸다. 영구적 저장. ex): 인터넷쇼핑몰비회원 장바구니
단, 중요한 데이터(=토큰) 보관은 ㄴㄴ
세션 스토리지: '' , 브라우저 끄면 사라진다.
쿠키 :백엔드 로 보낼수 있다.
로컬스토리지에있는 토큰을 뽑아다가 apollo index.tsx에 넣어주자.
const [accessToken, setAccessToken] = useRecoilState(accessTokenState);
const mylocalstorageAccessToken = localStorage.getItem("accessToken");
setAccessToken(mylocalstorageAccessToken || "");↑
어? 왜 localStorage is not define 오류가 뜨지?
->
yarn dev시 프론트엔드 서버에서 사전에 먼저 그려본다.(=prerendering)
그다음에 html,css,js 등 브라우저에 보여준다.
브라우저에서 그대로 그림그리고 prerendering 그림을 비교한다(=diffing)
최종완성형으로 update해주는 작업 (=hydration) hydration문제점은 추후 웹에디터
브라우저에선 로컬,세션스토리지 다 표현가능하나
프론트엔드 서버에서는 브라우저가 없어서 로컬,세션스토리지 표현이 불가하다.
tip) window 실행은 브라우저가있을때!
if(typeof window === "undefined")
해석: = 프론트엔드서버
권한분기를 위해 리액트에서 지원해주는 기능들을 알아보자.
ex) Hoc
(abc())= ((chocolate) )
바깥 ( ) 생략가능
리턴되어지는 함수 이름(ex: chocolate) 은 상관없다?
-> 다시 실행시킬거니까
내부함수에서 외부함수의 지역변수 접근할수 있는것=scope(범위) chain
지역변수의영역 = closure (ex: let apple = "애플")
stack !== queue
stack : 선입후출(LIFO) ctrl+z 시 최신꺼부터
queue : 선입선출(FIFO)
HOC :a라는 컴포넌트실행전에 실행하는 컴포넌트
hoc-> custom-hooks 바꾸는과정(2022/4/14)도 알아보자
단, 먼저 실행 컴포넌트 부분(Hoc)에서는 로직을 추가할수있다.
bbb컴포넌트에서 hoc로묶고 내보내낸걸
aaa컴포넌트에 import 시킨다.
{ 와 return 사이에 아무것도 없으니 생략!
Hoc 이름짓기는 with 단어가 자주 붙는다.
withAuth (인증여부를검사) ※관례
tip) 앞으로는 로그인이필요한 페이지는 withAuth 붙여주면 깔끔
HOF(High-Order-Function)
