비동기 프로그래밍의 기초
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
JavaScript 개발자, 비동기 프로그래밍에 관심 있는 중급자
핵심 요약
- 비동기 프로그래밍은 JavaScript가 한 번에 하나의 작업만 처리하는 싱글스레드 특성으로 인해 필요함
- Callback 함수는 비동기 작업 완료 후 실행되지만, Callback Hell 문제 발생 가능
- Promise는
pending,fulfilled,rejected상태를 가지며,then/catch로 결과 처리 가능 - Async/Await는 비동기 코드를 동기식처럼 작성할 수 있어 가독성이 높고, 현대 JavaScript에서 권장되는 방식
섹션별 세부 요약
1. Callback Functions
setTimeout을 사용해 비동기 작업을 실행- 실행 순서:
Program started→Program ended→Slow task completed→Callback function executed - 장점: 간단한 구현 가능, 단점: 중첩된 callback 구조로 가독성 저하
- 예제:
```javascript
function slowTask(callback) {
setTimeout(() => {
console.log("Slow task completed.");
callback();
}, 1000);
}
```
2. Promises
Promise객체를 사용해 비동기 작업 결과를 관리- 상태:
pending→fulfilled(성공) 또는rejected(실패) then()으로 성공 처리,catch()로 실패 처리- 예제:
```javascript
const slowTask = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Slow task completed.");
}, 1000);
});
```
3. Async/Await
async키워드로 비동기 함수 선언,await로 Promise 해제- 코드가 동기식처럼 보여 가독성 향상
- 예제:
```javascript
async function fetchData() {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
console.log(data);
}
```
- 주의사항:
await는async함수 내부에서만 사용 가능
결론
- Async/Await는 비동기 작업을 가장 직관적으로 처리할 수 있는 방식으로, 현대 JavaScript 개발에서 필수 기술
- Callback은 간단한 작업에 유용하지만, 복잡한 작업 시 Promise 또는 Async/Await 사용 권장
- 비동기 프로그래밍은 JavaScript 애플리케이션의 성능과 응답성 향상에 핵심적인 역할을 함