비동기 JavaScript - 콜백에서 Async Await로의 여정

단일 스레드 언어인 JavaScript는 항상 비동기 프로그래밍을 사용하여 코드 실행을 차단하지 않고 시간이 많이 걸리는 작업을 처리해 왔습니다. 수년에 걸쳐 JavaScript의 비동기성을 처리하는 접근 방식은 크게 발전하여 더 읽기 쉽고, 관리하기 쉽고, 추론하기가 더 쉬워졌습니다. 콜백부터 Promise, async/await에 이르기까지 비동기 JavaScript의 역사를 안내해 드리겠습니다.

동기식 JavaScript: 탄생

콜백이 널리 채택되기 전인 JavaScript 초기에는 대부분의 JavaScript 코드가 동기식으로 작성되었습니다. 동기 코드는 각 작업이 차단 방식으로 차례로 실행됨을 의미합니다. 장기 실행 작업이 발생하면 해당 작업이 완료될 때까지 전체 스크립트의 실행이 일시 중지되었습니다.

당신이 기차역 매표소에 매표소 매표소가 한 명뿐이라고 상상해 보세요. 티켓을 요청하면 티켓 판매자가 요청 처리를 시작합니다. 동기식 모델에서는 티켓 판매자가 요청 처리를 마치고 티켓을 건네줄 때까지 카운터에서 기다려야 합니다. 이 시간 동안에는 다른 사람에게 서비스를 제공할 수 없으며 전체 티켓 카운터가 차단됩니다.

다음은 동기식 JavaScript 코드의 예입니다.

console.log("Before operation"); 

// Simulating a long-running operation 
for (let i = 0; i < 1000000000; i++) { 
// Performing some computation 
} 

console.log("After operation");

이 코드에서는 console.log 문이 순서대로 실행되며 장기 실행 작업(for 루프)은 완료될 때까지 스크립트 실행을 차단합니다. "작업 후" 메시지는 루프가 완료된 후에만 기록됩니다.

동기 코드의 문제

동기 코드는 이해하고 추론하기 쉽지만 특히 시간이 많이 걸리는 작업을 처리할 때 몇 가지 문제를 야기합니다.

1. 실행 차단: 장기 실행 작업은 전체 스크립트의 실행을 차단하여 작업이 완료될 때까지 웹페이지나 애플리케이션이 응답하지 않게 만듭니다.
2. 낮은 사용자 환경: 실행을 차단하면 사용자가 애플리케이션과 상호작용하기 전에 작업이 완료될 때까지 기다려야 하므로 사용자 환경이 좋지 않을 수 있습니다.
3. 비효율적인 리소스 활용: 동기 코드는 작업이 완료되기를 기다리는 동안 다른 작업을 수행할 수 없기 때문에 시스템 리소스의 효율적인 활용을 허용하지 않습니다.

동기식 코드의 한계를 극복하고 더 나은 사용자 경험을 제공하기 위해 비동기식 프로그래밍 기술이 도입되었습니다. 비동기 프로그래밍을 사용하면 나머지 코드의 실행을 차단하지 않고 백그라운드에서 장기 실행 작업을 실행할 수 있으며 이것이 바로 콜백이 도입된 방식입니다.

콜백: 초기

콜백은 비동기 작업을 처리하는 주요 방법이었습니다. 콜백은 단순히 비동기 작업이 완료되면 나중에 실행되도록 다른 함수에 인수로 전달되는 함수입니다.

기차표를 구매하고 싶다고 상상해 보세요. 기차역의 티켓 카운터에 가서 특정 목적지에 대한 티켓을 요청합니다. 티켓 판매원은 귀하의 요청을 받아들이고 열차 좌석의 이용 가능 여부를 확인하는 동안 기다려달라고 요청합니다. 연락처를 알려주시고 대기실에서 기다리시면 됩니다. 티켓 판매자가 요청을 처리하고 좌석이 확보되면 귀하의 이름을 불러 티켓을 수령할 준비가 되었음을 알립니다. 이 비유에서 귀하의 연락처 정보는 비동기 작업(좌석 가용성 확인 및 티켓 발행)이 완료될 때 티켓 판매자가 귀하에게 알리는 방법인 콜백입니다.

자바스크립트의 콜백과 비유한 내용은 다음과 같습니다.

