개념 정리/모던 자바스크립트 딥다이브45 모던 자바스크립트 : 브라우저의 렌더링 과정 0. 브라우저의 렌더링 과정 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행 => 브라우저 환경을 고려할 때 더 효율적인 클라이언트 사이드 자바스크립트 프로그래밍 가능 파싱(구문 분석) 파싱(구문 분석) : 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정 일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로 중간 언어인 바이트코드를 생성하고 실행 렌더링 렌더링 : HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것 브라우저의 렌더링 과정 브라우저는 HTML,.. 2023. 12. 2. 모던 자바스크립트 : Set과 Map 1. Set Set 객체는 중복되지 않는 유일한 값들의 집합 Set 객체는 배열과 유사하지만 차이가 있음 동일 값을 중복 포함 할 수 없음 요소 순서에 의미 없음 인텍스로 요소에 접근할 수 없음 이러한 특성들은 수학적 집합의 특성과 일치하며 set은 수학적 집합을 구현하기 위한 자료구조 Set 을 통해 교집합, 합집합, 차집합, 여집합 구현 가능 a. Set 객체의 생성 Set 객체는 Set 생성자 함수로 생성 Set 생성자 함수에 인수 전달하지 않으면 빈 Set 객체 생성 Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체 생성 이때 이터러블의 중복된 값은 Set 객체 요소로 저장되지 않음 b. 요소 개수 확인 요소 개수 확인할 때 : Set.prototype.size 프로퍼티 사용 size .. 2023. 11. 30. 모던 자바스크립트 : 디스트럭처링 할당 0. 디스트럭처링 할당 디스트럭처링 할당(구조 분해 할당) : 구조화된 배열과 같은 이터러블 또는 객체를 비구조화, 구조파괴 하여 1개 이상의 변수에 개별적으로 할당하는 것 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용 1. 배열 디스트럭처링 할당 ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법 ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출해 1개 이상의 변수에 할당 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며 할당 기준은 배열의 인덱스 => 순서대로 할당 배열 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽에 값을 할당받을 변수 선언 이때 변수를 배열 리터럴 형태로 선언 우번에 이터러블을 할.. 2023. 11. 30. 모던 자바스크립트 : 스프레드 문법 0. 스프레드 문법 ES6에서 도입된 스프레드 문법은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만듦 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션(NodeListm HTMLCollection), arguments와 같이 for...of 문으로 순회할 수 잇는 이터러블에 한정 스프레드 문법의 결과는 값이 아님 스프레드문법이 피연산자를 연산해 값을 생성하는 연산자가 아님 스프레드 문법의 결과는 변수에 할당할 수 없음 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용 가능 함수 호출문의 인수 목록 배열 리터럴의 요소 목록 객체 리터럴의 프로퍼티 목록 1. 함수 호출문의 인수 목록에서 사용하는 경우 요소들의 집합인 배열 펼쳐 개별.. 2023. 11. 30. 모던 자바스크립트 : 이터러블 1.이터레이션 프로토콜 ES6 도입된 이터레이션 프로토콜은 순회가능한 데이터 컬렉션을 만들기 위핸 ECMAScript 사양에 정의해 미리 약속한 규칙 ES6 이전의 순회 가능한 데이터 컬렉션, 즉 배열, 문자열, 유사배열 객체, DOM 컬렉션 등은 통일된 규약 없이 각자 나름의 구조를 가지고 for 문, for...in 문, foreach 메서드 등 다양한 방법으로 순회 가능 ES6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일해 for ...of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화 이터레이션 프로토콜의 종류 이터러블 프로토콜 Well-known Symbol인 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 .. 2023. 11. 30. 모던 자바스크립트 : String 1. String 생성자 함수 표준 빌트인 객체인 String은 원시 타입인 문자열 다룰 때 유용한 프로퍼티와 메서드 제공 String 객체는 생성자 함수 객체 => new 연산자와 함께 호출해 String 인스턴스 생성 가능 String 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면 [[StringData]] 내부 슬롯에 빈 문자열을 할당한 String 래퍼 객체 생성 String 생성자 함수의 인수로 문자열을 전달하면서 new 연산자와 함께 호출하면 [[StringData]] 내부 슬롯에 인수로 전달받은 문자열을 할당한 String 래퍼 객체 생성 String생성자 함수의 인수로 문자열이 아닌 값을 전달하면 인수를 문자열로 강제 변환 후 [[StringData]] 내부 슬롯에 변환.. 2023. 11. 30. 이전 1 2 3 4 5 6 ··· 8 다음
