모던 자바스크립트 딥다이브

모듈애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각모듈은 기능을 기준으로 파일 단위로 분리함모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 함모듈의 자산(모듈에 포함되어 있는 변수, 함수, 객체 등)은 기본적으로 캡슐화되어 다른 모듈에서 접근할 수 없음하지만 모듈은 애플리케이션이나 다른 모듈에 의해 재사용되어야 의미가 있기 때문에 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능함 => export 라고 함공개된 모듈 자산은 다른 모듈에서 재사용할 수 있음모듈 사용자 : 공개된 모듈의 자산을 사용하는 모듈모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용 가능함 => import 라고 함모듈을 사용하면 코드의 단위를 명..

에러 처리의 필요성발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료됨try - catch 문을 사용해 발생한 에러를 적절하게 대응하면 프로그램은 강제 종료되지 않고 계속해서 코드를 실행시킬 수 있음예외적인 상황에 적절하게 대처하지 않으면 에러로 이어질 가능성이 큼에러나 예외적인 상황은 너무나 다양하기 때문에 아무런 조치 없이 프로그램이 강제 종료된다면 원인을 파악하여 대응하기 어려움  try - catch - finally 문try { // 실행할 코드 (에러가 발생할 가능성이 있는 코드)} catch (err) { // try 코드 블록에서 에러가 발생하면 이 블록의 코드가 실행됨 // err 에는 try 코드 블록에서 발생한 Error 객체가 전달됨} finally { // 에러 발생과..

제너레이터코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수특징제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있음제너레이터 함수는 함수 호출자와 함수 상태를 양뱡향으로 주고받을 수 있음제너레이터 함수를 호출하면 제너레이터 객체를 반환함 => 제너레이터 함수를 호출하면 함수 코드를 실행하는 것이 아니라 이터러블 이면서 동시에 이터레이터인 제너레이터 객체를 반환함  제너레이터 함수의 정의function* 키워드로 선언하나 이상의 yield 표현식을 포함화살표 함수로 정의 불가, new 연산자와 함께 생성자 함수로 호출 불가// 제너레이터 함수 선언문fuction* genDecFunc() { yield 1;}// 제너레이터 함수 표현식const getExpFunc..

REST (REpresentational State Transfer)HTTP의 장점을 최대한 활용할 수 있는 아키텍처HTTP 프로토콜을 의도에 맞게 디자인하도록 유도함REST의 기본 원칙을 성실히 지킨 서비스 디자인을 "RESTful" 이라고 표현함즉, REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처REST API는 REST를 기반으로 서비스 API를 구현한 것 REST API의 구성자원, 행위, 표현의 3가지 요소로 구성됨자체 표현 구조로 구성되어 REST API 만으로 HTTP 요청의 내용을 이해할 수 있음구성 요소내용표현 방법자원자원URI(엔드포인트)행위자원에 대한 행위HTTP 요청 메서드표현자원에 대한 행위의 구체적 내용페이로드   REST API 설계 ..

호출 스케줄링함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출하도록 호출을 예약하려면 타이머 함수를 사용해야 함자바스크립트는 타이머 생성 함수 setTimeout, setInterval, 타이머 제거 함수 clearTimeout, clearInterval 함수를 제공함타이머 함수는 일정 시간이 경과된 후 콜백 함수가 호출되도록 타이머를 생성함setTimeout 함수는 생성한 타이머가 단 한 번만 동작setInterval 함수는 생성한 타이머가 반복 동작타이머 함수는 비동기 처리 방식으로 동작함  타이머 함수setTimeout두 번째 인수로 전달받은 시간(ms, 1/1000초)으로 단 한 번 동작하는 타이머를 생성타이머가 만료되면 첫 번째 인수로 전달받은 콜백 함수가 호출됨콜백 함수에 전달해..

동기 처리와 비동기 처리함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문함수의 실행 순서는 실행 컨텍스트 스택으로 관리함자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖음 => 싱글 스레드 방식싱글 스레드 방식은 한 번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 태스크를 실행할 경우 블로깅(작업 중단)이 발생함동기 처리현재 실행중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식실행 순서가 보장됨앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹되는 단점비동기 처리현재 실행 중인 태스크가 종료 되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식블로킹이 발생하지 않음태스크의 실행 순..

브라우저의 렌더링 과정브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받음브라우저의 렌더링 엔진은 서버로부터 응답된 HTML, CSS를 파싱해 DOM과 CSSOM을 생성하고 이들을 결합해 렌더 트리를 생성함브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱해 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환해 실행함. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있음. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합됨렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)를 계산하고 브라우저 화면에 HTML 요소를 페인팅함 파싱 : 프로그래밍 언어의 문법에..

디스트럭처링 할당 (destructuring assignment), 구조 분해 할당구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것필요한 값만 추출해 변수에 할당할 때 유용함 배열 구조 분해 할당배열 구조 분해 할당의 대상은 이터러블이어야 하며, 할당 기준은 배열의 인덱스임순서대로 할당됨변수의 개수와 이터러블의 요소의 개수가 반드시 일치할 필요는 없음배열 구조 분해 할당을 위한 변수에 Rest 요소 사용 가능const arr = [1,2,3];const [one, two, three] = arr;const [x, ...y] = arr;console(x,y); // 1 [2,3]   객체 구조 분해 할당각 프로퍼티를 객체로부터 추출해 1개 이상의 변수에 할당..