• 기차표를 요청하는 것은 콜백을 인수로 사용하는 비동기 함수를 호출하는 것과 같습니다.
• 티켓 판매자에게 연락처 정보를 제공하는 것은 콜백 함수를 비동기 함수에 전달하는 것과 같습니다.
• 티켓 판매자가 좌석 상황을 확인하고 요청을 처리하는 것은 비동기 작업이 실행되는 것과 같습니다.
• 티켓이 준비되었을 때 티켓 판매자가 이름을 부르는 것은 비동기 작업의 결과로 콜백 함수가 호출되는 것과 같습니다.
• 대기 영역에서 기다리는 것은 비동기 작업이 처리되는 동안 나머지 코드 실행이 계속되는 것과 같습니다.

콜백 접근 방식에서는 비동기 작업이 완료되면 호출될 함수(콜백)를 제공합니다. 비동기 함수는 작업을 수행한 다음 결과 또는 오류와 함께 콜백을 호출하여 코드가 비동기 작업의 결과를 처리할 수 있도록 합니다.

다음은 Node.js에서 콜백을 사용하여 API 호출을 수행하는 예입니다.

console.log("Before operation"); 

// Simulating a long-running operation 
for (let i = 0; i < 1000000000; i++) { 
// Performing some computation 
} 

console.log("After operation");

이 예에는 API 호출을 시뮬레이션하는 fetchData 함수가 있습니다. URL 매개변수와 콜백 함수를 인수로 사용합니다. 함수 내에서 setTimeout을 사용하여 콜백 함수를 호출하기 전 1000밀리초(1초)의 지연을 시뮬레이션합니다.

콜백 함수는 오류를 첫 번째 인수(err)로 받아들이고 데이터를 두 번째 인수(data)로 받아들이는 일반적인 규칙을 따릅니다. 이 예에서는 오류를 null로 설정하고 샘플 데이터 객체를 제공하여 성공적인 API 호출을 시뮬레이션합니다.

fetchData 함수를 사용하려면 URL과 콜백 함수를 사용하여 호출합니다. 콜백 함수 내에서 먼저 err 인수를 확인하여 오류가 발생했는지 확인합니다. 오류가 있으면 console.error를 사용하여 콘솔에 기록하고 반환하여 추가 실행을 중지합니다.

오류가 발생하지 않은 경우 console.log를 사용하여 수신된 데이터를 콘솔에 기록합니다.

이 코드를 실행하면 비동기 API 호출이 시뮬레이션됩니다. 1초 지연 후 콜백 함수가 호출되고 결과가 콘솔에 기록됩니다.

{ ID: 1, 이름: 'John Doe' }

이 예에서는 콜백을 사용하여 비동기 API 호출을 처리하는 방법을 보여줍니다. 콜백 함수는 비동기 함수(fetchData)에 인수로 전달되며 비동기 작업이 완료되면 오류 또는 결과 데이터와 함께 호출됩니다.

콜백으로 작업이 완료되었지만 몇 가지 단점이 있었습니다.

1. 콜백 지옥/Pyramid of Doom: 여러 비동기 작업을 중첩하면 코드가 깊게 중첩되고 들여쓰기되어 읽고 유지하기가 어려워졌습니다.
2. 오류 처리: 모든 중첩 수준에서 오류를 처리하는 것은 번거롭고 종종 반복적인 코드로 이어졌습니다.
3. 가독성 부족: 콜백의 비선형 특성으로 인해 코드를 따르고 추론하기가 더 어려워졌습니다.

약속: 한 걸음 더 나아가다

콜백 문제를 해결하기 위해 ES6(ECMAScript 2015)에는 Promise가 도입되었습니다. Promise는 비동기 작업의 최종 완료 또는 실패를 나타내며 작업을 함께 연결할 수 있게 해줍니다.

약속을 기차표라고 생각해보세요. 기차표를 구매할 때, 그 표는 기차에 탑승하여 목적지에 도착할 수 있다는 철도 회사의 약속을 나타냅니다. 티켓에는 출발 시간, 경로, 좌석 번호 등 열차에 대한 정보가 포함되어 있습니다. 티켓이 있으면 기차가 도착할 때까지 기다리고, 탑승 준비가 되면 티켓을 이용해 기차에 탑승할 수 있습니다.

이 비유에서 기차표는 약속입니다. 이는 비동기 작업(열차 여행)의 최종 완료를 나타냅니다. 열차가 준비될 때까지(비동기 작업이 완료될 때까지) 티켓(Promise 객체)을 보유하고 있습니다. 약속이 해결되면(열차 도착) 해당 티켓을 사용하여 기차에 탑승할 수 있습니다(해결된 값에 액세스).

