동기(synchronous) 와 비동기(asynchronous) 함수

 

동기 함수 (synchronous) 

동기 함수는 호출된 순서대로 실행되며, 이전 함수가 완료될 때까지 다음 함수가 실행되지 않습니다.

즉, 한 번에 하나의 작업만 수행됩니다.

이는 직관적이고 이해하기 쉬운 방식이지만, 시간이 많이 소요되는 작업이 있을 경우 전체 프로그램의 실행이 지연될 수 있습니다.

 

function syncFunction(): void {
    console.log("Start");
    for (let i = 0; i < 1e9; i++) {} // 시간이 걸리는 작업
    console.log("End");
}

syncFunction();
console.log("After syncFunction");

 

위 코드에서 syncFunction은 시간이 많이 걸리는 작업을 수행하며, 함수가 완료될 때까지 console.log("After syncFunction")가 실행되지 않습니다.

 

 

비동기 함수 (asynchronous) 

비동기 프로그래밍은 코드의 실행을 블로킹(blocking)하지 않고, 동시에 여러 작업을 수행할 수 있게 해줍니다.

TypeScript에서는 async와 await 키워드를 사용하여 비동기 코드를 작성할 수 있습니다.

 

비동기 함수 정의: async

async 키워드는 함수 앞에 사용되어 해당 함수가 비동기 함수임을 나타냅니다.

비동기 함수는 호출 시 Promise를 반환하며, 이 Promise는 await 키워드를 사용하여 실행할 수 있습니다.

 

async function myAsyncFunction(): Promise<void> {
    console.log("Hello");
    await new Promise(resolve => setTimeout(resolve, 1000)); // 비동기 작업
    console.log("World");
}

 

 

위 코드에서 myAsyncFunction은 비동기 함수로, await new Promise(resolve => setTimeout(resolve, 1000))을 통해 1초 동안 대기하는 비동기 작업을 수행합니다.

비동기 작업 기다리기: await

await 키워드는 비동기 함수 내에서 Promise가 해결(resolve)될 때까지 함수의 실행을 일시 정지시킵니다.

이는 비동기 작업을 동기적으로 작성할 수 있게 해주며, 코드의 가독성을 크게 향상시킵니다.

 

 

async function fetchData(): Promise<string> {
    return new Promise(resolve => {
        setTimeout(() => resolve("Data fetched"), 2000); // 2초 후에 데이터 반환
    });
}

async function processData(): Promise<void> {
    console.log("Fetching data...");
    const data = await fetchData(); // fetchData 함수가 완료될 때까지 기다림
    console.log(data);
}

processData();

 

위 예제에서 fetchData 함수는 2초 후에 데이터를 반환하는 Promise를 반환합니다.

processData 함수 내에서 await fetchData()를 사용하여 fetchData 함수가 완료될 때까지 기다립니다.

이는 마치 동기 코드처럼 보이지만, 실제로는 비동기적으로 작동합니다.

에러 처리

비동기 함수 내에서 발생하는 에러는 try...catch 블록을 사용하여 처리할 수 있습니다.

 

async function fetchWithError(): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => reject(new Error("Fetch error")), 1000); // 1초 후에 에러 발생
    });
}

async function processWithErrorHandling(): Promise<void> {
    try {
        const data = await fetchWithError();
        console.log(data);
    } catch (error) {
        console.error("Error occurred:", error);
    }
}

processWithErrorHandling();

 

위 코드에서 fetchWithError 함수는 1초 후에 에러를 발생시키는 Promise를 반환합니다.

processWithErrorHandling 함수는 try...catch 블록을 사용하여 에러를 처리합니다.

---

복잡한 비동기 로직을 단순화하고, 코드의 가독성을 크게 향상시킵니다.