일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- 제너레이터
- 클로저
- Deep Dive
- await
- Escape Hatches
- 표현식과 문
- 에러 처리
- 이터러블
- Set과 Map
- async
- rest api
- 코어JS
- 싸피
- Strict Mode
- 디스트럭처링 할당
- ES6 함수의 추가 기능
- REACT
- 데이터 타입
- DEEPDIVE
- Ref로 DOM 다루기
- 비동기 프로그래밍
- 스프레드 문법
- Ref로 값 참조하기
- 모듈
- js
- 개발 환경 구축
- 배열
- 브라우저의 렌더링 과정
- BETA
- 프로미스
- Today
- Total
목록JavaScript (50)
코딩을 쉽게 해보자
구글의 V8 JS 엔진으로 빌드된 JS 런타임 환경인 Node.js의 등장으로 JS는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수 있는 범용 개발 언어가 되었다. 브라우저 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱(해석)하여 브라우저에 렌더링하는지 살펴보자 파싱 파싱(구문 분석)은 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문자열을 토큰으로 분해하고 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스트리를 생성하는 일련의 과정을 말한다. 일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로 중간 언어인 바이트코드를 생성하고 실행한다. 렌더링 렌더링은 HTML, CSS, JS로 작성된 문서를 파싱하여 ..
1. Set Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체는 배열과 유사하지만 다음과 같이 차이가 있다. 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X 1-1. Set 객체의 생성 Set 생성자 함수로 생성한다. 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다. Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. 이때 이터러블의 중복된 값은 Set 객체에 요소로 저장되지 않는다. 1-2. 요소 개수 확인 Set.prototype.size 프로퍼티를 사용한다. 1-3. 요소 추가 Set.prototype.add 메서드를 사용한다. JS의 모든 값을 요소..
디스트럭처링 할당)구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다. 1. 배열 디스트럭처링 할당 ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법은 각각 해야 했었다. 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스다. 변수에 기보본값을 설정할 수 있고, 기본값보다 할당된 값이 우선한다. Rest 파라미터와 유사하게 Rest 요소 ...을 사용할 수 있다. Rest 요소는 Rest 파라미터와 마찬가지로 반드시 마지막에 위치..
ES6 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. for ... of 문으로 순회할 수 있는 이터러블에 한정된다. 스프레드 문법의 결과물은 값으로 사용할 수 없고 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다. 함수 호출문의 인수 목록 배열 리터럴의 요소 목록 객체 리터럴의 프로퍼티 목록 1. 함수 호출문의 인수 목록에서 사용하는 경우 Math.max 2. 배열 리터럴 내부에서 사용하는 경우 스프레드 문법을 배열 리터럴에서 사용하면 ES5에서 사용하는 기존의 방식보다 더욱 간결하고 가독성 좋게 표현할 수 있다. 2-1. concat // ES5 var arr = [1, 2].concat([3, 4]); console.log(arr); // [1, 2, ..