개발59 38. 브라우저의 렌더링 과정 대부분의 프로그래밍 언어는 운영체제나 가상 머신 위에서 실행되지만 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 더 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능하다. 이를 위해 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱하여 브라우저에 렌더링하는지 살펴보자. 파싱: 파싱은 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정을 말한다. 일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로 중간 언어인 바이트코드를 .. 2022. 8. 11. 37. Set과 Map Set Set 객체는 수학적 집합을 나타내는 자료구조이다. Set 객체는 배열과 유사하지만 차이가 있다. 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X 따라서 Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체의 생성 Set 객체는 Set 생성자 함수로 생성한다. 인수를 생략하면 빈 Set 객체가 생성된다. Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. 이때 이터러블의 중복된 값은 Set 객체에 요소로 저장되지 않는다. 요소 개수 확인 Set 객체의 요소 개수를 확인할 때는 Set.prototype.size 프로퍼티를 사용한다. size 프로퍼티는 getter만 존재.. 2022. 8. 7. 36. 디스트럭처링 할당 디스트럭처링 할당(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 분해하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. ES6에서 도입되었다. 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다. 배열 디스트럭처링 할당 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다. 이때 할당문의 좌변에는 값을 할당받을 변수를 배열 리터럴의 형태로 선언하며, 할당문의 우변에는 이터러블을 위치시킨다. 할당 기준은 배열의 인덱스다. 즉, 순서대로 할당된다. 배열 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있다. 배열 디스트럭처링 할당은 배열과 같은 이터러블에서 필요한 요소만 추출하여 변수에 할당하고 싶을 때 .. 2022. 8. 7. 35. 스프레드 문법 ES6에서 도입된 스프레드 문법 ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. 뭉쳐 있는 여러 값들의 집합이라는 표현에서 알 수 있듯 스프레드 문법을 사용할 수 있는 대상은 이터러블에 한정된다. 또한 스프레드 문법의 결과는 개별적인 값들의 목록이다. 즉, 스프레드 문법의 결과는 값이 아니다. 이는 스프레드 문법이 피연산자를 연산하여 값을 생성하는 연산자가 아님을 의미한다. 따라서 스프레드 문법의 결과는 변수에 할당할 수 없다. 스프레드 문법은 다음과 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다. 함수 호출문의 인수 목록 배열 리터럴의 요소 목록 객체 리터럴의 프로퍼티 목록 함수 호출문의 인수 목록에서 사용하는 경우 요소들의 집합인 배열을 펼.. 2022. 7. 31. 34. 이터러블 이터레이션 프로토콜 ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. ES6 이전의 순회 가능한 데이터 컬렉션, 즉 배열, 문자열, 유사 배열 객체, DOM 컬렉션 등은 통일된 규약 없이 각자 나름의 구조를 가지고 for 문, for...in 문, forEach 메서드 등 다양한 방법으로 순회할 수 있었다. ES6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for...of 문, 스프레드 문법, 배열 디스트럭쳐링 할당의 대상으로 사용할 수 있도록 일원화했다. 이터레이션 프로토콜에는 이터러블 프로토콜과 이터레이터 프로토콜이 있다. 이터러블 프로토콜: Well-Known.. 2022. 7. 28. 33. Symbol 심벌 심벌은 ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 심벌 값은 다른 값과 중복되지 않는 유일무이한 값이다. 따라서 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다. 심벌은 중복되지 않는 상수 값을 생성하는 것은 물론 기존에 작성한 코드에 영향을 주지 않고 새로운 프로퍼티를 추가하기 위해, 즉 하위호환성을 보장하기 위해 도입되었다. 심벌 값의 생성 Symbol 함수 심벌 값은 Symbol 함수를 호출하여 생성한다. 다른 원시값은 리터럴 표기법으로 생성할 수 있지만 심벌 값은 Symbol 함수를 호출하여 생성해야 한다. 이때 생성된 심벌 값은 외부로 노출되지 않아 확인할 수 없으며, 다른 값과 절대 중복되지 않는 유일무이한 값이다. 심벌 함수는 .. 2022. 7. 28. 이전 1 2 3 4 5 6 7 ··· 10 다음