[TIL] 프론트엔드 term 정리-1

next.js 브라우저가 렌더되는 순서

1. 브라우저가 프론트엔드 서버에서 HTML 코드를 받아온다(css 적용안됨)
2. HTML을 읽으면서 script, link태그에 있는 주소로 가서 자바스크립트 코드를 받아온다
3. 프론트엔드에서 HTML 을 한번 실행하고 나서 결과적으로 브라우저로 HTML이 실행됨. 
4. 프론트엔드 서버에서 프리렌더링(Pre-rendering)
5. 프리렌더링이 마치고 브라우저에서 차이점을 발견하는 Diffing 발생
6. 이후 다른 부분을 브라우저에서 채우는 Hydration 발생
7. 함수 부분은 프론트엔드 서버에서가 아니라 브라우저에서 실행됨
8. alert, localStorage 등은 브라우저에만 있음.

LocalStorage vs. SessionStorage

localStorage - 브라우저를 껐다 켜도 저장된 메모리가 사라지지 않음 sessionStorage - 브라우저를 껐다 켜면 메모리가 사라짐, 리프레시는 상관없음 +) LocalStorage, SessionStorage에 저장되는 것은 string 구조를 띄어야 하므로 JSON.stringify()를 통해 옵젝을 스트링화 시키는 것이 필요. 반대로 저장되어 있는 스트링을 옵젝/배열로 되돌리려면 JSON.parse()사용.

Hoisting, TDZ, Closure, Scope recap

• Hoisting : 스크립트 실행 시 변수 선언부분이 최상단으로 끌어올려지는 현상
  • var, function은 접근 가능
  • let, const는 접근 불가능(undefined)
• TDZ(Temporal Dead Zone) : 변수가 초기화/할당되기 전 선언 단계에서 접근할 수 없는 부분
  • var, function은 undefined로 받아와짐
  • let, const는 에러 발생
• Closure : 지금 실행하고 있는 함수의 외부 함수에 저장되어 있는 값
• Scope : 변수가 어디서부터 어디까지 활용 가능한지를 나타냄
• Scope Chaining : local scope에 없으면 closure에서 변수를 찾는 것. 중괄호 안이라면 어디든 가능함.
  • 
  • ccc에서 나오면 tomato가 메모리에서 삭제됨. (mark and sweep)
  • 클로져를 잘못 코딩하면 가장 안쪽에 있는 함수가 종료되지 않으면 그 위의 함수들도 종료가 되지 않게 됨 : ccc가 삭제 안 되는 경우에 상위 스코프에 있는 bbb, aaa 또한 삭제가 되지 않음.