---
# System prepended metadata

title: Untitled

---

준비

### 브라우저 동작
도메인을 치면 DNS에서 해당 서버와 매칭되는 ip를 찾고 gateway로 이동(라우터) -> ARP로 맥주소 찾음(물리서버) -> 정보 요청(TCP 수립 - 3-way handshake(syn -> ack + syn -> ack))

-> HTML = DOM 트리 + CSS = CSSOM 트리 => render tree => 화면 생성 -> reflow(배치) -> 그리기(paint)

### 호이스팅
최상단으로 변수가 올라와 선언된것 처럼 행동하는 동작

javascript 인터프리터의 특성인데, 먼저 선언을 모두 초기화하여 context에 등록하기 떄문에 생김, const나 let도 마찬가지로 호이스팅되지만 동작을 안할 뿐

### 클로저
**환경을 포함하는 실행함수를 생성**, 클로저의 실행타이밍엔 그 실행환경이 포함된다. 함수의 은닉성등이나 이전 환경을 기억해야하는 IIFE에 활용가능

### position
상대적 위치 값을 설정하는 display요소, **static**, fixed, absolute, relative, sticky등등

### GET / POST

get은 데이터의 요청, cache되어 사용가능 / post는 업로드 요청, 데이터의 전송(body), cache되지 않음

### this

실행시키는 주체가 this, 최상단에서 실행시 window(혹은 node), 바인드하여 (직접 지정하여) 실행할 수 있음, arrow function에선 선언시 상위 단

### 브라우저 저장소

storage = HTML5에서 스펙, 5MB 제한, cookie와 달리 항시 포함되지 않음, local -> 영속 / session -> 탭 레벨에서 관리

### JS의 스레드

싱글 -> 하지만 webworker 스펙으로 백그라운드에서 작업하는 형태 가능
worker는 message를 받아서 실행 이후 메시지를 보내서 event handling

### event loop

스택에 실행함수를 쌓음, 하지만 web api에 등록되면 이는 queue에 등록 (task) 루프는 stack이 비어야 등록

Promise 스펙의 경우에 이는 micro task queue에 등록되고 task 큐보다 우선권 가짐

### 버블링

상위로 이벤트 전파
전체 이벤트 관리에 용이 -> capturing으로 반대 가능

### 실행 컨택스트

### 이터러블

Symbol에 등록된 형태로 반복자의 시스템 등록된 이터러블은 next로 다음 요소를 지속적으로 호출
generator는 이를 쉽게 만들 수 있음, yield 시점에 반환 이후 next를 통해 다음 요소를 지속 반환

### 프로토 타입

js에서 class처럼 상속적 개념을 표현, chaining을 통해 상위로 계속 해당 요소를 가져옴

### HTML js 랜더링

DOM 파싱중 js 실행되면 해석기로 js 넘어감, 따라서 이를 방지해야함, defer등으로 lazy loading

### SPA / SSR

spa는 첫 로드에 모든 js가 랜더링을 담당, 빈페이지 넘어옴, 그러므로 한 번 로딩이 김, 하지만 반응성 좋음

ssr은 서버에서 화면을 그림, 따라서 초기 로딩, 그려진 페이지가 넘어옴

### require / import

commonjs / es6 문법, require은 전부 로드 / import는 아님

### cors

동일 출저 원칙에 대해 도메인이 다른 경우에도 자원을 얻을 수 있도록 한 프로토콜, 브라우저 레벨 원리, 따라서 브라우저단에서 우회 가능

preflight로 확인 -> request요청 순서

### React DOM

리엑트는 DOM과 동일한 VDOM을 만듬, 이를 비교 처리함

라이프 사이클은 결국 마운트 전, 마운트 후 즉, 데이터 변화를 기준으로 처리

useEffect의 경우 변경 -> 사이드 이펙트 관리