자바스크립트는 기본적으로 단일 스레드로 동작하는 언어이며, 이는 코드의 실행이 한 번에 하나의 작업만 처리된다는 것을 의미한다. 동기적으로 실행되는 코드는 한 번에 하나의 작업만 처리되며, 코드의 실행이 완료되기 전까지 다음 코드로 진행되지 않는다. 이러한 특성은 코드의 실행 흐름이 예측 가능하고, 간단하게 유지되도록 도와준다.
하지만 자바스크립트에서 모든 동작이 동기적으로 작동하게 되면, 특정 동작이 끝날 때까지 화면에 나타나지 않거나 다음 동작을 수행하는데 지장을 주게 된다. 그러므로 자바스크립트가 웹 사이트에 동작할 때, 비동기적으로 동작할 수 있어야한다.
비동기 통신 단점
1. 콜백 지옥 (Callback Hell) : 비동기 코드에서 연속적으로 여러 비동기 작업을 수행해야할 때, 중첩된 콜백함수들이 쌓이면 가독성이 떨어지고 코드가 복잡해질 수 있다. 이를 콜백 지옥이라고 부르며, 코드를 이해하고 유지 보수하는에 어려움을 초래할 수 있다.asyncFunc1(function() {
asyncFunc2(function() {
asyncFunc3(function() {
// ...
});
});
});- 에러 처리의 어려움
: 비동기 코드에서 에러처리는 동기 코드가 어려울 수 있다. 콜백 함수 내에서 에러가 발생하면, 해당 콜백 함수 내부에서 처리해야하며 이로 인해 전체 프로세스에 영향을 줄 수 있다.
asyncFunc(function(err, result) {
if (err) {
console.error('Error:', err);
} else {
// 결과 처리
}
});- 순서 제어의 어려움
: 여러 비동기 작업이 동시에 진행되는 경우, 그들 사이의 상대적인 순서를 제어하기 어려울 수 있다. 이로 인해 예상치 못한 결과가 발생될 수 있다.
asyncFunc1(function() {
// 작업 1 완료 후에 작업 2 시작
});
asyncFunc2(function() {
// 작업 2 완료 후에 작업 3 시작
});Promise
: 자바스크립트에서 비동기적인 작업을 처리하는 객체로, 비동기 작업이 완료되었을 때 또는 실패했을 때의 결과를 나타냅니다. Promise는 콜백 지옥을 피하고 비동기 코드를 보다 간결하고 가독성 있게 작성할 수 있도록 도와준다.Promise는 다음의 세 가지 상태를 가지고 있다.
- Pending (대기 중) : 초기 상태, 비동기 작업이 완료되지 않은 상태
- Fulfilled (이행 됨) : 비동기 작업이 성공적으로 완료된 상태
- Rejected (거부 됨) : 비동기 작업이 실패한 상태
Promise 주로 new Promise(executor) 형태로 생성되며, excutor 함수는 resolve와 reject 두 개의 콜백 함수를 인자로 받는다. resolve는 작업이 성공적으로 완료되었을 때 호출되며, reject는 작업이 실패했을 때 호출된다.
const myPromise = new Promise((resolve, reject) => {
// 비동기 작업 수행
if (작업성공) {
resolve(결과);
} else {
reject(에러);
}
});Promise를 사용할 때 주로 then 및 catch 메서드를 사용하여 처리한다.
- then : Promise가 성공적으로 이행되었을 때 실행하는 콜백함수를 등록한다.
myPromise.then(result => {
console.log('성공:', result);
});- catch : Promise가 거부되었을 때 실행되는 콜백 함수를 등록한다.
myPromise.catch(error => {
console.error('에러:', error);
});Promise는 체이닝(Chaining)을 통해 여러 개의 비동기 작업을 순차적으로 처리할 수 있다.
myPromise.catch(error => {
console.error('에러:', error);
});async와 await는 자바스크립트에서 비동기 코드를 작성하고 다루기 위한 키워드이다. 이들은 주로 Promise와 함께 사용되어 비동기 작업을 더 간결하고 동기적으로 다룰 수 있게 한다.
async
: 함수를 비동기 함수로 만든다. 이 키워드가 앞에 붙으면 함수 내에서 await 키워드를 사용할 수 있게 되며, 함수의 실행이 Promise를 반환하게 된다.async function myAsyncFunction() {
// 비동기 작업 수행
const result = await someAsyncOperation();
console.log(result);
}await
: await 키워드는 async 함수 내에서만 사용 가능하며, Promise가 완료될 때까지 함수의 실행을 일시 중지하고, 해당 Promise의 결과 값을 반환한다. 이를 통해 비동기적인 코드를 동기적으로 작성할 수 있다.async function example() {
const result1 = await someAsyncOperation1();
const result2 = await someAsyncOperation2();
console.log(result1, result2);await를 사용하면 비동기 코드를 연결된 형태로 작성할 수 있어 가독성이 향상되고, 에러 핸들링이 간편해진다.
에러 핸들링 (Error Handling)
: async / await을 사용할 때 에러 핸들링은 try/catch 문으로 수행된다.async function example() {
try {
const result = await someAsyncOperation();
console.log(result);
} catch (error) {
console.error('에러 발생:', error);
}
}Promise.all
: 여러 개의 Promise를 병렬로 처리할 수 있다. await와 함께 사용하면, 여러 비동기 작업을 병렬로 처리하고 모든 작업이 완료될 때까지 기다릴 수 있다. ```JS async function example() { try { const result = await someAsyncOperation(); console.log(result); } catch (error) { console.error('에러 발생:', error); } } ```async / await 는 코드를 더 간결하게 만들어주며, 비동기 코드를 동기적으로 작성하는데 도움을 준다. 주의할 점은 await는 반드시 async 함수 내에서 사용되어야한다.
