기다림의 미학: 비동기 처리와 Promise, async/await

프로그램의 흐름을 멈추지 않는 마법

기본적으로 컴퓨터 프로그램은 위에서부터 아래로 한 줄씩 차례대로 코드를 실행합니다. 앞의 명령이 끝나기 전에는 절대로 다음 명령으로 넘어가지 않습니다. 이러한 처리 방식을 프로그래밍 용어로 동기(Synchronous) 처리라고 부릅니다. 은행 창구에 한 줄로 서서 순서대로 업무를 보는 것과 똑같습니다.

멈추지 않는 화면의 비밀, 비동기 (Asynchronous)

하지만 네트워크 통신처럼 시간이 오래 걸리는 작업(수십 밀리초에서 수 초까지)을 동기 방식으로 처리하면 큰 문제가 생깁니다. 데이터를 가져오는 3초 동안 사용자는 스크롤도 내리지 못하고 버튼도 누르지 못하는 '렉 걸린' 상태를 겪게 됩니다.

이를 해결하기 위해 자바스크립트는 비동기(Asynchronous)라는 방식을 도입했습니다. 커피숍에서 진동벨을 받는 상황을 떠올려보세요. 주문을 한 뒤 커피가 나올 때까지 계산대 앞에서 멍하니 기다리는 것이 아니라, 진동벨을 받고 자리에 가서 친구와 수다를 떨거나 핸드폰을 봅니다. 그러다 진동벨이 울리면 커피를 가지러 가는 방식입니다.

자바스크립트도 마찬가지입니다. 서버에 데이터를 요청(주문)해 놓고, 데이터가 오기를 가만히 기다리는 대신 다음 코드를 먼저 실행(다른 볼일 보기)해 버립니다. 그러다 데이터가 도착하면 그때 가서 나머지 작업을 마저 처리하는 것입니다. 덕분에 사용자는 데이터를 기다리는 동안에도 화면을 자유롭게 조작할 수 있습니다.

약속의 영수증: Promise

비동기 방식으로 작업을 처리하려면 커피숍의 '진동벨' 역할을 해줄 장치가 필요합니다. 자바스크립트에서는 이 진동벨의 역할을 `Promise`(프로미스)라는 객체가 담당합니다. 이름 그대로 "나중에 꼭 데이터를 줄게!"라고 하는 '약속의 영수증'입니다.

Promise의 3가지 상태 변화

AI가 작성한 코드에서 데이터를 가져오는 함수를 보면, 그 결과값으로 데이터 자체가 아니라 `Promise` 객체를 돌려주는 것을 볼 수 있습니다. 이 영수증(Promise)은 시간이 흐름에 따라 세 가지 상태 중 하나로 변합니다.

1. 대기(Pending): 주문을 막 넣고 진동벨이 울리기를 기다리는 상태입니다. 아직 데이터가 도착하지 않았습니다.
2. 성공(Fulfilled): 데이터가 무사히 도착한 상태입니다. 진동벨이 울렸고 커피를 성공적으로 받았습니다.
3. 실패(Rejected): 서버가 다운되었거나 인터넷이 끊겨 데이터를 받아오지 못한 상태입니다. 커피 머신이 고장 나서 환불을 받아야 하는 상황입니다.

우아하게 기다리는 법: async / await

초기 자바스크립트에서는 이 Promise 영수증을 다루기 위해 `.then()`과 `.catch()`라는 문법을 사용했습니다. 하지만 이 방식은 코드가 길어지면 꼬리에 꼬리를 무는 복잡한 형태가 되어 코드를 읽기 매우 어렵게 만들었습니다. 그래서 등장한 구원자가 바로 현대 프론트엔드 개발의 필수 문법인 `async / await`입니다.

코드를 다시 쉽게 읽히게 만드는 기적

`async`와 `await`는 비동기 코드를 마치 동기 코드처럼 편안하게 위에서 아래로 읽을 수 있게 만들어주는 마법의 키워드입니다. 사용법은 아주 직관적입니다.

• `async`: 이 함수가 비동기 작업을 포함하고 있다고 선언하는 마크입니다. 함수 이름표 앞에 붙여줍니다.
• `await`: 비동기 작업 앞에 붙여서 "이 Promise 영수증이 진짜 데이터로 바뀔 때까지 여기서 잠깐만 기다려!"라고 지시하는 키워드입니다.

// async 키워드로 비동기 함수임을 선언
const fetchUserData = async () => {
  // await: 서버에 데이터를 요청하고, 진짜 응답이 올 때까지 여기서 잠시 대기!
  const response = await fetch('https://api.example.com/user');
  
  // 위 작업이 끝나야 아래 코드가 실행됨
  const data = await response.json(); 
  
  return data;
}