비동기 처리를 위한 콜백 패턴의 단점비동기 함수는 비동기 처리 결과를 외부에 반환할 수 없고, 상위 스코프의 변수에 할당할 수도 없음따라서 비동기 함수의 처리 결과에 대한 후속 처리는 비동기 함수 내부에서 수행해야 함이때 비동기 함수에 콜백 함수를 전달하는 것이 일반적임하지만 후속 처리를 수행하는 비동기 함수가 비동기 처리 결과를 가지고 또다시 비동기 함수를 호출해야 한다면 콜백 함수 호출이 중첩되어 복잡도가 높아지는 현상이 발생 (콜백 지옥)또한 에러 처리가 곤란하다는 문제가 있어 이를 극복하기 위해 ES6에서 프로미스가 도입됨프로미스의 생성const promise = new Promise((resolve, reject) => { // Promise 함수의 콜백 함수 내부에서 비동기 처리 수행 if..

RESTHTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 REST APIREST를 기반으로 서비스 API를 구현한 것 RESTfulREST의 기본 원칙을 성실히 지킨 서비스 디자인REST API의 구성구성 요소내용표현 방법자원자원URI (엔드포인트)행위자원에 대한 행위HTTP 요청 메서드표현자원에 대한 행위의 구체적 내용페이로드REST API 설계 원칙URI 는 리소스를 표현해야 한다.리소스에 대한 행위는 HTTP 요청 메서드로 표현한다.HTTP 요청 메서드종류목적페이로드GETindex/retrieve모든/특정 리소스 취득XPOSTcreate리소스 생성OPUTreplace리소스의 전체 교체OPATCHmodify리소스의 일부 수정ODELETEdelete모든/특정 리소스 삭제X

Ajax란?자바스크립트를 사용해 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고,서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식브라우저에서 제공하는 Web API인 WMLHttpRequest 객체를 기반으로 동작함빠른 퍼포먼스와 부드러운 화면 전환 가능 전통적인 방식의 단점변경할 필요가 없는 부분까지 포함된 완전한 HTML을 서버로부터 매번 전송받기 때문에 불필요한 데이터 통신 발생변경할 필요가 없는 부분까지 다시 렌더링하기 때문에 화면이 깜박이는 현상 발생클라이언트와 서버와의 통신이 동기 방식으로 동작하기 때문에 서버로부터 응답이 있을 때까지 다음 처리는 블로킹됨 Ajax 방식의 장점변경할 부분을 갱신하는 데 필요한 데이터만 서버로부터 전송받기 때문에 불필요한 데이터 ..

동기 처리와 비동기 처리자바스크립트 엔진단 하나의 실행 컨텍스트 스택을 가짐한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작함처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업 중단)이 발생함 동기 처리현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식장점: 실행 순서가 보장됨단점: 앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹됨 비동기 처리현재 실행 중인 태스크가 종료되지 않은 상태여도 다음 태스크를 바로 실행하는 방식장점: 블로킹이 발생하지 않음단점: 실행 순서가 보장되지 않음이벤트 루프와 태스크 큐비동기 처리에서 소스코드의 평가/실행을 제외한 모든 처리는자바스크립트 엔진을 구동하는 환경인 브라우저 또는 Node.js 가 담당함 예)비동기 방식으로..

호출 스케줄링함수 호출을 예약하기 위해 타이머 함수를 사용하는 것자바스크립트 엔진은 싱글 스레드로 동작하기 때문에타이머 함수 setTimeout, setInterval 은 비동기 처리 방식으로 동작함타이머 함수setTimeout / clearTimeout두 번째 인수로 전달받은 시간(ms, 1/1000ch)으로 단 한 번 동작하는 타이머 생성이후 타이머가 만료되면 첫 번째 인수로 전달받은 콜백 함수가 호출됨setTimeout 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id 를 반환함clearTimout 함수의 인수로 해당 타이머 id를 전달하여 타이머 취소 가능 (호출 스케줄링 취소) const timeoutId = setTimeout(func|code[, delay, param1, param..

이벤트 드리븐 프로그래밍이벤트 핸들러이벤트가 발생했을 때 호출될 함수 이벤트 핸들러 등록이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것 이벤트 드리븐 프로그래밍이벤트와 그에 대응하는 함수(이벤트 핸들러)를 통해 사용자와 애플리케이션은 상호작용을 할 수 있음프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식이벤트 타입마우스 이벤트이벤트 타입이벤트 발생 시점click마우스 버튼을 클릭했을 때dbclick마우스 버튼을 더블 클릭했을 때mousedown마우스 버튼을 눌렀을 때mouseup누르고 있던 마우스 버튼을 놓았을 때mousemove마우스 커서를 움직였을 때mouseenter마우스 커서를 HTML 요소 안으로 이동했을 때 (버블링 X)mouseover마우스 커서를 HTML 요소..