🤿 (5) 자바스크립트는 동기적으로 작동할까? 비동기적으로 작동할까?
🤿 (6) 콜백(Callback) 함수, 프라미스(Promise) 객체, async/await 구문
나중에 정리할 글
new Promise((resolve)=>resolve( ) ) vs Promise.resolve( )
요약
자바스크립트는 기본적으로 스크립트 위에서 아래로 읽어가며 동기적으로 작동하지만,
브라우저에서 주로 사용되는 언어적 특성 상 브라우저 사용자 사용성을 위해
이미지, API 등 모든 것을 로딩 하기 전 우선적으로 로딩된 것들을 보여주기 위해 비동기적으로 사용하는 경우가 많다.
자바스크립트를 비동기적으로 잘 작동하도록 제어(?)하는 방법으로는 콜백(callback), 프로미스(promise), async/await 등이 있다.
Minimum 과제
콜백(callback), 프로미스(promise), async/await 세 가지 패턴의 비동기 코드를 사용하는 방법이 어떻게 다른지 이해하세요.
Promise 정적 메서드 질문
출처: mdn - Promise
resolve
주어진 값으로 이행하는 Promise 객체를 반환합니다. 이때 지정한 값이 then 가능한(then 메서드를 가지는) 값인 경우, Promise.resolve()가 반환하는 프로미스는 then 메서드를 "따라가서" 자신의 최종 상태를 결정합니다. 그 외의 경우, 반환된 프로미스는 주어진 값으로 이행합니다.
- 구문:
Promise.resolve(value)- 파라미터: 이 Promise에 의해 결정되는 인수. Promise 또는 이행할 thenable 일수도 있음
- 반환값: 주어진 값으로 이행된 Promise 또는 값이 promise 객체인 경우, 값으로 전달된 promise
reject
주어진 사유로 거부하는 Promise 객체를 반환합니다.
- 구문:
Promise.reject(reason)- 매개변수: 해당 Promise를 거부한 이유
- 설명: 디버깅을 위해 reason을 Error 생성자의 인스턴스로 만들면 유용
(에러 구문이 없을 경우 스크립트가 죽고 전역에러를 생성하기에 작성하지 않을 경우 디버깅에 어려움을 겪을 수 있음)
어떤 값이 프로미스인지 아닌지 알 수 없는 경우, 보통 일일히 두 경우를 나눠서 처리하는 대신 Promise.resolve()로 값을 감싸서 항상 프로미스가 되도록 만든 후 작업하는 것이 좋습니다.
1. Promise 실행 함수가 가지고 있는 두 개의 파라미터 resolve와 reject는 각각 무엇을 의미하나요?
resolve와 reject는 Promise 객체의 정적 메서드입니다.
Promise 인스턴스 객체를 생성했을 때 비동기 처리를 위한 콜백함수를 인수로 전달받는데, resolve와 reject 함수입니다.
resolve는 프로미스 이행이 성공적으로 이뤄질 경우 호출하며, reject는 프로미스 이행에서 에러가 발생했을 경우 호출합니다.
2. resolve, reject 함수에는 전달인자를 넘길 수 있습니다. 이때 넘기는 전달인자는 어떻게 사용할 수 있나요?
Promise가 정상적으로 처리되었을 경우 resolve가 호출되는데, resolve인 전달인자인 value를 통해 값을 전달할 수 있습니다.
Promise 이행에서 에러가 발생했을 경우 reject가 호출되는데, reject의 전달인자인 reason을 통해 에러가 발생한 이유에 대해서 확인할 수 있습니다.
promise 객체는 state와 result라는 내부 프로퍼티를 갖는데, result는 resolve와 reject가 호출되면 각 전달인자로 변경됩니다.
Promise 인스턴스 메서드 질문
new Promise()를 통해 생성한 Promise 인스턴스에는 어떤 메서드가 존재하나요? 각각은 어떤 용도인가요?
Promise 객체의 인스턴스는 then, catch, finally 메서들를 가지는데 then은 정상적으로 이행 중일 때, catch는 에러가 발생했을 때, finally는 에러 여부와 상관없이 가장 마지막에 실행됩니다.
Promise.prototype.then 메서드는 무엇을 리턴하나요?
then 절은 두 개의 매개변수를 받습니다. 첫번째 매개변수는 onFulfilled로 promise가 수행될 때 호출될 콜백함수이며, value를 인수로 받으며, 두번째 매개변수는 onRejected로 promise가 거부될 때 호출될 콜백함수로 거부 이유인 reason을 인수로 받습니다.
then절의 반환값은 promise 객체이기에 promise 체이닝하여 작성할 수 있도록 합니다.
Promise.prototype.catch 메서드는 무엇을 리턴하나요?
catch 절은 promise가 거부된 후 호출될 콜백함수를 매개변수로 받으며, 해당 콜백함수는 에러의 이유를 매개변수로 받습니다.
then절과 마찬가지로 promise 객체를 반환합니다.
Promise의 세 가지 상태는 각각 무엇이며, 어떤 의미를 가지나요?
대기 중 (Pending): 비동기 작업이 아직 수행되지 않은 상태
이행됨 (Fulfilled): 비동기 작업이 성공적으로 수행된 상태
거부됨 (Rejected): 비동기 작업이 실패한 상태
Async/Await 질문
await 키워드 다음에 등장하는 함수 실행은 어떤 타입을 리턴할 경우에만 의미가 있나요? (?)
Promise 타입을 리턴한 경우에만 의미가 있습니다.
async/await 구문은 Promise 객체를 더욱 쉽게 사용할 수 있도록 도와주는 문법이며, function 앞에 async 를 붙이고, 처리가 완료되길 바라는 함수 앞 await 를 붙이면 async/await 구문이 됩니다.
async 함수는 Promise 객체를 반환하며, await 구문은 Promise 객체가 이행될 때까지 코드의 실행을 일시 중지합니다.
await 키워드를 사용할 경우, 어떤 값이 리턴되나요?
Promise의 결과값, 즉, Promise가 정상적으로 이행된 후의 value 값 또는 Promise가 reject된 후의 에러 이유 값을 리턴합니다.
