자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 전통적인 콜백 패턴은 콜백 지옥로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러 처리가 곤란해 여러 비동기 처리를 한번에 처리하는데 한계가 있다. ES6에서는 비동기 처리를 위한 새로운 패턴인 프로미스(Promise)를 도입했다. 프로미스는 전통적인 콜백 패턴의 단점을 보완하고 비동기 처리 시점을 명확하게 표현할 수 있다. 비동기 처리를 위한 콜백 패턴의 단점 1. 콜백 지옥 (Callback Hell) 🤔 콜백 지옥이 발생하는 이유? 결과 먼저: 비동기 함수는 비동기 처리 결과를 외부에 반환할 수 없고, 상위 스코프의 변수에 할당할 수 없다. 따라서 비동기 함수의 처리 결과에 대한 후속 처리는 비동기 함수 내부에서 수행해야 한..
Ajax란? 자바스크립트를 사용해 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신해 웹페이지를 동적으로 갱신하는 프로그래밍 방식 이전의 전통적인 웹페이지는 어떤 부분을 변경하고 싶다면 서버로부터 완전한 HTML 파일을 전송받아 웹페이지 전체를 처음부터 다시 렌더링해야 했다. 이는 불필요한 데이터 통신이 발생하고, 클라이언트와 서버와의 통신이 동기 방식으로 동작하므로 다음 처리가 블로킹 된다는 단점이 있다. Ajax 방식을 사용하면 서버로부터 웹페이지의 변경할 필요가 있는 부분만 한정적으로 렌더링하는 방식이 가능해진다. 그리고 클라이언트와 서버와의 비동기 통신이 가능하여 블로킹이 발생하지 않는다. JSON (JavaScript Object Notation) 클라이언트와 ..
동기 처리와 비동기 처리 실행 컨텍스트 평가와 실행 과정 함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(= call stack)에 push되고, 함수 코드가 실행된다. 즉, 함수의 실행이 시작된다. 함수 코드 실행이 종료되면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 pop되어 제거된다. 함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 push 되기 때문이다. 이처럼 함수의 실행 순서는 실행 컨텍스트 스택으로 관리한다. 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 2개 이상의 함수를 동시에 실행할 수 없다. 실행 컨텍스트 스택의 최상위 '실행 중인 ..
호출 스케줄링 타이머 함수를 사용하여 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하는 것 setTimeout, setInterval가 생성한 타이머가 만료되면 콜백 함수가 호출된다. setTimeout 함수가 생성한 타이머는 딱 한번 동작(콜백 함수가 한번 호출)하고, setInterval 함수가 생성한 타이머는 반복 동작(타이머 만료될 때마다 반복 호출)한다. JavaScript에는 타이머 생성할 수 있는 함수 setTimeout, setInterval와 타이머 제거할 수 있는 함수 clearTimeout, clearInterval을 제공한다. 타이머 함수는 브라우저 환경과 Node.js 환경에서 모두 전역 객체의 메서드다. 자바스크립트 엔진은 싱글 스레드로 동작한다. 자바스크립트 엔진은 단..
1. 이벤트 드리븐 프로그래밍(Event Driven Programming) 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식 브라우저는 클릭, 키보드 입력, 마우스 이동 등의 어떤 이벤트가 일어나면 이를 감지하여 해당 타입의 이벤트를 발생시킨다. 특정 타입의 이벤트에 반응해 어떤 작업을 처리해주고 싶다면 다음의 2가지가 필요하다. 1. 이벤트 핸들러: 이벤트가 발생했을 때 호출될 함수 2. 이벤트 핸들러 등록: 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것 2. 이벤트 타입 이벤트 타입은 이벤트의 종류를 나타낸다. 이벤트 타입은 약 200여 가지가 있다. 다음 mdn 문서에서 다양한 이벤트 타입을 확인 가능하다. https://developer.mozilla.org/ko..
클로저 정의 클로저는 자바스크립트 고유의 개념은 아니다. MDN - "함수와 그 함수가 선언된 렉시컬 환경의 조합" 렉시컬 스코프 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정하는 것 함수의 상위 스코프는 함수를 정의한 위치에 의해 정적으로 결정되어 변하지 않으므로 정적 스코프라고도 불린다. const x = 1; function foo() { const x = 10; bar(); } function bar() { console.log(x); } foo(); // 1 bar(); // 1 자바스크립트 엔진은 렉시컬 스코프를 따르므로 foo와 bar 함수의 상위 스코프는 전역이 된다. 클로저란? outer 함수를 호출하면 outer 함수가 실행되어 중첨 함수 inner를 반환하고 outer 함..
요청과 응답 브라우저의 주소창에 http://poiemaweb.com을 입력하면 루트 요청이 poiemaweb.com 서버로 전송된다. 서버는 루트 요청에 대해 암묵적으로 index.html을 응답한다. 브라우저의 렌더링 엔진은 전달받은 index.html을 파싱하는 도중 외부 리소스를 로드하는 태그(link, img, script 등)를 만나면 HTML 문서의 파싱을 일시 중단하고 해당 리소스 파일을 서버에 요청한다. HTML 파싱과 DOM 생성 서버로부터 응답된 HTML 문서는 문자열로 이루어진 순수 텍스트이다. 브라우저에 시각적인 픽셀로 렌더링하기 위해서 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조(객체)로 변환해 메모리에 저장한다. 이때, 브라우저가 이해할 수 있는 트리 형태의 자..
이터러블 이터러블 프로토콜을 준수한 객체 즉, Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체 ✅ 이터러블 프로토콜 (Iterable Protocol) ES6 이전의 순회 가능한 데이터 컬렉션(배열, 문자열, 유사 배열 객체, DOM 컬렉션 등)은 통일된 규약 없이 나름의 구조를 가지고 for 문, for...in문, forEach 메서드 등 다양한 방법으로 순회할 수 있었다. ES6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일해 for..of문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용하도록 일원화했다. Symbol.iterator 메서드를 직접 구현하지 않거나 상속받지 않은 일반 객체는..
