개발하다 보면 "이건 동기적으로 동작하네?", "비동기 await 붙여줘야 해요" 같은 말을 자주 듣습니다. 그런데 정확히 동기(Synchronous)와 비동기(Asynchronous)가 무엇인지, 왜 중요한지 명확히 알고 계신가요?
이 글에서는 누구나 이해할 수 있게 개념부터 예시 코드, 그리고 실전 활용까지 꼼꼼하게 정리합니다.
동기(Synchronous)란?
개념 정리
동기란, 작업을 순서대로 하나씩 처리하는 방식입니다. 앞의 작업이 끝나야 다음 작업이 시작됩니다.
현실 비유
- 편의점 계산대 한 줄 → 앞사람 계산 끝나야 내 차례
- 설거지 → 끝나고 나서 빨래 가능
코드 예시
console.log('1');
console.log('2');
console.log('3');결과:
1
2
3왜? → 각 줄이 완전히 끝난 다음 다음 줄로 넘어가기 때문입니다.
비동기(Asynchronous)란?
개념 정리
비동기란, 작업을 기다리지 않고 다음 작업을 먼저 수행하는 방식입니다. 이전 작업이 끝날 때까지 멈춰있지 않고, "나중에 다시 돌아오는" 식입니다.
현실 비유
- 음식점에서 주문 → 요리하는 동안 다른 손님 주문도 받음
- 세탁기 돌려놓고 → 설거지 시작
코드 예시
console.log('1');
setTimeout(() => {
console.log('2');
}, 1000);
console.log('3');결과:
1
3
(1초 뒤)
2왜? → setTimeout은 비동기 함수로, 타이머 예약만 하고 곧바로 다음 줄로 넘어갑니다. 시간이 지나면 콜백 함수로 다시 실행됩니다.
왜 비동기가 필요한가?
JavaScript는 단일 스레드(Single Thread) 언어입니다. 즉, 한 번에 하나의 일만 처리할 수 있습니다.
그런데 웹 개발에서는 다음과 같은 일이 많습니다:
- 서버에서 데이터 요청
- 이미지나 비디오 로딩
- 파일 읽기
이걸 동기 방식으로 처리하면?
- UI 멈춤
- 사용자 입력 무시
- 전체 앱이 느려짐
그래서 비동기가 필요합니다.
→ 오래 걸리는 작업은 뒤로 미루고, UI는 멈추지 않게 유지합니다.
비동기를 다루는 방법들
1) 콜백 (Callback)
setTimeout(() => {
console.log('완료!');
}, 1000);가장 기본적인 방식입니다. 하지만 콜백 안에 또 콜백이 들어가면?
→ 콜백 지옥(callback hell) 발생
2) Promise
fetch('https://api.example.com/data')
.then(res => res.json())
.then(data => console.log(data));비동기 작업 결과를 "약속 객체(Promise)"로 반환하고, .then()으로 이어집니다.
3) async / await
async function loadData() {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
console.log(data);
}가장 직관적이고 가독성 좋은 방식입니다.
마치 동기 코드처럼 보이지만 내부는 비동기입니다.
동기/비동기 비교 요약
| 항목 | 동기(Sync) | 비동기(Async) |
| 처리 순서 | 순서대로, 기다림 | 기다리지 않음, 나중에 처리 |
| 코드 흐름 | 간단, 직관적 | 처음엔 헷갈릴 수 있음 |
| 성능 | 오래 걸리는 작업에 취약 | 병렬 처리 가능 |
| UI 반응성 | 멈출 수 있음 | 입력을 계속 받을 수 있음 |
| 예시 | console.log, 계산 | setTimeout, fetch |
실전에서의 적용
| 상황 | 사용 방식 |
| 사용자 입력 처리 | 동기 |
| 서버 API 요청 | 비동기 |
| 파일 다운로드 | 비동기 |
| 버튼 클릭 후 화면 변경 | 동기 |
| 애니메이션 실행 | 비동기 (requestAnimationFrame) |
마무리 정리
- 동기는 한 줄 한 줄 순서대로 처리
- 비동기는 예약해두고, 다음 줄부터 먼저 실행
- 비동기는 UI를 끊김 없이, 빠르게 만들기 위해 필수적
개발자의 역할은
"언제 기다려야 하고, 언제 미뤄야 하는지 판단하는 것"입니다.
마지막 한 줄 요약
동기는 “지금 바로”, 비동기는 “나중에 실행해줘!”