비동기 (3) 썸네일형 리스트형 자바스크립트 async & await async & await 이란? async와 await은 새로운 개념이 추가된 것이 아니라 프로미스의 syntactic sugar이다. (*syntactic sugar: 기존에 존재하는 것을 감싸서 조금 더 간편한 API를 제공하는 것 ex) 클래스 ) 프로미스를 조금 더 간결하고 간편하고 그러고 동기적으로 실행되는 것처럼 보이게 만들어준다. async & await 기본 문법 함수 앞에 async라는 예약어를 붙인다. 그러고 나서 함수의 내부 로직 중 비동기 처리 코드 앞에 await을 붙인다. (일반적으로 await의 대상이 되는 비동기 처리 코드는 axios 등 프로미스를 반환하는 API 호출 함수이다.) async function 앞에 async를 붙이면 해당 함수는 항상 프로미스를 반환한다. 프.. 프라미스 Promise 란 무엇인가? 프라미스란? 자바스크립트 비동기 처리에 사용되는 객체이다. 비동기 연산이 종료된 이후 결과 값이나 실패 이유를 처리하기 위한 처리기를 연결할 수 있어 마치 동기 메서드처럼 값을 반환할 수 있다. 다만 최종 값을 반환하는 것이 아니고 프라미스를 반환해서 미래의 어떤 시점에 결과를 제공한다. 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 프라미스가 필요한 이유는? 자바스크립트의 비동기 처리의 문제점을 해결하기 위해 사용한다. 프라미스(promise)는 프로듀서와 컨슈머를 연결해 주는 자바스크립트 객체이다. 따라서 정보를 제공하는 프로듀서(producer)와 정보를 소비하는 컨슈머(consumer)를 잘 알아야 한다. 프로듀서(producer) 프라미스는 class이기 때문에 new라는 키워드를 .. 자바스크립트의 비동기처리 & 콜백 함수 동기식 처리 모델(Synchronous processing model) 일(task)을 직렬적, 순차적으로 처리하여 어떤 작업이 수행하는 동안 다음 작업은 대기하게 된다. 비동기식 처리 모델(Asynchronous processing model) 일(task)를 병렬적으로 수행한다. 어떤 작업이 수행하는 동안 다음 작업이 대기하지 않고 수행된다. 즉 자바스크립트에서 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 실행하는 것이다. 자바스크립트의 대부분의 DOM 이벤트 핸들러와 Timer 함수(setTimeout, setInterval), Ajax 요청은 비동기식 처리 모델로 동작한다. ( setTimeout의 콜백함수는 즉시 실행되지 않고 지정 대기 시간만큼 기다리다가 “tick”.. 이전 1 다음