본문 바로가기

전체 글

(204)
브라우저 렌더링 브라우저의 역할 코드를 읽어서 페이지 그려줌 브라우저의 공통적 구조 (7가지) 브라우저마다 다른 렌더링 엔진 렌더링 엔진의 목표 1) 모든 요소를 화면에 보여준다 2) 업데이트가 필요할 때 효율적으로 렌더링 할 수 있도록 자료구조를 생성한다 동작과정(Critical Rendering Path) 1) html태그를 파싱해서 태그들을 토큰화 2) 브라우저의 랙싱과정으로 토큰이 각 노드로, 노드간의 연관관게로 DOM Tree 생성 3) js, css 필요한 애들을 따로 요청함 4) CCSSOM 스타일규칙을 읽어서 마찬가지로 트리구조로 생성 5) DOM Tree, CSSOM Tree 를 합쳐서 Render Tree 생성 6) 레이아웃 (reflow) : 뷰포트 내에서 요소들의 정확한 크기나 위치를 계산하는 단계..
HTTP란? (구성, 요청/응답메시지, 메소드 + CORS&OPTIONS) HTTP : Hyper Text Transfer Protocol 인터넷에서 데이터를 주고받을 수 있는 프로토콜(규칙) 구성 시작줄 헤더 본문 요청 http 메시지 예시 GET https://www.hello.com HTTP/1.1 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) ... Upgrade-Insecure-Requests: 1 (본문 없음) 첫줄 : 시작줄 : 메서드 + 주소 + HTTP 버전 두번쨰줄부터 : 헤더 한줄띄고 본문시작 응답 http 메시지 예시 HTTP/1.1 200 OK Connection: keep-alive Content-Encoding: gzip Content-Length: 35653 Content-Type: text/html..
쓰로틀링(throttling) 과 디바운싱(debouncing) 쓰로틀링, 디바운스 : 프로그래밍 기법 쓰로틀링 : 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출 되지 않도록 하는것 ex) 게시글 ADD 함수, 2초 이내에 또 작성될 일은 없으니 게시글 추가 함수를 쓰로틀링 2초 처리해야지 디바운싱 : 연이어 호출되는 함수들 중 마지막함수 (또는 제일 처음 함수)만 호출하도록 하는 것 ex) 마우스 구린거 써서 딸까까까까깍따라라락깍 되는것들 한번으로 처리해줄게