회사에서 제가 맡은 프로그램 목록 중에 고객 맞춤 추천을 위해 ai 를 호출하는 부분을 구현해야하는 막중한 임무를 맡았습니다.
그래서 빨간날임에도 불구하고... 월요일에 있을 미팅 준비를 위해 출근해 가이드 문서를 살펴보던 중에 "이 방식은 비동기(Promise)입니다
~~" 라는 말을 보고 비동기?? 동기랑 비동기랑 차이가 뭔데? 하는 생각에 찾아보기 시작했습니다. (리액트 개발 3개월차...)
일단 결론부터 말을 하자면 다음과 같습니다.
비동기 호출은 "일은 시켜 놓고, 끝날 때까지 기다리지 않고 다음 일을 하는 방식"
반대는 동기호출 "일을 시키고 끝날 때까지 기다렸다가 다음 일을 하는 방식"
이해가 쉽게 비유를 들어보겠습니다!
동기 방식은 카운터에서 커피를 주문하고, 커피가 나올 때까지 그 자리에 서서 아무것도 못 하고 기다리는 거예요. 내 뒤에 선 사람도 같이 기다리게 되겠죠?
비동기 방식은 주문하면 진동벨을 받아요. 자리에 가서 노트북을 켜거나 친구와 얘기하다가, 벨이 울리면 커피를 가지러 가요.
여기서 진동벨이 바로 Promise예요. "지금은 결과가 없지만, 나중에 결과(커피)를 주겠다는 약속"이죠.
코드로 차이를 살펴보겠습니다!!
동기는 위에서 아래로, 한줄이 끝나야 다음줄로 넘어갑니다.
console.log("1. 주문");
console.log("2. 커피 받기");
console.log("3. 마시기");
// 출력: 1 → 2 → 3
비동기 코드는 기다려야 하는 일을 맡겨두고 바로 다음줄로 넘어갑니다.
console.log("1. 주문");
setTimeout(() => console.log("3. 커피 나옴"), 1000);
console.log("2. 자리에 가서 노트북 켜기");
// 출력: 1 → 2 → 3
그러면 왜 비동기가 필요할까요??
JavaScript 는 기본적으로 한 번에 한 가지 일만 처리합니다(싱글 스레드)
만약 서버 요청처럼 몇 초 걸리는 작업을 동기로 처리하면, 그동안 화면이 멈추고 버튼도 안 눌리고 스크롤도 안돼요. 그래서 시간이 오래 걸리는 작업, 예를 들어 네트워크 요청, 파일 읽기, 타이머, 데이터베이스 조회 같은 것들은 비동기로 처리합니다.
위에서 자바스크립트는 한번에 한가지 일만 한다면, 기다리는 동안 다른 일은 누가 할까요? 라는 생각이 드는데,
기다리는 일은 자바 스크립트가 하지 않는다는 점이 포인트입니다
네트워크 요청이나 타이머는 브라우저에게 맡겨두고, 자바스크립트는 바로 다음 코드를 실행하는 것이죠. 결과가 준비되면 그 때 이어서 처리하구요.
예시를 이어가자면, 카페에서 커피를 내리는 건 주문받는 직원이 아니라 바리스타인 것과 같다고 볼 수 있습니다. 직원은 주문을 넘기고 바로 다음 손님을 받다가 커피가 나오면 손님에게 넘겨주기도 하니까요!
정리하자면, 이 코드 동기일까? 비동기일까? 의 판단기준은 간단합니다.
"내 코드 밖의 무언가를 기다려야 하나?" 그렇다면 비동기, 아니라면 동기
그래서 다시 처음으로 돌아가서 가이드 문서의 "Promise 방식입니다." 는 결과를 바로 쓰지 말고, await 나 .then() 으로 받아서 쓰시면 됩니다! 라는 뜻이라는 거!