key: value 의 객체 형태로 저장된다.
영구 저장되기 때문에 껐다 켜도 데이터가 남아있기 때문에 직접 삭제해주어야 한다. 쇼핑몰에서 비회원으로 장바구니를 담아도 남아있는 이유가 Local storage에 저장해주기 때문이다. console 에서 localStorage 입력 시 저장된 데이터 정보를 확인할 수 있다. 하지만 보안성이 좋지 않기 때문에 중요한 데이터는 저장하지 않는 게 좋다.
VS Code에서도 localStorage 를 사용할 수 있다.
브라우저를 종료하면 저장된 데이터가 삭제된다.
백엔드 API를 보낼 때 같이 넘겨줄 수 있다. 만료 시간을 저장할 수 있어서 특정 만료 시간이 지나면 저장된 데이터들이 사라진다.
yarn dev
마운트 되기 전의 html, css, js 의 내용들을 그려본다. 전체적인 구조만 확인. onClick, onChange 와 같은 기능들의 바인딩이 빠져있다.
이때 local storage의 개념이 없음
새로고침은 재접속 하는 것과 같다. 따라서 html, css, js가 처음부터 다시 그려지기 때문에 저장된 변수들이 다 초기값으로 돌아가게 된다.
프리렌더링 한 것과 브라우저에서 실행된 것을 비교하는 작업. 최종 완성형을 업데이트 해준다. 이때는 기능 구현이 가능하다.
diffing 해주는 작업 이름
회원/비회원이 볼 수 있는 페이지 차이
일반회원/관리자가 볼 수 있는 페이지 차이
High Order Function
function aaa(){
function bbb(){
console.log("안녕하세요")
}
}
aaa()() // "안녕하세요"
함수 안에 함수 이름은 중요하지 않다.
function aaa(){
let apple = "이건 사과예요"
return function bbb(){
let banana = "이건 바나나예요"
console.log("안녕하세요")
console.log(apple)
console.log(banana)
}
}
aaa()()
// "안녕하세요"
// "이건 바나나예요"
// "이건 사과예요"
스코프 체인으로 내부 함수에서 외부 함수의 변수에 접근할 수 있다.
First-In-Last-Out
(=Last-In-Fast-Out)
First-In-First-Out(=Last-In-Last-Out)
실행되는 함수들을 차곡차곡 쌓아놓는 것
내부 함수에서 외부 함수의 지역변수에 접근하는 것
High Order Component
권한분기를 위해 다른 컴포넌트보다 먼저 실행할 컴포넌트를 만들어줘야 한다.