준비 ### 브라우저 동작 도메인을 치면 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의 경우 변경 -> 사이드 이펙트 관리