다음은 JavaScript의 Promise와 비유한 내용입니다.

• 기차표를 구매하는 것은 약속을 반환하는 비동기 함수를 호출하는 것과 같습니다.
• 열차 티켓 자체는 비동기 작업의 향후 결과를 나타내는 promise 개체입니다.
• 기차가 도착하기를 기다리는 것은 약속이 해결되거나 거부되기를 기다리는 것과 같습니다.
• 티켓을 가지고 기차에 탑승하는 것은 약속의 해결된 값에 액세스하기 위해 .then()을 사용하는 것과 같습니다.
• 열차가 취소되면(오류 발생) 약속이 거부되는 것과 같으며 .catch()로 처리합니다.

프라미스는 비동기 작업을 처리하는 구조화된 방법을 제공하므로 기차표가 기차 여행을 구성하고 관리하는 데 도움이 되는 것과 마찬가지로 여러 작업을 함께 연결하고 오류를 보다 관리하기 쉬운 방식으로 처리할 수 있습니다.

다음은 Promise를 사용하여 API 호출을 수행하는 예입니다.

console.log("Before operation"); 

// Simulating a long-running operation 
for (let i = 0; i < 1000000000; i++) { 
// Performing some computation 
} 

console.log("After operation");

이 코드에서 fetchData 함수는 Promise를 반환합니다. Promise 생성자는 두 가지 인수인 해결(Resolve)과 거부(Reject)를 받는 함수를 사용합니다. 이 함수는 Promise의 상태를 제어하는 ​​데 사용됩니다.

Promise 생성자 내에서 이전 예와 마찬가지로 setTimeout을 사용하여 API 호출을 시뮬레이션합니다. 하지만 콜백 함수를 호출하는 대신, 해결 및 거부 함수를 사용하여 비동기 결과를 처리합니다.

오류가 발생하면(이 예에서는 오류 변수를 확인하여 시뮬레이션함) 오류와 함께 거부 함수를 호출하여 약속을 거부해야 함을 나타냅니다.

오류가 발생하지 않으면 데이터로 해결 함수를 호출하여 수신된 데이터로 약속을 해결해야 함을 나타냅니다.

fetchData 함수를 사용하기 위해 .then() 및 .catch() 메서드를 함수 호출에 연결합니다. .then() 메소드는 Promise의 해결된 값을 처리하는 데 사용되며, .catch() 메소드는 발생할 수 있는 오류를 처리하는 데 사용됩니다.

Promise가 성공적으로 해결되면 해결된 데이터로 .then() 메서드가 호출되고 console.log를 사용하여 콘솔에 기록됩니다.

오류가 발생하고 Promise가 거부되면 .catch() 메서드가 err 개체와 함께 호출되고 console.error를 사용하여 콘솔에 기록됩니다.

Promise를 사용하면 콜백에 비해 비동기 작업을 처리하는 데 더 구조화되고 읽기 쉬운 방법이 제공됩니다. Promise를 사용하면 .then()을 사용하여 여러 비동기 작업을 함께 연결할 수 있고 .catch()를 사용하여 보다 중앙화된 방식으로 오류를 처리할 수 있습니다.

콜백 시 여러 가지 방법으로 Promise가 개선되었습니다.

1. 체이닝: Promise를 사용하면 .then을 사용하여 여러 비동기 작업을 함께 연결할 수 있어 코드를 더 읽기 쉽고 따라하기 쉽게 만들 수 있습니다.
2. 오류 처리: Promise는 오류를 보다 중앙 집중화되고 간소화된 방식으로 처리하기 위해 .catch 메소드를 제공했습니다.
3. 가독성: 비동기 코드를 동기 코드처럼 보이게 만들어 가독성을 향상시킵니다.

그러나 약속에는 여전히 몇 가지 제한 사항이 있었습니다. 여러 Promise를 연결하면 여전히 코드가 깊게 중첩될 수 있으며 구문이 그만큼 깨끗하지 않습니다.

비동기/대기: 최신 접근 방식

ES8(ECMAScript 2017)에 도입된 Async/await는 Promise를 기반으로 구축되었으며 비동기 코드를 작성하는 보다 동기적인 방법을 제공합니다.

