JavaScript를 배우다 보면 꼭 마주치게 되는 개념, 바로 비동기 처리(Asynchronous)입니다.
‘콜백지옥’, ‘Promise’, ‘async/await’라는 용어들이 어렵게 느껴질 수 있지만, 비동기의 개념과 흐름만 잘 이해하면 훨씬 쉽게 다가올 수 있습니다.
이번 글에서는 비동기 처리의 기본 개념과 예제를 통해 초보자도 쉽게 따라올 수 있게 설명드립니다.
동기(Synchronous) vs 비동기(Asynchronous)
| 구분 | 설명 | 예시 |
|——|——|——|
| 동기 | 코드가 순차적으로 실행됨 | 계산 후 다음 실행 |
| 비동기 | 먼저 끝나는 작업부터 실행됨 | 네트워크 요청, 타이머 등 |
🧩 비유: 동기는 줄 서기, 비동기는 번호표 받고 불릴 때 처리되는 방식
JavaScript의 대표적인 비동기 작업
setTimeout(),setInterval()- Ajax 요청 (fetch, XMLHttpRequest)
- 파일 읽기, 네트워크 통신
1단계: setTimeout으로 비동기 이해
“`javascript
console.log(“시작”);
setTimeout(() => {
console.log(“3초 후 실행”);
}, 3000);
console.log(“끝”);
“`
실행 순서: 시작 → 끝 → (3초 후) 3초 후 실행
📍
setTimeout()은 코드 흐름을 멈추지 않고 지정된 시간 이후에 콜백을 실행합니다.
2단계: 콜백 함수 (Callback)
“`javascript
function greet(name, callback) {
console.log(“안녕하세요, ” + name);
callback();
}
greet(“지민”, () => {
console.log(“오늘도 좋은 하루 되세요!”);
});
“`
⚠ 콜백 지옥: 중첩된 콜백이 많아질 경우 코드 가독성이 급격히 떨어짐
3단계: Promise로 구조 개선하기
“`javascript
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(“데이터 로딩 완료”);
}, 2000);
});
}
fetchData().then((result) => {
console.log(result);
});
“`
| 개념 | 설명 |
|——|——|
| resolve | 작업 성공 시 실행 |
| reject | 작업 실패 시 실행 |
| .then() | 결과 받기 |
4단계: async/await로 더 깔끔하게
“`javascript
async function loadData() {
const result = await fetchData();
console.log(“비동기 처리 결과:”, result);
}
“`
async함수는 항상Promise를 반환await은 Promise가 끝날 때까지 기다림
✅ async/await는 가독성 개선, 코드 흐름 이해가 쉬워서 실무에서도 널리 사용됩니다.
실전 예제: API 데이터 가져오기
“`javascript
async function getUserData() {
const response = await fetch(‘https://jsonplaceholder.typicode.com/users/1’);
const user = await response.json();
console.log(“이름:”, user.name);
}
“`
🖼️ ALT 태그 예시:
비동기 처리 시 주의사항
- 에러 처리는 반드시 try-catch 사용
“`javascript
try {
await getUserData();
} catch (error) {
console.error(“에러 발생:”, error);
}
“`
- 여러 비동기 병렬 처리는
Promise.all()활용
마무리
JavaScript의 비동기 처리 개념은 처음엔 어렵게 느껴질 수 있지만,
개념 → 콜백 → Promise → async/await 흐름으로 단계적으로 이해하면 금방 익숙해질 수 있습니다.
실무에서도 API 호출, 사용자 입력 처리, 파일 업로드 등 다양한 곳에 활용되므로 반드시 마스터해야 할 필수 개념입니다.
🔎 다음 포스팅 주제 추천
→ 24번: 실무에서 많이 쓰이는 JavaScript 함수 모음
→ 31번: JavaScript 이벤트 핸들링 완벽 가이드
참고자료
- https://developer.mozilla.org/ko/docs/Learn/JavaScript/Asynchronous
- https://javascript.info/async