오늘 한 일
- 모던 자바스크립트 Deep Dive
- 이터러블
- 스프레드 문법
- 디스트럭처링 할당
- Set과 Map
- 브라우저의 렌더링 과정
배운 것
이터러블
- 이터러블 프로토콜 (Symbol.iterator 구현)을 준수한 객체를 이터러블이라고 하며, 이터러블은 for...of 문으로 순회할 수 있으며 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있다
- 이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다
- 이터레이터의 next 메서드: 이터러블의 각 요소를 순회하기 위한 포인터 역할. 순회 결과를 나타내는 이터레이터 리절트 객체(value, done 프로퍼티로 구성)를 반환
- for...of 문
- 이터레이션 프로토콜은 다양한 데이터 공급자가 하나의 순회 방식을 갖도록 규정하여 데이터 소비자가 효율적으로 다양한 데이터 공급자를 사용할 수 있도록 데이터 소비자와 공급자를 연결하는 인터페이스 역할을 한다
- 사용자 정의 이터러블
스프레드 문법
- 이터러블을 개별적인 값들의 목록으로 만듦
- Rest 파라미터: 함수에 전달된 인수들의 목록을 배열로 전달받기 위해 매개변수 앞에 ...을 붙이는 것 (스프레드 문법과 반대의 개념)
디스트럭처링 할당
- 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것
- 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용
- 배열 디스트럭처링 할당, 객체 디스트럭처링 할당
- Set, Map
브라우저의 렌더링 과정
1. URL을 통해 HTML, CSS, JS, 이미지, 폰트 등 렌더링에 필요한 리소스를 서버에 요청하고 응답을 받음
2. 브라우저 렌더링 엔진이 HTML, CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리 생성
3. 브라우저의 자바스크립트 엔진이 자바스크립트를 파싱하여 AST를 생성 후 바이트코드로 변환하여 실행. 자바스크립트는 이때 DOM API를 통해 DOM/CSSOM을 변경 가능. 변경된 DOM/CSSOM은 다시 렌더 트리로 결합
4. 렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산하고 화면에 HTML 요소를 페인팅
- HTTP : 웹에서의 브라우저-서버 간 통신 프로토콜
- HTTP 1.1 : 커넥션 당 하나의 요청과 응답만 처리. 요청 리소스 개수에 비례하여 응답 시간 증가
- HTTP 2.0 : 다중 요청/응답 가능. 페이지 로드 속도 향상
- 자바스크립트 파싱에 의한 DOM 생성이 중단되는 문제를 해결하기 위해 script 태그에 async/defer 어트리뷰트 추가 -> HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행
- async: 자바스크립트 파싱 및 실행이 자바스크립트 로드 직후에 이루어짐, script 태그 순서 상관없이 먼저 로드된 자바스크립트부터 실행 (순서가 보장되지 않음)
defer: 자바스크립트 로드는 비동기적으로 진행되나 DOM 생성 완료 이후 자바스크립트 실행
기록하기