javascript
브라우저의 렌더링 과정
node.js 의 등장으로 JS 는 웹 브라우저를 벗어나 서버 사이드 앱 개발도 가능한 범용 개발 언어가 되었습니다. 하지만 역시 JS 가 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹페이지나 애플레키이션의 클라이언트 사이드입니다. 웹 애플리케이션의 클라이언트 사이드 JS 는 브라우저에서 HTML/CSS 와 함께 동작합니다. 즉, 브라우저 환경을 고려한다면 더 효율적인 자바스크립트 프로그래밍이 가능합니다. 이를 위해 브라우저는 아래와 같이 HTML/CSS/JS 로 작성된 문서를 파싱하여 브라우저에 렌더링합니다. 1. 브라우저는 HTML/CSS/JS, 이미지, 폰트 파일등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답받습니다. 2. 브라우저의 렌더링 엔진은 서버로부터 응답받은 HTML/C..
[자바스크립트] Map
Map 이번에는 JS 에서 지원하는 자료구조인 Map에 대해서 살펴보려고 합니다. Map의 특징과 여러가지 메서드를 살펴보면서 정리해보도록 하겠습니다. Map 객체는 키와 값이라는 쌍으로 이루어진 컬렉션입니다. Map 은 객체와 비슷하지만 아래와 같은 차이가 있습니다. 1. 키로 객체를 포함한 모든 값을 사용할 수 있다. 2. 이터러블이다. 3. map.size 로 요소 개수의 확인이 가능하다. Map 객체 생성해보기 Map객체는 Map생성자 함수로 생성합니다. 만약 인수를 전달하지 않으면 빈 Map객체가 생성됩니다. const map = new Map(); console.log(map); // Map(0) {} Map 생성자 함수는 인수로 이터러블을 받습니다. 인수로 전달되는 이터러블은 키와 값의 쌍으..
[자바스크립트] Set (집합)
Set 이번에는 JS 에서 지원하는 자료구조인 Set 에 대해서 살펴보려고 합니다. Set 은 Set의 특징과 여러가지 메서드를 살펴보면서 정리해보도록 하겠습니다. Set 객체는 중복되지 않는 유일한 값들의 집합입니다. Set 객체의 특성은 수학적 집합의 특성과 일치합니다. Set 은 수학적 집합을 표현한 자료구조입니다. 이를 통해 교집합, 합집합, 차집합, 여집합등을 구현하는 것이 가능합니다. Set 객체는 배열과 비슷하지만 아래와 같은 차이가 있습니다. 1. 동일한 값을 중복하여 포함할 수 없다. 2. 요소 순서에 의미가 없다. 3. 인덱스로 요소 접근이 불가능하다. Set 객체 생성해보기 Set 객체는 Set 생성자 함수로 생성합니다. 만약 인수를 전달하지 않으면 빈 Set 객체가 생성됩니다. co..
[자바스크립트] 디스트럭처링 할당
디스트럭처링 할당 디스트럭처링 할당은 구조화된 배열과 같은 이터러블이나 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적 할당 하는 것을 이야기합니다. 이는 배열과 같은 이터러블이나 객체 리터럴에서 필요한 값을 추출해 변수에 할당할 때 유용합니다. 이번 글에서는 디스트럭처링에 대해서 정리해보자 합니다. 배열 디스트럭처링 할당하기 ES5 에서는 구조화된 배열을 구조 분해하여 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 ES6 에서는 배..
[자바스크립트] 스프레드 문법
스프레드 문법 ES6 에서 스프레드 문법이 도입되었습니다. 스프레드 문법은 뭉쳐 있는 여러 값을 펼쳐서(spread) 개별적인 값의 목록을 만들어 냅니다. 주의 할 점은 스프레드 문법은 for...of 문으로 순회 가능한 이터러블에 한정됩니다. 또한 스프레드는 개별적인 값을 만드는 것이 아닌 값들의 목록을 만드는 것이기 때문에 이를 값을 생성하는 연산자로 생각하면 안 됩니다. 즉, 스프레드 문법의 결과를 변수에 할당이 불가능합니다. (변수에는 값만 할당이 가능합니다.) // ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3) console.log(...[1, 2, 3]); // 1 2 3 // 이터러블이 아닌 일반 객체는 스프레드 문법의 대상이 될 수 없다. consol..
[자바스크립트] 이터러블
이터러블 이터러블은 이터러블 프로토콜을 준수한 객체를 이야기합니다. 이는 Symbol.iterator 를 프로퍼티 키로 사용한 메서드를 직접 구현해서 만들거나 프로토타입 체인에 의해서 상속받은 객체를 이야기합니다. 이러러블 프로토콜을 먼저 알아보면서 차근차근 정리해보도록 하겠습니다. 이터레이션 프로토콜 ES6 이전에는 순회 가능한 데이터 컬렉션(배열, 문자열, 유사 배열 객체 등등)은 각자의 구조를 통해 for, for...in, forEach 등 다양한 방법으로 순회가 가능했습니다. ES6 에서는 이터레이션 프로토콜을 준수시켜 이터러블로 통일하고 for...of, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화 했습니다. 이터레이션 프로토콜은 아래와 같이 2가지로 나뉘게 됩니..
[자바스크립트] Symbol
Symbol 자바스크립트에서는 총 6개의 타입이 있었습니다. 문자열, 숫자, 불리언, undefined, null 그리고 객체 타입이 존재했습니다. ES6 에서는 7 번째 데이터 타입인 심벌(Symbol)이 등장합니다. 심벌은 원시값으로 다른 값과 절대로 중복되지 않는 유일무이한 값을 만들어냅니다. 주로 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해서 사용하는 심벌에 대해서 정리해보도록 하겠습니다. Symbol 함수로 Symbol 만들기 심벌 값은 Symbol 함수를 호출해서 생성합니다. Symbol 은 리터럴 표기법을 통해서 생성할 수 없고 new 연산자와 함께 호출이 불가능합니다. // Symbol 함수를 호출하여 유일무이한 심벌 값을 생성한다. const mySymbol = Symbol(); ..
[자바스크립트] 배열의 메서드들
배열의 메서드들 이번에는 많이 사용하는 배열의 메서드들에 대해서 한 번 알아보도록 하겠습니다. 배열의 메서드들 Array.from Array.from 은 유사 배열 객체를 변환해서 배열을 생성합니다. 인수로는 iterable 과 유사 배열을 줄 수 있는데, 이를 배열을 만들어 줍니다. Array.from({ length: 3 }, (_, i) => i); // -> [0, 1, 2] Array.prototype.indexOf 원본 배열에서 인수로 전달된 요소를 검색해서 인덱스를 반환해줍니다. 중복되는 요소가 있다면 첫 번째로 검색된 요소의 인덱스를 반환해줍니다. 만약 존재하지 않으면 -1을 반환해줍니다. 대부분 요소의 존재 여부를 확인하기 위해서 사용합니다. const arr = [1, 2, 2, 3];..