next.js 랜더링 원리 Diffing/Hydration
자바스크립트에 이런것이?! Closure
잠깐! 이것 먼저 실행해줘!(컴포넌트 실행하기전에 실행되는 컴포넌트!)HOC/HOF
next.js 랜더링 원리 Diffing/Hydration
브라우저 자체에도 저장할 수있음!
관리자화면의 어플리테이션, 로컬스토리지, 세션스토리지
key 는 aaa www
세션(껏다가 키면 사라짐)과 로컬(껏다켜도 안사라짐)은 그냥 브라우저 저장
쿠키에 저장된것은 백엔드로 보낼수 있음 만료 정해두면 만료됬을때 사라짐
비회원으로 장바구니를 담는다??(로그인도 안했는디? 껏다켜도 유지되어있으??)로컬스토리지!
브라우저를 껏다켜도 토큰이 유지되게끔 토큰을 로컬 스토리지에 넣어보자!!
그럼 리프레시토큰은 왜배웜???
로컬 스토리지에넣는건 보안상 좋은건 아님! 아직 리프레시 안배웠으니까 해보자는것뿐임 ㅎㅎ
새로고침이란 다시접속한다는것
html css 자바스크립으를 다시받아오니까 다 다시 비게되는것
새로고침해도 안날라가게 로컬스토리지 라는 곳에 저장해보게뜨아아아아앍
주의!! 해당방법은 보안적으로 좋은방법이 아님
setAccessToken(accessToken);
localStorage.setItem("accessToken", accessToken);하고나면
로그인해서 생긴 accessToken이 로컬스테이지에 들어갔돠앗!
새로고침해도 정보가 유지된드아아아
쿼리들이 작동을 안하네?? ㅠㅠ 로컬스토리지에있는 값을 넣어줘야지이잉
앱닷 티엑스에스에
const myLocalStorageAccessToken = localStorage.accessToken;
setAccessToken(myLocalStorageAccessToken);
써주고 저장하면 짠하고 되긴하는데
새로고침하니까
localStorage is not defined
가 뜬돠???? 머즤?? 왜 로컬스토리지가 없다는거지??!!!
그걸 이해하려면 자바스크립트 랜더링 개념을 알아야한닷!
브라우저에 주소를 치고 엔터를 치면
브라우저에서 얀데브접속을하고
얀데브 프로그램자체에서 에이치티엠엘 을 주기전에
소스코드를 한번돌려본다!!(prerendering 프리랜더링/사전에 먼저한번 그려본다!/모든걸 완벽하게 그려보는게아니라 마운트되기 딱 전까지!)
그다음에 브라우저에 그려준다 diffing
그러고 프리랜더링한거랑 비교해보고
기능들을 넣어준다! hydration
여기서!! 프리랜더링할때는 얀데브안에 로컬스토리지가 당연히없돠!!!
그래서 localStorage is not defined 가 나온것
웹에디터 만들때 하이드레이션 문제점에대해 다시 배워볼것~
그럼 프리랜더링할때는 로컬스토리지 이야기 안해줘야징~
if (typeof window !== "undefined") {
const myLocalStorageAccessToken = localStorage.accessToken;
setAccessToken(myLocalStorageAccessToken || "");
} // 윈도우가 없다면= 프론트앤드 서버라면
// 윈도우가 없는게 아니라면 = 브라우저라면 이러면 해결됨
또는
useEffect(() => {
const myLocalStorageAccessToken = localStorage.accessToken;
setAccessToken(myLocalStorageAccessToken || "");
}, []); 
관리자페이지란?
사이트에 가입한 유저목록 조회...
통계보기.. 판매서비스다라면 매출이라던지~ 그런거 되는 사이트 ㅎㅎ
구매자용/판매자용/관리자용 등등이 모여서 여러가지가 생기게 된다.
큰개념의 권한은 이러하다.
오늘은 더 작은 권한부분인 로그인한사람과 안한사람으로 나눠보쟈!
HOC/Closure
hoc를 알아본후 커스텀훅까지 알아보게따
HOC를 알려면 클로저를 알아야함
클로저바탕으로 만들어진게 HOC이기 때문
Closure
(aaa())() ==>aaa() 감싸고있는 괄호는 생략가능!
aaa() 가 bbb함수를 리턴하게됨
그 bbb 함수를 실행하려면() 를 해줘야함!!
aaa()() 에 bbb라는 말은 아예없는데 bbb가 실행됨!
결국 bbb의 이름은 어떤거든 상관없음~~
function aaa(){
let apple = "이건 사과예요"
return function bbb(){
let banana="이건 바나나예요"
console.log("안녕하세요")
console.log(apple)
console.log(banana)
}
}
aaa()()
==>안녕하세요
이건 사과예요
이건 바나나예요
스코프체인에의해서 내부함수에서 외부함수에있는 변수에 접근할 수있다.
이영역을 클로저 라고 한다.
내부함수에서 외부함수의 변수(지역변수)에 접근할 수 있다. 이영역을 클로저 라고 한다아아악!!
function aaa(apple){
return function bbb(banana){
console.log("안녕하세요")
console.log(apple)
console.log(banana)
}
}
aaa("이건사과예여")("이건바나나예여")
==>안녕하세요
이건사과예여
이건바나나예여매개변수로 받는것도 가능하닷
aaa("이건사과예여")("이건바나나예여") 요 내용이 HOC 만드는데에 필요하다.
stack 마지막으로 들거간게 처음으로 빠짐(firt-In-Last-Out/Last-In-first-Out)리포구조
queue 선입선출(firt-In-Firtst-Out)피포구조
컨트롤제트 는 스텍구조/리포구조인것 !!
HOC
하이어오더컴포넌트
useEffect(() => {
if (!localStorage.getItem("accessToken")) {
alert("로그인을 먼저 해야합니다.");
router.push(`/23-04-login-check`);
}
}, []);로그인검증을 모든 페이지에서 계속 해야한다면?? hoc 사용하깅
hoc 는 보통 이름을 with 를 붙혀 쓴다.
우리는 whithAuth 라고 해보게똬(인증여부검사)
앞에with라고 붙었다 ? 그럼 hoc 인지 확인해봐야함
hof
f는 펑션
jsx를 리턴하면 컴포넌트
<div key={el} onClick={onClickChild}> 는 사실
리액트에서
onClickChild(event) 해서 넘겨주는거임
onClick={onClickChild(el)}
이면
onClickChild(event)(el)
로 자동변환되서 간다는거
그럼 받을때
const onClickChild =(el)= (event) => {
} 이렇게 이엘 한번 더 받아서 작동시키면됨 ㅎㅎ
