비동기 작업과 Promise
개발을 하다보면, 지금하고 있는 작업이 전부 끝나야만 다음 작업을 시작할 수 있어라는 조건을 줄 때가 한번쯤은! 있을겁니다. 이때 알아야 할 부분이 비동기 작업과 Promise입니다.
🧑💻 이번 글에서는 프론트엔드 개발자가 비동기 작업을 어떻게 다루고, Promise가 어떻게 사용되는지 알아보겠습니다.
비동기 작업이란? 🤔
비동기 작업은 '먼저 시작한 작업이 수행되는 도중 중간중간 다른 작업도 동시에 할 수 있.' 라는 개념입니다. 마치 밥을 하면서 설거지하고, 빨래까지 한 번에 처리하는 느낌이라고 할까요? 비동기적인 처리 방식은 웹 브라우저가 동시에 여러 작업을 수행할 수 있도록 합니다.
console.log('밥을 시작합니다');
setTimeout(() => {
console.log('밥이 다 됐습니다!');
}, 3000);
console.log('설거지를 시작합니다');
밥을 시작합니다
설거지를 시작합니다
밥이 다 됐습니다!이 코드에서 setTimeout은 3초 후에 메시지를 출력하겠다고 약속하는 것이죠. 그 사이에 다른 작업인 '설거지'가 먼저 수행됩니다!
Promise란 무엇인가? 🔗
Promise는 이름 그대로 약속입니다. 지금 당장은 실행되지 않지만, 미래에 어떤 일이 일어날지 '약속'하는 객체죠.
"야! 3초 후에 밥이 다 될 거야. 그때 알려줄게!" 같은 느낌이에요.
Promise는 주로 API 호출과 같이 시간이 걸리는 작업을 처리할 때 유용합니다.
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('에러 발생:', error));Promise의 3가지 상태
- Pending (대기 중): 아직 약속이 완료되지 않음
- Fulfilled (이행됨): 약속한 작업이 성공적으로 완료됨
- Rejected (거부됨): 작업이 실패함
근데,, 왜 비동기 처리가 중요해요?
프론트엔드에서 사용자가 버튼 클릭 같은 작업을 할 때 페이지가 멈추면 곤란하겠죠?? 비동기 처리를 통해 사용자는 기다리지 않고 다른 작업을 할 수 있습니다.
예를 들어, 결제 페이지에서 서버가 응답할 때까지 사용자가 다른 행동을 할 수 있게 하려면 비동기 처리가 필수입니다. Promise나 async/await는 이 과정을 더 직관적으로 만들어 줍니다.
async/await (promise 업그레이드 버전)
Promise를 좀 더 깔끔하게 사용할 수 있도록 등장한 것이 async/await입니다. 마치 동기 코드처럼 읽히지만, 여전히 비동기로 작동합니다.
코드 비교: Promise vs. async/await
Promise 사용 예시
fetchData()
.then(data => console.log(data))
.catch(error => console.error(error));async/await 사용 예시
async function getData() {
try {
const data = await fetchData();
console.log(data);
} catch (error) {
console.error(error);
}
}
getData();async와 await에 대해서는 추후 더 자세히 다뤄보도록 하겠습니다.
오늘은 가볍게 비동기 처리에 대해 훑어봤습니다:)