비동기 JavaScript를 이해하는 가장 간단한 방법
I’m happy to translate the article for you, but I’ll need the full text you’d like translated. Could you please paste the content (excluding the source line you already provided) here? Once I have the text, I’ll translate it into Korean while preserving the original formatting, markdown, and any code blocks or URLs.
먼저, 간단한 문제를 이해해 봅시다
당신이 식당에 있다고 상상해 보세요. 15분이 걸리는 음식을 주문했습니다. 당신은 무엇을 할까요?
- 아무것도 하지 않고 15분 동안 주방 근처에 서 있다.
- 테이블에 앉아 친구와 대화하며 음식이 준비될 때까지 기다린다.
대부분의 사람들은 옵션 2를 선택합니다—음식이 준비되는 동안 다른 일을 계속하는 것이죠. 이것이 바로 비동기 JavaScript가 작동하는 방식과 같습니다.
비동기 JavaScript란 무엇인가?
비동기 프로그래밍을 사용하면 JavaScript가 오래 걸리는 작업이 끝나기를 기다리는 동안 다른 작업을 수행할 수 있습니다. 일반적인 비동기 작업에는 다음이 포함됩니다:
- API에서 데이터 가져오기
- 이미지 로드
- 사용자 클릭 대기
- 파일 업로드
- 타이머 및 지연
프로그램을 차단하는 대신, JavaScript는 다른 코드를 계속 실행합니다.
동기와 비동기
동기 코드 (블로킹)
console.log("Start");
function slowTask() {
for (let i = 0; i {
console.log("Task completed");
}, 2000);
console.log("End");출력
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);
});
});
});깊게 중첩된 구조는 코드를 읽기 어렵게 만들며, 이를 콜백 지옥이라고 부릅니다.
현대적인 해결책: 프로미스
프로미스는 비동기 코드를 단순화합니다:
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 데이터 로드
- 채팅 애플리케이션
- 파일 업로드
- 결제 처리
- 알림
- 실시간 업데이트
비동기가 없으면 웹사이트가 느리고 반응이 없게 느껴집니다.
Final Thoughts
비동기 JavaScript는 프로그램이 메인 스레드를 차단하지 않고 장시간 실행되는 작업을 처리할 수 있게 합니다. 하나의 작업이 끝나기를 기다리는 대신, JavaScript는 다른 작업을 계속 수행할 수 있어 현대 웹 애플리케이션을 빠르고, 인터랙티브하며, 사용자 친화적으로 만듭니다. 콜백, 프로미스, 그리고 async/await를 마스터하면 실제 애플리케이션을 구축하는 능력이 크게 향상됩니다.