개발자 퉁이리

브라우저의 렌더링 과정 렌더링은 HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다. 파싱: 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스트리를 생성하는 일련의 과정 브라우저가 HTML, CSS, JS, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답 받음 HTML, CSS를 파싱하여 DOM, CSSOM을 생성하고 이들을 결합하여 렌더트리 생성 JS를 파싱하여 AST를 생성하고 바이트 코드로 변환하여 실행. 이때 JS는 DOM API를 통해 DOM이나 CSSOM을 변경 가능. 변경된 DOM과 C..

Set Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다. 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X const set = new Set(); console.log(set); // Set(0) {} Set 객체는 Set 생성자 함수로 생성하고, 이터러블을 인수로 전달받아 Set 객체를 생성한다. 이때 이터러블의 중복된 값을 Set 객체에 요소에 저장되지 않는다. Set 객체의 요수 개수 -> Set.prototype.size 프로퍼티를 사용 Set 객체의 요수 추가 -> Set.prototype.add 메서드를 사용 Set 객체의 요수 존재 여..

디스트럭처링 할당 디스트럭처링 할당(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여, 다른 말로는 구조를 파괴하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다. 배열 디스트럭처링 할당 // ES5 var arr = [1, 2, 3]; var one = arr[0]; var two = arr[1]; var three = arr[2]; console.log(one, two, three); // 1 2 3 위 코드는 ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법이다. // ES6 const arr = [1, 2, 3]; const [one, two, th..

스프레드 문법 ES6에서 도입된 스프레드 문법(전개 문법) ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서(전개) 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 for ... of 문으로 순회할 수 있는 이터러블에 한정한다. //개별 요소로 분리한다. console.log(...[1,2,3]); // 1 2 3 //문자열은 이터러블이다. console.log(... 'Hello'); // H e l l o //Map Set은 이터러블이다. console.log(... new Map([['a','1'], ['b','2']])); // ['a', '1'] ['b', '2'] console.log(... new Set([1,2,3])); // 1 2 3 스프레드 문법의 결과물은..

이터레이션 프로토콜 ES6에서는 순회 가능한 데이터 컬렉션을 이터러블로 통일하였다. 이터러블 프로토콜 이터레이터 프로토콜 이터러블 이터러블 프로토콜을 준수한 객체를 이터러블이라 한다. 즉, 이터러블은 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체를 말한다. const array = [1, 2, 3]; // 배열은 Symbol.iterator 메서드를 상속받는다. console.log(Symbol.iterator in array); // true // 이터러블인 배열은 for ... of 문으로 순회 가능하다. for(const item of array) { console.log(item); } // 스프레드 문법 사용할 수 있다. con..

Symbol 자바스크립트에는 6개의 타입이 있었다. 심벌은 ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 심벌 값은 다른 값과 중복되지 않는 유일무이한 값이다. 따라서 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용된다. 심벌 값의 생성 심벌 값은 Symbol 함수를 호출하여 생성한다. 이때 생성된 심벌 값은 외부로 노출되지 않아 확인할 수 없으며, 다른 값과 절대 중복되지 않는 유일무이한 값이다. const mySymbol(); console.log(typeof mySymbol); //symbol // 심벌 값은 외부로 노출되지 않아 확인할 수 없다. console.log(mySymbol); // Symbol() 🎢 Symbol.for / Symbol..

정규 표현식 정규 표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어다. 정규 표현식은 자바 스크립트의 고유 문법이 아니며, 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다. const tel = '010-1234-567팔'; //정규 표현식 리터럴로 휴대폰 전화번호 패턴을 정의한다. const regExp = /^\d{3}-\d{4}-\d{4}$/; regExp.test(tel); // false 정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다. 정규 표현식의 생성 정규 표현식 리터럴은 패턴과 플래그로 구성된다. / = 시작 종류 기호 regexp = 패턴 i = 플래그 플래그 플래그는 정규 표현식의 검색 방식을 설정하기 위해 사용한다. 플래그 의미 설명 i..

Date Date는 날짜와 시간을 위한 메서드를 제공하는 빌트인 객체이면서 생성자 함수다. 💫 Date 생성자 함수 Date는 생성자 함수다. Date 생성자 함수로 생성한 Date 객체는 내부적으로 날짜와 시간을 나타내는 정수 값을 갖는다. new Date() Date 생성자 함수를 인수 없이 new 연산자와 함께 호출하면 현재 날짜와 시간을 가지는 Date 객체를 반환한다. new Date();​ new 연산자 없이 호출하면 Date 객체를 반환하지 않고 날짜와 시간 정보를 나타내는 문자열 함수를 반환한다. new Date(milliseconds) Date 생성자 함수에 숫자 타입의 밀리초를 인수로 전달하면 1970년 1월 1일 00:00:00을 기점으로 인수로 전달된 밀리초만큼 경과한 날짜와 시간을..

Number Number는 원시 타입인 숫자를 다룰 때 유용한 프로퍼티와 메서드를 제공한다. Number 생성자 함수 const numObj = new Number(); console.log(numObj); Number 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면 [[NumberData]] 내부 슬롯에 0을 할당한 Number 래퍼 객체를 생성한다. const numObj = new Number(10); console.log(numObj); const numObj = new Number('10'); console.log(numObj); Number 생성자 함수의 인수로 숫자가 아닌 값을 전달하면 인수를 숫자로 강제 변환한다. 💫 Number 프로퍼티 Number.EPSILON Num..

배열 배열은 여러 개의 값을 순차적으로 나열한 자료구조다. *요소 : 배열이 가지고 있는 값 *인덱스 : 배열에서 자신의 위치를 나타내는 값 *length 프로퍼티를 갖는다. 자바스크립트에 배열이라는 타입은 존재하지 않는다. 배열은 객체 타입이다. 🔎 일반 배열과 자바스크립트의 배열이 어떻게 다른지 알아보자 일반적인 배열은 동일한 크기의 메모리 공간이 연속으로 나열된 자료구조를 말한다. 자바스크립트의 배열은 각 요소의 메모리 공간이 동일하지 않아도 되고 연속적이지 않을 수 있다. 자바스크립트의 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체다. 📍 밀집 배열 : 하나의 데이터 타입으로 통일되어 있으며 서로 연속적으로 인접해 있는 배열 📍 희소 배열 : 배열의 요소가 연속적으로 이어져 있지 않는 배열 ..