비동기 작업과 Promise

개발을 하다보면, 지금하고 있는 작업이 전부 끝나야만 다음 작업을 시작할 수 있어라는 조건을 줄 때가 한번쯤은! 있을겁니다. 이때 알아야 할 부분이 비동기 작업과 Promise입니다.

AI로 한번 생성해봤는데 그냥 망한 이미지

🧑‍💻 이번 글에서는 프론트엔드 개발자가 비동기 작업을 어떻게 다루고, 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가지 상태

1. Pending (대기 중): 아직 약속이 완료되지 않음
2. Fulfilled (이행됨): 약속한 작업이 성공적으로 완료됨
3. 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에 대해서는 추후 더 자세히 다뤄보도록 하겠습니다.

오늘은 가볍게 비동기 처리에 대해 훑어봤습니다:)