비동기 프로그래밍은 비동기식
으로 실행되는 코드를 작성할 수 있게 해주는 프로그래밍 패러다임입니다. 코드가 순차적으로 실행되는 동기 프로그래밍과는 달리, 비동기 프로그래밍은 프로그램의 나머지 부분이 계속 실행되는 동안 백그라운드에서 코드를 실행할 수 있게 해줍니다. 이는 원격 API에서 데이터를 가져오는 것과 같이 완료하는 데 오랜 시간이 걸릴 수 있는 작업에 특히 유용합니다.
비동기 프로그래밍
은 JavaScript에서 반응형이고 효율적인 애플리케이션을 만들기 위해 필수적입니다. JavaScript의 상위 집합인 TypeScript는 비동기 프로그래밍 작업을 더욱 쉽게 만들어 줍니다.
TypeScript에서 비동기 프로그래밍
을 위한 여러 접근 방식이 있으며, 여기에는 프라미스
, async/await
, 및 콜백
을 사용하는 방법이 포함됩니다. 우리는 이러한 접근 방식 각각을 자세히 다룰 것이므로, 사용 사례에 가장 적합한 방법을 선택할 수 있습니다.
목차
비동기 프로그래밍이 중요한 이유는?
비동기 프로그래밍은 반응성이 뛰어나고 효율적인 웹 애플리케이션을 만드는 데 필수적입니다. 이 방법은 프로그램의 나머지 부분이 계속 실행되는 동안 백그라운드에서 작업을 수행할 수 있게 하여 사용자 인터페이스가 입력에 반응하도록 유지합니다. 또한, 비동기 프로그래밍은 여러 작업이 동시에 실행될 수 있도록 하여 전체 성능을 향상시킬 수 있습니다.
비동기 프로그래밍의 실제 사례로는 사용자 카메라 및 마이크에 접근하거나 사용자 입력 이벤트를 처리하는 것이 있습니다. 비동기 함수를 자주 작성하지 않더라도, 애플리케이션이 신뢰할 수 있고 성능이 뛰어나도록 하는 데 올바르게 사용하는 방법을 아는 것이 중요합니다.
타입스크립트가 비동기 프로그래밍을 쉽게 만드는 방법
타입스크립트는 타입 안전성
, 타입 추론
, 타입 검사
, 타입 주석
을 포함하여 비동기 프로그래밍을 단순화하는 여러 기능을 제공합니다.
타입 안전성을 통해 비동기 함수를 처리할 때도 코드가 예상대로 작동하도록 보장할 수 있습니다. 예를 들어, 타입스크립트는 컴파일 타임에 null 및 undefined 값과 관련된 오류를 잡을 수 있어 디버깅에 드는 시간과 노력을 절약해 줍니다.
타입스크립트의 타입 추론 및 검사는 작성해야 하는 보일러플레이트 코드의 양을 줄여주어 코드를 더 간결하고 읽기 쉽게 만듭니다.
또한, 타입스크립트의 타입 주석은 코드에 대한 명확성과 문서를 제공하여 이해하기 복잡할 수 있는 비동기 함수 작업 시 특히 유용합니다.
이제 들어가서 비동기 프로그래밍의 세 가지 주요 기능인 promises, async/await, 그리고 callbacks에 대해 배워보겠습니다.
TypeScript에서 Promises 사용하는 방법
Promises은 TypeScript에서 비동기 작업을 처리하는 강력한 도구입니다. 예를 들어, 외부 API에서 데이터를 가져오거나 주 스레드가 계속 실행되는 동안 백그라운드에서 시간이 많이 소요되는 작업을 수행하는 경우에 promise를 사용할 수 있습니다.
Promise를 사용하려면, Promise
클래스의 새 인스턴스를 만들고 비동기 작업을 수행하는 함수를 전달해야 합니다. 이 함수는 작업이 성공하면 결과와 함께 resolve 메서드를 호출하거나 실패하면 reject 메서드를 호출해야 합니다.
Promise가 생성되면, then
메서드를 사용하여 해당 Promise에 콜백을 첨부할 수 있습니다. 이러한 콜백은 Promise가 이행될 때 트리거되며, 해결된 값이 매개변수로 전달됩니다. Promise가 거부되면 거절 이유와 함께 호출될 catch 메서드를 사용하여 오류 처리기를 첨부할 수 있습니다.
Promise를 사용하면 전통적인 콜백 기반 방법보다 여러 이점이 있습니다. 예를 들어, Promises를 사용하면 중첩된 콜백으로 인해 코드가 어렵고 유지하기 어려운 “콜백 지옥” 문제를 방지할 수 있습니다.
또한 Promises를 사용하면 비동기 코드에서 오류 처리가 더 쉬워지며, catch 메서드를 사용하여 Promise 체인의 어디서든 발생하는 오류를 관리할 수 있습니다.
마지막으로 Promises를 사용하면 구현과 관계없이 비동기 작업을 처리하는 일관되고 조합 가능한 방법을 제공하여 코드를 단순화할 수 있습니다.
약속 생성하는 방법
약속 문법:
const myPromise = new Promise((resolve, reject) => {
// 비동기 작업 수행
// 작업이 성공하면 결과와 함께 resolve 호출
// 작업이 실패하면 오류 객체와 함께 reject 호출
});
myPromise
.then((result) => {
// 성공적인 결과 처리
})
.catch((error) => {
// 오류 처리
});
// 약속을 생성하는 방법에 대한 예제 1
function myAsyncFunction(): Promise<string> {
return new Promise<string>((resolve, reject) => {
// 비동기 작업 수행
setTimeout(() => {
// 성공적인 작업은 약속을 해결합니다. TypeScript에서 비동기 프로그래밍 마스터하기에 대한 최신 블로그 게시물을 확인하세요! 약속, Async/Await 및 콜백을 사용하여 효율적이고 확장 가능한 코드를 작성하는 방법을 배워보세요. TypeScript 기술을 다음 단계로 끌어올릴 준비를 하세요!
const success = true;
if (success) {
// 작업이 성공적이었다면 작업 결과로 약속을 해결합니다
resolve(
`The result is success and your operation result is ${operationResult}`
);
} else {
const rejectCode: number = 404;
const rejectMessage: string = `The result is failed and your operation result is ${rejectCode}`;
// 작업이 실패했다면 작업 결과로 약속을 거부합니다
reject(new Error(rejectMessage));
}
}, 2000);
});
}
// 약속 사용
myAsyncFunction()
.then((result) => {
console.log(result); // 출력 : 결과는 성공적이며 작업 결과는 4입니다
})
.catch((error) => {
console.error(error); // 출력 : 결과는 실패하며 작업 결과는 404입니다
});
위의 예시에서는 myAsyncFunction()
이라는 함수가 있는데 이 함수는 promise
를 반환합니다. 우리는 Promise
생성자를 사용하여 약속을 만들고, 이는 resolve
와 reject
인수를 가진 콜백 함수
를 사용합니다. 비동기 작업이 성공하면 resolve 함수를 호출합니다. 실패하면 reject 함수를 호출합니다.
생성자에 의해 반환된 promise 객체에는 성공 콜백 함수와 실패 콜백 함수를 사용하는 then()
메소드가 있습니다. promise가 성공적으로 해결되면 결과와 함께 성공 콜백 함수가 호출됩니다. promise가 거부되면 실패 콜백 함수가 오류 메시지와 함께 호출됩니다.
promise 객체에는 promise 체인 중에 발생한 오류를 처리하는 데 사용되는 catch()
메소드도 있습니다. catch()
메소드는 콜백 함수를 사용하며, promise 체인에서 오류가 발생하면 호출됩니다.
이제 TypeScript에서 promise를 체인하는 방법으로 넘어가겠습니다.
promise 체인하는 방법
promise를 체인하는 것은 여러 비동기 작업
을 순차적으로 또는 병렬로 수행할 수 있게 합니다. 이것은 여러 비동기 작업을 연속적으로 또는 동시에 수행해야 할 때 유용합니다. 예를 들어 데이터를 비동기적으로 가져와서 비동기적으로 처리해야 할 수 있습니다.
promise를 체인하는 방법에 대한 예시를 살펴보겠습니다:
// Promise 체이닝이 작동하는 예시
// 첫 번째 promise
const promise1 = new Promise((resolve, reject) => {
const functionOne: string = "This is the first promise function";
setTimeout(() => {
resolve(functionOne);
}, 1000);
});
// 두 번째 promise
const promise2 = (data: number) => {
const functionTwo: string = "This is the second second promise function";
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(` ${data} '+' ${functionTwo} `);
}, 1000);
});
};
// 첫 번째와 두 번째 promise를 연결하기
promise1
.then(promise2)
.then((result) => {
console.log(result); // 출력: 이것은 첫 번째 promise 함수 + 이것은 두 번째 promise 함수
})
.catch((error) => {
console.error(error);
});
위 예시에서 두 개의 promise인 promise1
과 promise2
가 있습니다. promise1
은 1초 후에 문자열 “이것은 첫 번째 promise 함수입니다.”로 해결됩니다. promise2
는 숫자를 입력으로 받아 해당 숫자와 문자열 “이것은 두 번째 promise 함수입니다.”를 결합한 문자열을 반환하는 promise입니다.
우리는 then
메서드를 사용하여 두 promise를 연결합니다. 출력 promise1
이 promise2
로 입력으로 전달됩니다. 마지막으로, 다시 then
메서드를 사용하여 promise2
의 출력을 콘솔에 기록합니다. promise1
또는 promise2
중 하나가 거부되면 오류는 catch
메서드에 의해 잡힙니다.
축하합니다! TypeScript에서 promise를 생성하고 연결하는 방법을 배웠습니다. 이제 TypeScript에서 비동기 작업을 수행하기 위해 promise를 사용할 수 있습니다. 이제 TypeScript에서 Async/Await
가 작동하는 방법을 살펴보겠습니다.
TypeScript에서 Async / Await 사용 방법
Async/await는 ES2017에 도입된 문법으로, Promise 작업을 더 쉽게 만들어 줍니다. 이는 비동기 코드를 동기 코드처럼 작성할 수 있게 해줍니다.
TypeScript에서는 async
키워드를 사용하여 비동기 함수를 정의할 수 있습니다. 이는 컴파일러에게 해당 함수가 비동기이며 Promise를 반환할 것임을 알립니다.
이제 TypeScript에서 async/await를 사용하는 방법을 살펴보겠습니다.
Async / Await 문법:
// TypeScript의 Async / Await 문법
async function functionName(): Promise<ReturnType> {
try {
const result = await promise;
// promise가 해결된 후 실행할 코드
return result;
} catch (error) {
// promise가 거부된 경우 실행할 코드
throw error;
}
}
위의 예에서 functionName
은 ReturnType
의 Promise를 반환하는 비동기 함수입니다. await
키워드는 Promise가 해결될 때까지 기다린 후 다음 코드 줄로 이동할 때 사용됩니다.
try/catch
블록은 비동기 함수 내부의 코드 실행 중 발생하는 오류를 처리하는 데 사용됩니다. 오류가 발생하면 catch 블록에서 잡혀 적절히 처리할 수 있습니다.
비동기 / 대기와 함께 화살표 함수 사용하기
TypeScript에서 async/await 문법과 함께 화살표 함수를 사용할 수도 있습니다:
const functionName = async (): Promise<ReturnType> => {
try {
const result = await promise;
// promise가 해결된 후 실행할 코드
return result;
} catch (error) {
// promise가 거부된 경우 실행할 코드
throw error;
}
};
위의 예에서 functionName
은 ReturnType
의 Promise를 반환하는 화살표 함수로 정의됩니다. async 키워드는 비동기 함수임을 나타내며, await 키워드는 다음 코드 줄로 넘어가기 전에 promise가 해결될 때까지 기다리는 데 사용됩니다.
API 호출과 함께 Async / Await
이제 문법을 넘어서 async/await를 사용하여 API에서 일부 데이터를 가져와 보겠습니다.
interface User {
id: number;
name: string;
email: string;
}
const fetchApi = async (): Promise<void> => {
try {
const response = await fetch("https://jsonplaceholder.typicode.com/users");
if (!response.ok) {
throw new Error(
`Failed to fetch users (HTTP status code: ${response.status})`
);
}
const data: User[] = await response.json();
console.log(data);
} catch (error) {
console.error(error);
throw error;
}
};
fetchApi();
여기서는 JSONPlaceholder API에서 데이터를 가져와 JSON으로 변환한 다음 콘솔에 로깅하는 것입니다. TypeScript에서 async/await를 사용하는 실제 예시입니다.
콘솔에 사용자 정보가 표시되어야 합니다. 이 이미지는 출력을 보여줍니다:
Axios API 호출과 함께 Async/Await
// TypeScript에서 async/await 사용 예시 2
const fetchApi = async (): Promise<void> => {
try {
const response = await axios.get(
"https://jsonplaceholder.typicode.com/users"
);
const data = await response.data;
console.log(data);
} catch (error) {
console.error(error);
}
};
fetchApi();
위의 예시에서는 async/await 및 Axios.get()
메소드를 사용하여 지정된 URL로 HTTP GET 요청을 하는 fetchApi()
함수를 정의합니다. 응답을 기다리기 위해 await를 사용하고, 응답 객체의 data 속성을 사용하여 데이터를 추출합니다. 마지막으로 console.log()
로 데이터를 콘솔에 기록합니다. 발생한 오류는 console.error()
로 콘솔에 기록됩니다.
Axios를 사용하여 이를 수행할 수 있으므로 콘솔에서 동일한 결과를 확인해야 합니다.
이 이미지는 Axios를 사용할 때 콘솔에 출력되는 결과를 보여줍니다:
참고: 위의 코드를 시도하기 전에 Axios를 npm이나 yarn을 사용하여 설치해야 합니다.
npm install axios
yarn add axios
만약 Axios에 익숙하지 않다면, 여기에서 더 알아볼 수 있습니다.
우리는 에러를 처리하기 위해 try
와 catch
블록을 사용한 것을 볼 수 있습니다. try
와 catch
블록은 TypeScript에서 에러를 관리하는 방법입니다. 그러므로 방금 한 것처럼 API 호출을 할 때는 반드시 에러를 처리할 try
와 catch
블록을 사용해야 합니다.
이제 TypeScript에서 try
와 catch
블록을 더 복잡하게 사용하는 예제를 살펴봅시다:
// TypeScript에서 async/await 사용 예제 3
interface Recipe {
id: number;
name: string;
ingredients: string[];
instructions: string[];
prepTimeMinutes: number;
cookTimeMinutes: number;
servings: number;
difficulty: string;
cuisine: string;
caloriesPerServing: number;
tags: string[];
userId: number;
image: string;
rating: number;
reviewCount: number;
mealType: string[];
}
const fetchRecipes = async (): Promise<Recipe[] | string> => {
const api = "https://dummyjson.com/recipes";
try {
const response = await fetch(api);
if (!response.ok) {
throw new Error(`Failed to fetch recipes: ${response.statusText}`);
}
const { recipes } = await response.json();
return recipes; // 레시피 배열 반환
} catch (error) {
console.error("Error fetching recipes:", error);
if (error instanceof Error) {
return error.message;
}
return "An unknown error occurred.";
}
};
// 레시피 가져와서 로깅
fetchRecipes().then((data) => {
if (Array.isArray(data)) {
console.log("Recipes fetched successfully:", data);
} else {
console.error("Error message:", data);
}
});
위의 예제에서는 API에서 기대하는 데이터 구조를 개요화하는 interface Recipe
를 정의합니다. 그런 다음 async/await와 fetch() 메서드를 사용하여 지정된 API 엔드포인트로 HTTP GET 요청을 하는 fetchRecipes()
함수를 생성합니다.
API 요청 중 발생할 수 있는 모든 에러를 처리하기 위해 try/catch
블록을 사용합니다. 요청이 성공하면 응답에서 데이터 속성을 await를 사용하여 추출하고 반환합니다. 에러가 발생하면 에러 메시지를 확인하고 해당하는 경우 문자열로 반환합니다.
마지막으로, fetchRecipes()
함수를 호출하고 .then()
을 사용하여 반환된 데이터를 콘솔에 기록합니다. 이 예제는 async/await
를 try/catch
블록과 함께 사용하여 응답 객체에서 데이터를 추출하고 사용자 정의 오류 메시지를 반환해야 하는 더 고급 시나리오에서 오류를 처리하는 방법을 보여줍니다.
이 이미지는 코드의 출력 결과를 보여줍니다:
Promise.all과 함께하는 Async / Await
Promise.all()
은 입력으로 약속 배열(이터러블)을 받아 단일 약속을 출력으로 반환하는 메서드입니다. 이 Promise는 모든 입력 약속이 해결되거나 입력 이터러블에 약속이 없을 경우 해결됩니다. 입력 약속 중 하나라도 거부되거나 비약속이 오류를 발생시키면 즉시 거부되며, 첫 번째 거부 메시지나 오류로 거부됩니다.
// Promise.all과 함께 async / await를 사용하는 예제
interface User {
id: number;
name: string;
email: string;
profilePicture: string;
}
interface Post {
id: number;
title: string;
body: string;
}
interface Comment {
id: number;
postId: number;
name: string;
email: string;
body: string;
}
const fetchApi = async <T>(url: string): Promise<T> => {
try {
const response = await fetch(url);
if (response.ok) {
const data = await response.json();
return data;
} else {
throw new Error(`Network response was not ok for ${url}`);
}
} catch (error) {
console.error(error);
throw new Error(`Error fetching data from ${url}`);
}
};
const fetchAllApis = async (): Promise<[User[], Post[], Comment[]]> => {
try {
const [users, posts, comments] = await Promise.all([
fetchApi<User[]>("https://jsonplaceholder.typicode.com/users"),
fetchApi<Post[]>("https://jsonplaceholder.typicode.com/posts"),
fetchApi<Comment[]>("https://jsonplaceholder.typicode.com/comments"),
]);
return [users, posts, comments];
} catch (error) {
console.error(error);
throw new Error("Error fetching data from one or more APIs");
}
};
fetchAllApis()
.then(([users, posts, comments]) => {
console.log("Users: ", users);
console.log("Posts: ", posts);
console.log("Comments: ", comments);
})
.catch((error) => console.error(error));
위 코드에서는 Promise.all
을 사용하여 여러 API를 동시에 가져왔습니다. 가져올 API가 여러 개 있다면 Promise.all
을 사용하여 모두 한 번에 가져올 수 있습니다. 보시다시피, map
을 사용하여 API 배열을 반복한 다음 이를 Promise.all
에 전달하여 동시에 가져옵니다.
아래 이미지는 API 호출의 출력을 보여줍니다:
이제 Axios와 함께 Promise.all
을 사용하는 방법을 살펴보겠습니다:
// axios와 Promise.all을 함께 사용하는 예제
const fetchApi = async () => {
try {
const urls = [
"https://jsonplaceholder.typicode.com/users",
"https://jsonplaceholder.typicode.com/posts",
];
const responses = await Promise.all(urls.map((url) => axios.get(url)));
const data = await Promise.all(responses.map((response) => response.data));
console.log(data);
} catch (error) {
console.error(error);
}
};
fetchApi();
위의 예제에서는 Promise.all
을 사용하여 두 개의 서로 다른 URL에서 데이터를 동시에 가져옵니다. 먼저 URL 배열을 생성한 다음, axios.get
호출에서 Promise 배열을 생성하기 위해 map을 사용합니다. 이 배열을 Promise.all
에 전달하면 응답 배열이 반환됩니다. 마지막으로 다시 map을 사용하여 각 응답에서 데이터를 가져오고 이를 콘솔에 로그로 출력합니다.
타입스크립트에서 콜백 사용하기
콜백은 다른 함수에 인수로 전달되는 함수입니다. 콜백 함수는 다른 함수 내부에서 실행됩니다. 콜백은 작업이 완료되기 전에 함수가 실행되지 않도록 보장하지만, 작업이 끝난 직후에 실행됩니다. 콜백은 비동기 JavaScript 코드를 작성하는 데 도움을 주고 문제와 오류를 방지합니다.
// 타입스크립트에서 콜백을 사용하는 예제
const add = (a: number, b: number, callback: (result: number) => void) => {
const result = a + b;
callback(result);
};
add(10, 20, (result) => {
console.log(result);
});
아래 이미지는 콜백 함수를 보여줍니다:
타입스크립트에서 콜백을 사용하는 또 다른 예제를 살펴보겠습니다:
// 타입스크립트에서 콜백 함수를 사용하는 예제
type User = {
name: string;
email: string;
};
const fetchUserData = (
id: number,
callback: (error: Error | null, user: User | null) => void
) => {
const api = `https://jsonplaceholder.typicode.com/users/${id}`;
fetch(api)
.then((response) => {
if (response.ok) {
return response.json();
} else {
throw new Error("Network response was not ok.");
}
})
.then((data) => {
const user: User = {
name: data.name,
email: data.email,
};
callback(null, user);
})
.catch((error) => {
callback(error, null);
});
};
// 콜백 함수와 함께 fetchUserData 사용하기
fetchUserData(1, (error, user) => {
if (error) {
console.error(error);
} else {
console.log(user);
}
});
위의 예제에서는 fetchUserData
라는 함수가 id
와 callback
을 매개변수로 받습니다. 이 callback
은 오류와 사용자라는 두 개의 매개변수를 가진 함수입니다.
fetchUser Data
함수는 id
를 사용하여 JSONPlaceholder API 엔드포인트에서 사용자 데이터를 가져옵니다. 가져오기가 성공하면 User
객체를 생성하고 이를 null 오류와 함께 콜백 함수에 전달합니다. 가져오는 동안 오류가 발생하면 null 사용자와 함께 오류를 콜백 함수에 보냅니다.
콜백과 함께 fetchUser Data
함수를 사용하려면 id
와 콜백 함수를 인수로 제공합니다. 콜백 함수는 오류를 확인하고 오류가 없으면 사용자 데이터를 로그로 남깁니다.
아래 이미지는 API 호출의 출력을 보여줍니다:
콜백을 책임감 있게 사용하는 방법
콜백은 TypeScript의 비동기 프로그래밍의 기본 요소이지만, “콜백 지옥” – 읽기 및 유지 관리가 어려운 피라미드 모양의 깊이 중첩된 코드 – 를 피하기 위해 신중한 관리가 필요합니다. 다음은 콜백을 효과적으로 사용하는 방법입니다:
-
깊은 중첩을 피하세요
-
복잡한 작업을 이름 있는 함수로 나누어 코드 구조를 평탄하게 만드세요
-
복잡한 비동기 워크플로우에는 프로미스나 async/await를 사용하세요 (자세한 내용은 아래 참조)
-
-
오류 처리가 우선
-
언제나 Node.js의
(error, result)
매개변수 규칙을 따르세요 -
중첩된 콜백의 모든 수준에서 오류를 확인하세요
-
function processData(input: string, callback: (err: Error | null, result?: string) => void) {
// ... 항상 오류를 먼저 콜백으로 호출하세요
}
-
타입 주석 사용
-
TypeScript의 타입 시스템을 활용하여 콜백 서명을 강제하세요
-
콜백 매개변수에 대한 명확한 인터페이스 정의
-
type ApiCallback = (error: Error | null, data?: ApiResponse) => void;
-
제어 흐름 라이브러리 고려
복잡한 비동기 작업에 대해async.js
와 같은 유틸리티 사용:-
병렬 실행
-
시리즈 실행
-
오류 처리 파이프라인
-
콜백과 대안 사용 시기
콜백이 좋은 선택이 되는 경우와 그렇지 않은 경우가 있습니다.
콜백은 비동기 작업(단일 완료) 작업을 하거나, 콜백을 기대하는 구형 라이브러리나 API와 인터페이스를 하거나, 이벤트 리스너(클릭 리스너나 웹소켓 이벤트와 같은)를 처리하거나, 간단한 비동기 요구 사항을 가진 경량 유틸리티를 만들 때 유용합니다.
반면 유지 보수 가능한 코드를 작성하고 명확한 비동기 흐름에 집중해야 하는 다른 시나리오에서는 콜백이 문제를 일으킬 수 있으며, 프라미스나 async-await를 선호해야 합니다. 예를 들어, 여러 작업을 연결해야 하거나, 복잡한 오류 전파를 처리하거나, 최신 API(예: Fetch API 또는 FS Promises)와 작업하거나, 병렬 실행을 위해 promise.all()
을 사용할 때 그렇습니다.
콜백에서 프라미스로의 마이그레이션 예제:
// 콜백 버전
function fetchUser(id: number, callback: (err: Error | null, user?: User) => void) {
// ...
}
// 프로미스 버전
async function fetchUserAsync(id: number): Promise<User> {
// ...
}
// async/await 사용법
try {
const user = await fetchUserAsync(1);
} catch (error) {
// 오류 처리
}
비동기 패턴의 진화
패턴 | 장점 | 단점 |
콜백 | 간단하고 보편적 | 중첩된 복잡성 |
프로미스 | 체이닝 가능, 더 나은 오류 흐름 | .then() 체인이 필요함 |
Async/Await | 동기와 유사한 가독성 | 트랜스파일링 필요 |
현대 TypeScript 프로젝트는 종종 이벤트 기반 패턴에 콜백을 사용하고 복잡한 비동기 로직에 프로미스/async-await를 혼합하여 사용합니다. 핵심은 코드의 명확성을 유지하면서 특정 사용 사례에 맞는 올바른 도구를 선택하는 것입니다.
결론
이 기사에서는 TypeScript에서 비동기 코드를 처리하는 다양한 방법에 대해 배웠습니다. 우리는 콜백, 프로미스, async/await에 대해 배우고 TypeScript에서 이를 사용하는 방법을 알아보았습니다. 우리는 또한 이 개념에 대해 배웠습니다.
프로그래밍에 대해 더 배우고 더 나은 소프트웨어 엔지니어가 되고 싶다면 제 YouTube 채널 CliffTech를 구독할 수 있습니다.
내 기사를 읽어 주셔서 감사합니다. 즐거우셨길 바랍니다. 질문이 있으시면 언제든지 저에게 연락해 주세요.
소셜 미디어에서 저와 연결해 주세요: