개발 스터디

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 48.1 모듈의 일반적 의미 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 모듈은 기능을 기준으로 파일 단위로 분리 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질수 있어야 한다. 모듈은 애플리케이션이나 다른 모듈에 의해 재사용되어야 의미가 있다. 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다. export 공개된 모듈의 자산을 사용하는 모듈을 모듈 사용자라 한다. 모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있다. import

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 43.1 Ajax란? Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수진하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. Ajax 이전의 웹페이지는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링하는 방식으로 동작 화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링했다. 단..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 42.1 동기 처리와 비동기 처리 함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택에 푸시되고 함수 코드가 실행된다. 함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거 된다. 자바크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 동시 2개 이상의 함수를 동시에 실행할 수 없다는 것을 의미 “실행중인 실행 컨텍스트”를 제외한 모든 실행 컨텍스트는 모두 실행 대기 중인 태스크들이다. 자바스크립트 엔진은 한번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. 싱글 스레드 방식은 한번에 하나의 태스크만 실행할 수 있기 때문에 처리시..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 41.1 호출 스케줄링 함수를 명시적으로 호출하지 않고 일정 시간이 경과한 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다. 이를 호출 스케줄링이라 한다. 타이머를 생성하는 함수 setTimeout과 setInterval 타이머를 제거할 수 있는 함수 clearTimeout과 clearInterval 타이머 함수는 생성한 타이머가 만료되면 콜백 함수가 호출 된다. setTimeout 함수가 생성한 타이머는 단 한번 동작 setInterval 함수가 생성한 타이머는 반복 동작 setTimeout, setInterval은 비동기 처리 방식으로 동작 41.2 타이머 함수 41.2.1 setTimeout / clearTimeout setT..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 40.1 이벤트 드리븐 프로그래밍 브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라고 한다. 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 한다. 이벤트 중심으로 제어하는 프로그래밍 방식을 이벤트 드리븐 프로그래밍이라 한다. Click me! 40.2 이벤트 타입 이벤트 타입은 이벤트의 종류를 나타내느 문자열이다. 이벤트 타입은 약 200여 가지가 있다. 40.2.1 마우스 이벤트 이벤트 타입 이벤트 발생 시점 click 마우스 버튼을 클릭했을 때 dblclick 마우스 버튼을 더블 클릭했을 때 mousedown 마우스 ..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 브라우저가 HTML, CSS, 파싱 파싱은 프로그래밍 언어 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실해기 위해 택스트 문서의 문자열을 토큰으로 분해하고, 토큰의 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정을 말한다. 일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로 중간 언어인 바이트코드를 생성하고 실행한다. 렌더링 렌더링은 HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다. 브라우저의 랜더링 과정 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 렌더링 엔진은 서버로부터 응답된..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 37.1 Set Set 객체는 중복되지 않는 유일한 값들의 집합이다. 배열과 유사하지만 다음과 같은 차이가 있다.구분 배열 Set 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X Set 객체의 특성은 수학적 집합의 특성과 일치한다. Set객체는 수학적 집합을 구현하기 위한 자료구조이다. 교집합, 합집합, 차집합, 여집합 등 37.1.1 Set 객체의 생성 Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. 중복된 값은 Set 객체에 요소로 저장되지 않는다. const set1 = new Set([1, 2, 3, 3]) console.log(set1) //..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 디스트럭처링 할당은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 36.1 배열 디스트럭처링 할당 ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법은 다음과 같다 const arr = [1, 2, 3] const one = arr[0] const two = arr[1] const three = arr[2] console.log(one, two, three) // 1 2 3 배열 디스트럭처링 할당의 대상은 이터러블이여야 하며, 할당 기준은 배열의 인덱스다. const arr = [1, 2, 3] const [one, two, three] = ar..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. ES6에서 도입된 스프레드 문법 …은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션, arguments와 같이 for … of 문으로 순회할 수 있는 이터러블에 한정된다. console.log(...[1, 2, 3]) // 1 2 3 console.log(...'Hello') // H e l l o console.log(...new Map([['a', '1'], ['b', '2']])) // ['a', '1'] ['b', '2'] console.log(...new Set([1, 2, 3])) // 1 2 3 consol..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 34.1 이터레이션 프로토콜 ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션을 만들기 위하 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. 이터레이션 프로토콜에는 이터러블 프로토콜과 이터레이터 프로토콜이 있다. 이터러블 프로토콜이러한 규약을 이터러블 프로토콜이라 하며, 이터러블 프로토콜을 준수한 객체를 이터러블이라 한다. 이터러블은 for…of 문으로 순회할 수 있으며 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있다. Well-known Symbol인 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속 받은 Symbol.iterator 메서드를 호출..