로컬스토리지를 이용하여 로그인 권한분기를 배웠다
로컬스토리지에 로그인 토큰을 저장을 시킨후에 해당 토큰을 사용하려 하면 not defind라는 에러가 발행한다 이 이유는 next.js렌더링 방식을 알아야 한다
next.js는 주소창에 주소를 입력하고 엔터를 입력시
프론트엔드 컴퓨터(yarn dev) 에서 한번 미리 해당 페이지를 그려본다그걸 프리 렌더링(pre rendering)이라고 한다
빠르게 그림만이라도 먼저 보여주기 위해 프리렌더링을 통해 만든 html파일만을 일단 브라우저로 보낸다
그 후 js파일들을 보낸다
그럼 프론트엔드 컴퓨터에서 해당 js파일은 보내주면 자바스크립트에 있는 내용을 바탕으로 처음 받은 html과 차이를 비교후 html을 다시 그린다
이러한 작업을 hydration이라고함
즉 로컬스토리지 등록 및 조회는 브라우저에 저장 및 조회하는데
프론트엔드컴퓨터에서 프리렌더링을 진행시에는 해당 데이터가 없기 때문에 오류를 발생하게 되는 것이다
이를 해결하기 위해서는
조건문으로 지금 브라우저니?
if(process.browser) 혹은 if(typeof window !== "undefined")라는 조건을 붙이거나
useEffect는 브라우저에서만 실행이 되기 때문에 useEffect를 사용한다
HOC : 함수를 리턴하는 함수
function aaa(apple) {
return function bbb(banana) {
console.log(apple);
console.log(banana);
};
}
aaa("10개")("20개");
// 10개
// 20개위와 같이 사용이 가능하다 조금더 응용을 하면
const aaa = (apple) => (banana) => (tomato) => (orange) => {
console.log(banana);
console.log(apple);
console.log(tomato);
console.log(orange);
};
aaa(10)(20)(30)(40)위와 같이도 가능하다
HOC: 클로저로부터 확장된 개념으로 상위에 있는 컴포넌트로 다른 컴포넌트보다 먼저 실행되는 컴포넌트이다
클로저: 함수스코프 안에서 찾는 값이 없을 경우 상위 함수스코프에서 해당 값을 찾게 되는데 있때 상위 함수스코프가 클로저이다
