본문 바로가기

분류 전체보기

 (894)
[Deep dive] 46장 제너레이터와 async/await 46.1 제너레이터란? 제너레이터(generator) - 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수 1) 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다 - 일반 함수를 호출하면 제어권이 함수에게 넘어가고 함수코드를 일괄실행 - 제너레이터 함수는 함수 호출자가 함수 실행을 일시 중지시키거나 재개시킬 수 있음 - 함수의 제어권을 함수가 독점하는 것이 아니라 함수 호출자에게 양도(yield)할 수 있음 2) 함수 호출자와 함수의 상태를 주고받을 수 있다 - 일반 함수를 호출하면 매개변수를 통해 함수 외부에서 값을 주입받고 함수 코드를 일괄 실행하여 결과값을 함수 외부로 반환 - 제너레이터 함수는 함수 호출자와 양방향으로 함수의 상태를 주고받을 수 있음 - 제너래이터 ..
[Deep dive] 45장 프로미스 45.1 비동기 처리를 위한 콜백 패턴의 단점 45.1.1 콜백 헬 - get 함수는 서버의 응답 결과를 콘솔에 출력 - get 함수는 비동기 함수이다. -> get 함수 내부의 onload 이벤트 핸들러가 비동기로 동작 -> get 함수를 호출하면 GET 요청을 전송하고 onload 이벤트 핸들러를 등록한 다음 undefined를 반환하고 즉시 종료 -> 비동기 함수인 get 함수 내부의 onload이벤트 핸들러는 get 함수가 종료된 이후에 실행 //GET 요청을 위한 비동기 함수 const get = url => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onload = () => { if(xhr.status ..
[Deep dive] 44장 REST API REST(REpresentational State Transfer) - HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐 RESTful - REST의 기본 원칙을 성실히 지킨 서비스 디자인 REST API - REST를 기반으로 서비스 API를 구현한 것 44.1 REST API의 구성 - 자원(resource), 행위(verb), 표현(representations)의 3가지 요소로 구성 구성 요소 내용 표현 방법 자원(resource) 자원 URI 행위 (verb) 자원에 대한 행위 HTTP 요청 메서드 표현(representations) 자원에 대한 행위의 구체적 내용 페이로드 44.2 REST API 설계 원칙 1) URI는 리소스를 표현해야 한다 - 리소스를 식별할 ..
[Deep dive] 43장 Ajax 43.1 Ajax 란? Ajax (Asynchronous JavaScript and XML) - 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 - 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작 - 전통적인 방식의 단점 1) 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함된 완전한 HTML을 서버로 부터 매번 다시 전송받기 때문에 불필요한 데이터 통신 발생 2) 변경할 필요가 없는 부분까지 처음부터 다시 렌더링. 이로 인해 화면 전환이 일어나면 화면이 순간적으로 깜박이는 현상 발생 3) 클라이언트와 서버와의 통신이 동기 방식으로 동작하기 떄문에..
[Deep dive] 42장 비동기 프로그래밍 42.1 동기 처리와 비동기 처리 - 함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성 - 함수 실행 컨텍스트는 실행 컨텍스트 스택에 푸시되고 함수 코드가 실행 - 함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거 - 함수가 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문 - 자바스크립트 엔진은 단 하나의 실행 컨텍스트를 가짐 - 실행 컨텍스트 스택의 최상위 요소인 "실행 중인 실행 컨텍스트"를 제외한 모든 실행 컨텍스트는 모두 실행 대기 중인 태스크(task) - 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드(single thread)방식으로 동작 - 싱글 스레드 방식..
[Deep dive] 41장 타이머 41.1 호출 스케줄링 호출 스케줄링 (scheduling a call) - 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용 - 타이머 함수는 호스트 객체 - 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖기 떄문에 두 가지 이상의 태스크를 동시에 실행 불가 => 자바스크립트 엔진은 싱글 스레드(single thread)로 동작 - 타이머 함수 setTimeout과 setInterval은 비동기(asynchoronous) 처리 방식으로 동작 41.2 타이머 함수 41.2.1 setTimeout / clearTimeout - setTimeout 함수는 두 번째 인수로 전달받은 시간(ms,1/1000초)로 단 한번 동작하는 타이머를 생성..
[Deep dive] 40장 이벤트(2) 40.6 이벤트 전파 이벤트 전파(event propagation) - DOM 트리 상에 존재하는 DOM 요소 노드에서 발생하는 이벤트는 DOM 트리를 통해 전파 - 생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소의 이벤트 타깃(event target)을 중심으로 DOM 트리를 통해 전파 - 이벤트는 이벤트를 발생시킨 이벤트 타깃은 물론 상위 DOM 요소에서도 캐치 가능 - DOM 트리를 통해 전파되는 이벤트는 이벤트 패스에 위치한 모든 DOM 요소에서 캐치 가능 캡처링 단계 (capturing phase) - 이벤트가 상위 요소에서 하위 요소 방향으로 전파 타깃 단계 (target phase) - 이벤트가 이벤트 타깃에 도달 버블링 단계(bubbling phase) - 이벤트가 하위 요소에서 상위 ..
[Deep dive] 40장 이벤트(1) 40.1 이벤트 드리븐 프로그래밍 이벤트 드리븐 프로그래밍 (event-driven programing) - 이벤트와 그에 대응하는 함수(이벤트 핸들러)를 통해 사용자와 애플리케이션은 상호작용(interaction)할 수 있음 이와 같이 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식 - 브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트(event)를 발생(trigger)시킴 - 애플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임 이벤트 핸들러(event handler) - 이벤트가 발생했을 때 브라우저에 호출을 위임한 함수 이벤트 핸들러 등록 - 이벤트가 발생했을 때 브라우..

티스토리툴바