220413

브라우저에서 데이터 저장하기

key: value 의 객체 형태로 저장된다.

local storage

영구 저장되기 때문에 껐다 켜도 데이터가 남아있기 때문에 직접 삭제해주어야 한다. 쇼핑몰에서 비회원으로 장바구니를 담아도 남아있는 이유가 Local storage에 저장해주기 때문이다. console 에서 localStorage 입력 시 저장된 데이터 정보를 확인할 수 있다. 하지만 보안성이 좋지 않기 때문에 중요한 데이터는 저장하지 않는 게 좋다.

VS Code에서도 localStorage 를 사용할 수 있다.

session storage

브라우저를 종료하면 저장된 데이터가 삭제된다.

cookies

백엔드 API를 보낼 때 같이 넘겨줄 수 있다. 만료 시간을 저장할 수 있어서 특정 만료 시간이 지나면 저장된 데이터들이 사라진다.

prerendering

yarn dev
마운트 되기 전의 html, css, js 의 내용들을 그려본다. 전체적인 구조만 확인. onClick, onChange 와 같은 기능들의 바인딩이 빠져있다.
이때 local storage의 개념이 없음

새로고침은 재접속 하는 것과 같다. 따라서 html, css, js가 처음부터 다시 그려지기 때문에 저장된 변수들이 다 초기값으로 돌아가게 된다.

diffing

프리렌더링 한 것과 브라우저에서 실행된 것을 비교하는 작업. 최종 완성형을 업데이트 해준다. 이때는 기능 구현이 가능하다.

hydration

diffing 해주는 작업 이름

권한분기

회원/비회원이 볼 수 있는 페이지 차이
일반회원/관리자가 볼 수 있는 페이지 차이

HOF

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()()
// "안녕하세요"
// "이건 바나나예요"
// "이건 사과예요"

스코프 체인으로 내부 함수에서 외부 함수의 변수에 접근할 수 있다.

stack

First-In-Last-Out
(=Last-In-Fast-Out)

queue

First-In-First-Out(=Last-In-Last-Out)

call stack

실행되는 함수들을 차곡차곡 쌓아놓는 것

Closure

내부 함수에서 외부 함수의 지역변수에 접근하는 것

HOC

High Order Component
권한분기를 위해 다른 컴포넌트보다 먼저 실행할 컴포넌트를 만들어줘야 한다.

• 먼저 실행 컴포넌트 화살표 함수로 바꿔주기
• Bbb 컴포넌트를 Aaa 컴포넌트에 import 해주기
• HOC는 with 를 붙인 이름을 같는다(관례)
  • withAuth, with ~