45. 프로미스
·
Tech Books & Lectures/Javascript_Modern JS Deep dive
자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고비동기 처리 중 발생한 에러의 처리가 곤란하며여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다. ES6에서는 비동기 처리를 위한 또 다른 패턴 프로미스_Promise 를 도입했는데,프로미스는전통적인 콜백 패턴이 가진 단점을 보완하며비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다.45.1 비동기 처리를 위한 콜백 패턴의 단점45.1.1 Callback Hell비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료된다.따라서 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를 외부로 반환하거나상위 스코프의 변수에 할당하면 기대한..
44. REST API
·
Tech Books & Lectures/Javascript_Modern JS Deep dive
REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처고, REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다. 44.1 REST API 의 구성 44.2 REST API 설계 원칙 URI는 리소스를 표현하는 데 집중하고 행위에 대한 정의는 HTTP 요청 메서드를 통해 하는 것 이 RESTful API를 설계하는 중심 규칙이다. -알라딘 eBook (이웅모 지음) 중에서
43. Ajax
·
Tech Books & Lectures/Javascript_Modern JS Deep dive
43.1 Ajax 란? Ajax_Asynchronous JavaScript and XML 란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. Ajax의 등장은 이전의 전통적인 패러다임을 획기적으로 전환했다. 즉, 서버로부터 웹페이지의 변경에 필요한 데이터만 비동기 방식으로 전송받아 웹페이지를 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 변경할 필요가 있는 부분만 한정적으로 렌더링하는 방식이 가능해..
42. 비동기 프로그래밍
·
Tech Books & Lectures/Javascript_Modern JS Deep dive
42.1 동기 처리와 비동기 처리 1. 함수 실행 프로세스 함수 호출 → 함수코드 평가 → 함수 실행 컨텍스트 생성 함수 실행 컨텍스트가 콜 스택에 푸시되어 함수 코드가 실행된다. 함수 코드 실행이 종료되면 콜 스택에서 팝 되어 제거된다. 함수의 실행 순서는 이 콜 스택으로 관리하는데, 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택(콜 스택)을 갖는다. 2. 동기 처리로 인한 블로킹 현상 이처럼 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드(single thread) 방식으로 동작하기 때문에 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업중단) 현상이 발생한다. 3. 비동기 처리 만약 타이머 함수인 setTimeout 을 이용하면 이후의 태스크를 블로킹하지 않고 곧..
41. 타이머
·
Tech Books & Lectures/Javascript_Modern JS Deep dive
41.1 호출 스케줄링 브라우저 환경과 Node.js 환경에서 모두 전역 객체의 메서드로서 타이머 함수를 제공한다. 즉, 타이머 함수는 호스트 객체다. 41.2 타이머 함수 41.2.1 setTimeout / clearTimeout setTimeout 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id를 반환한다. setTimeout 함수가 반환한 타이머 id는 브라우저 환경인 경우 숫자이며 Node.js 환경인 경우 객체다. setTimeout 함수가 반환한 타이머 id를 clearTimeout 함수의 인수로 전달하여 타이머를 취소할 수 있다. 41.2.2 setInterval / clearInterval 41.3 디바운스와 스로틀 디바운스와 스로틀은 짧은 시간 간격으로 연속해서 발생하는 이벤트..
40. 이벤트
·
Tech Books & Lectures/Javascript_Modern JS Deep dive
40.1 이벤트 드리븐 프로그래밍 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러_event handler 라 하고, 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 한다. 이벤트와 그에 대응하는 함수(이벤트 핸들러)를 통해 사용자와 애플리케이션은 상호작용_interaction 을 할 수 있다. 이처럼 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을 이벤트 드리븐 프로그래밍_event-driven programming 이라 한다. 40.2 이벤트 타입 40.3 이벤트 핸들러 등록 40.3.1 이벤트 핸들러 어트리뷰트 방식 이벤트 핸들러 어트리뷰트 값으로 함수 호출문 등의 문_statement 을 할당하면 이벤트 핸들러가 등록된다. 주의할 점은 ..