프로미스 (Promise)와 async/await에 대해 설명해보세요.
1. 한마디 정리
프로미스(Promise)는 자바스크립트에서 비동기적인 작업을 처리하는 객체입니다.
프로미스를 사용하면 비동기적으로 처리해야 하는 작업이 완료될 때까지 코드의 실행을 일시 중지하고,
작업이 완료된 후에 결과값을 받아 처리할 수 있습니다.
async/await은 프로미스를 더욱 간결하고 가독성 좋게 사용할 수 있는 ES2017(ES8)부터 추가된 문법입니다. async 함수를 사용하면 코드 블록을 자동으로 프로미스 객체로 감싸서 처리합니다.
await 키워드를 사용하면 프로미스가 이행(fulfilled)될 때까지 코드의 실행을 일시 중지하고, 결과값을 반환합니다.async/await을 사용하면프로미스를 좀 더 직관적으로 사용할 수 있어서 코드의 가독성이 좋아지고,기존의 callback 이나 Promise의 콜백 지옥, then() 지옥의 단점을 해소할 수 있으며,에러 처리도 쉽게 할 수 있습니다.
https://velog.io/@pilyeooong/Promise%EC%99%80-asyncawait-%EC%B0%A8%EC%9D%B4%EC%A0%90
Promise와 async/await 차이점
자바스크립트에서 비동기 로직 처리를 다룰때 자주 사용되는 Promise, async/await에 대해 알아보자
velog.io
프론트엔드 개발자 기술면접 질문 정리(1)
브라우저가 렌더링 되는 과정사용자가 사용자 인터페이스의 주소표시줄에 URI를 입력하여 브라우저 엔진에 전달한다.브라우저 엔진은 먼저 자료 저장소에서 전달된 URI에 대한 정보를 찾고, 있
velog.io
2. 내가 생각한 꼬리질문
1) Promise의 상태는 어떤 것들이 있는지 설명해보세요.
Promise 에는
Pending (대기) Fulfilled (이행) Rejected (실패)의 3가지 상태(state)가 있습니다.
- 비동기 처리가 완료 되지 않았다면 Pending,
- 완료 되었다면 Fulfilled,
- 실패하거나 오류가 발생하였다면 Rejected 상태를 갖습니다.
2) Promise 코드 예시
const promise = new Promise((resolve, reject) => {
// 네트워크 요청을 보냄
fetch('https://example.com/data')
.then(response => {
// 응답이 성공적으로 왔을 때
resolve(response.json());
})
.catch(error => {
// 에러 발생시
reject(error);
});
});
promise.then(data => {
// 성공적으로 데이터를 받아왔을 때
console.log(data);
}).catch(error => {
// 에러가 발생했을 때
console.error(error);
});
3) async/await 를 사용하기 위해 선행되어야 하는 조건은 무엇인가요?
await는 async 함수 안에서만 동작한다는 조건입니다.
4) async/await 코드 예시?
const promise = new Promise((resolve, reject) => {
// 네트워크 요청을 보냄
fetch('https://example.com/data')
.then(response => {
// 응답이 성공적으로 왔을 때
resolve(response.json());
})
.catch(error => {
// 에러 발생시
reject(error);
});
});
promise.then(data => {
// 성공적으로 데이터를 받아왔을 때
console.log(data);
}).catch(error => {
// 에러가 발생했을 때
console.error(error);
});
5) async 함수에서 try-catch 문의 역할?
async 함수에서 try-catch 문은 에러 처리를 담당합니다.
async 함수 내에서 await 키워드를 사용하여 프로미스를 처리할 때,
프로미스가 거부(rejected) 상태가 되면 해당 에러가 try-catch 문에서 catch 블록으로 전달됩니다.