async/await를 사용하면 동기 코드처럼 보이고 동작하는 비동기 코드를 작성할 수 있습니다. 그것은 당신을 위해 매표소까지 가는 개인 비서가 있는 것과 같습니다. 조수가 티켓을 갖고 돌아올 때까지 기다리면, 돌아오면 여행을 계속할 수 있습니다.

다음은 async/await를 사용하여 API 호출을 수행하는 예입니다.

console.log("Before operation"); 

// Simulating a long-running operation 
for (let i = 0; i < 1000000000; i++) { 
// Performing some computation 
} 

console.log("After operation");

이 코드에는 API 엔드포인트를 나타내는 url 매개변수를 사용하는 fetchData라는 비동기 함수가 있습니다. 함수 내에서는 try/catch 블록을 사용하여 API 요청 중에 발생할 수 있는 오류를 처리합니다.

Fetch에서 반환된 Promise가 해결될 때까지 실행을 일시 중지하기 위해 Fetch 함수 앞에 Wait 키워드를 사용합니다. 즉, 함수는 API 요청이 완료될 때까지 기다렸다가 다음 줄로 넘어갑니다.

응답이 수신되면 wait response.json()을 사용하여 응답 본문을 JSON으로 구문 분석합니다. 이 작업도 비동기 작업이므로 파싱이 완료될 때까지 대기를 사용합니다.

API 요청과 JSON 파싱이 성공하면 fetchData 함수에서 데이터가 반환됩니다.

API 요청이나 JSON 구문 분석 중에 오류가 발생하면 catch 블록에 의해 포착됩니다. console.error를 사용하여 오류를 콘솔에 기록하고 throw err을 사용하여 오류를 다시 발생시켜 호출자에게 전파합니다.

fetchData 함수를 사용하기 위해 main이라는 비동기 함수가 있습니다. 메인 내부에서 데이터를 가져오려는 API 엔드포인트의 URL을 지정합니다.

await fetchData(url)를 사용하여 fetchData 함수를 호출하고 데이터가 반환될 때까지 기다립니다. API 요청이 성공하면 수신된 데이터를 콘솔에 기록합니다.

API 요청 중에 오류가 발생하면 main 함수의 catch 블록에 의해 포착됩니다. console.error를 사용하여 콘솔에 오류를 기록합니다.

마지막으로 main 함수를 호출하여 프로그램 실행을 시작합니다.

이 코드를 실행하면 가져오기 기능을 사용하여 지정된 URL에 비동기 API 요청을 보냅니다. 요청이 성공하면 수신된 데이터가 콘솔에 기록됩니다. 오류가 발생하면 함께 포착되어 기록됩니다.

가져오기 기능과 함께 async/await를 사용하면 비동기 API 요청을 처리하는 깔끔하고 읽기 쉬운 방법이 제공됩니다. 이를 통해 동기 코드처럼 보이고 동작하는 비동기 코드를 작성할 수 있으므로 이해하고 유지 관리하기가 더 쉽습니다.

Async/await는 다음과 같은 여러 이점을 제공합니다.

1. 간결한 코드: Async/await를 사용하면 동기 코드처럼 보이고 느껴지는 비동기 코드를 작성할 수 있어 더욱 간결하고 읽기 쉽습니다.
2. 오류 처리: Async/await는 오류 처리를 위해 try/catch 블록을 사용합니다. 이는 프라미스가 있는 .catch에 비해 오류를 처리하는 더 친숙하고 직관적인 방법입니다.
3. 가독성: Async/await를 사용하면 특히 동기 프로그래밍에 익숙한 개발자가 비동기 코드를 더 쉽게 이해하고 추론할 수 있습니다.

결론

결론적으로, 콜백에서 Promise, async/await에 이르기까지 비동기 JavaScript의 진화는 더 읽기 쉽고, 관리하기 쉽고, 유지 관리하기 쉬운 비동기 코드를 향한 여정이었습니다. 각 단계는 이전 단계를 기반으로 하여 한계를 해결하고 개발자 경험을 향상시켰습니다.

현재 async/await는 널리 사용되고 있으며 JavaScript에서 비동기 작업을 처리하는 데 선호되는 방법이 되었습니다. 이를 통해 개발자는 깔끔하고 간결하며 이해하기 쉬운 비동기 코드를 작성할 수 있어 모든 JavaScript 개발자의 도구 상자에 포함된 귀중한 도구가 됩니다.

위 내용은 비동기 JavaScript - 콜백에서 Async Await로의 여정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!