비동기 JavaScript를 이해하는 가장 간단한 방법
I’m happy to translate the article for you, but I’ll need the text you’d like translated. Could you please paste the content (or the portion you want translated) here? I’ll keep the source line and all formatting exactly as you’ve requested.
First, Let’s Understand a Simple Problem
Imagine you are at a restaurant. You place an order for food that will take 15 minutes to prepare. What would you do?
- Stand near the kitchen for 15 minutes doing nothing.
- Sit at your table, talk with friends, and wait until the food is ready.
Most people choose option 2—continuing to do other things while the food is being prepared. This is exactly how asynchronous JavaScript works.
먼저, 간단한 문제를 이해해 봅시다
당신이 식당에 있다고 상상해 보세요. 15분이 걸리는 음식을 주문했습니다. 당신은 무엇을 할까요?
- 15분 동안 아무것도 하지 않고 주방 근처에 서 있다.
- 테이블에 앉아 친구와 대화하며 음식이 준비될 때까지 기다린다.
대부분의 사람들은 옵션 2를 선택합니다—음식이 준비되는 동안 다른 일을 계속하는 것이죠. 이것이 바로 비동기 JavaScript가 작동하는 방식과 정확히 같습니다.
비동기 JavaScript란?
비동기 프로그래밍은 JavaScript가 오래 걸리는 작업이 끝나기를 기다리는 동안 다른 작업을 수행할 수 있게 합니다. 일반적인 비동기 작업에는 다음이 포함됩니다:
- API에서 데이터 가져오기
- 이미지 로드
- 사용자 클릭 대기
- 파일 업로드
- 타이머 및 지연
프로그램을 차단하는 대신, JavaScript는 다른 코드를 계속 실행합니다.
동기식 vs 비동기식
동기식 코드 (블로킹)
console.log("Start");
function slowTask() {
setTimeout(() => {
console.log("Task completed");
}, 2000);
}
slowTask();
console.log("End");Output
Start
End
Task completedJavaScript는 타이머가 끝날 때까지 기다리지 않고, 나머지 코드를 계속 실행합니다.
Source: …
실제 예시
예시 1: 온라인으로 음식 주문하기
앱(예: Swiggy 또는 Zomato)에서 음식을 주문할 때:
- 주문을 합니다.
- 식당에서 음식을 준비합니다.
- 배달원이 음식을 픽업합니다.
- 배달 상황을 추적합니다.
이 동안에도 계속해서 휴대폰을 사용할 수 있으며—앱이 멈추지 않습니다. 이것이 비동기 동작입니다.
예시 2: API에서 데이터 로드하기
대부분의 웹사이트는 서버에서 데이터를 로드합니다(예: 날씨 앱, 뉴스 사이트, 전자상거래 플랫폼, 소셜 미디어 피드). JavaScript는 데이터를 비동기적으로 가져옵니다:
fetch("https://api.example.com/users")
.then(response => response.json())
.then(data => console.log(data));여기서 JavaScript는:
- 서버에 요청을 보냅니다.
- 다른 코드를 계속 실행합니다.
- 데이터가 도착하면 화면에 표시합니다.
예시 3: 사용자 클릭 이벤트
button.addEventListener("click", function () {
console.log("Button clicked");
});콜백은 사용자가 버튼을 클릭했을 때만 실행됩니다; 그 전까지 JavaScript는 백그라운드에서 대기합니다.
예시 4: 타이머
setTimeout(() => {
console.log("Reminder!");
}, 3000);3초 후에 알림이 표시되며 다른 작업을 차단하지 않습니다.
콜백의 문제점
모던 JavaScript 이전에는 비동기 작업을 중첩된 콜백으로 처리했습니다:
login(function (user) {
getOrders(user, function (orders) {
getPayment(orders, function (payment) {
console.log(payment);
});
});
});깊은 중첩은 코드를 읽기 어렵게 만들며, 이를 콜백 지옥이라고 합니다.
Source:
현대적인 해결책: 프로미스
프로미스는 비동기 코드를 단순화합니다:
fetch("/api/users")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));프로미스는 미래에 사용할 수 있게 될 값을 나타내며 다음 세 가지 상태 중 하나를 가질 수 있습니다:
- Pending
- Fulfilled
- Rejected
더욱 향상된: Async / Await
async/await는 비동기 코드를 동기 코드처럼 보이게 하면서도 논블로킹 동작을 유지합니다:
async function getUsers() {
const response = await fetch("/api/users");
const data = await response.json();
console.log(data);
}
getUsers();비동기 JavaScript가 사용되는 곳
현대의 거의 모든 웹 애플리케이션은 다음과 같은 비동기 프로그래밍에 의존합니다:
- API 데이터 로드
- 채팅 애플리케이션
- 파일 업로드
- 결제 처리
- 알림
- 실시간 업데이트
이것이 없으면 웹사이트가 느리고 반응이 없게 느껴집니다.
최종 생각
비동기 JavaScript는 메인 스레드를 차단하지 않고 장기 실행 작업을 처리할 수 있게 합니다. 하나의 작업이 끝나기를 기다리는 대신, JavaScript는 다른 작업을 계속 수행할 수 있어 현대 웹 애플리케이션을 빠르고, 인터랙티브하며, 사용자 친화적으로 만듭니다. 콜백, 프로미스, 그리고 async/await를 마스터하면 실제 애플리케이션을 구축하는 능력이 크게 향상됩니다.