async와 await

async와 await를 알기 전에 동기, 비동기 개념부터 알아야 한다.

동기( Synchronous )와 비동기 ( Asynchronous )

동기

→ 어떤 작업을 실행할 때, 전에 했던 작업이 끝내기를 기다리는 방식을 의미한다.

비동기

→ 어떤 작업을 실행할 때, 전에 작업이 안료 되지 않았더라도 작업을 실행하는 방식을 의미한다.

 

async와 await

 

JavaScript에서 비동기 프로그래밍을 더 쉽게 작성할 수 있도록 도와주는 키워드이다.

 

async

→ 함수 앞에 붙여서 해당 함수가 비동기 함수임을 나타내는 키워드이다.

await

→ async 함수 내에서만 사용되며, Promise가 처리될 때까지 코드 실행을 일시 중지한다.

 

async function processData() {  
    try {  
        const user = await fetchUser(); // 사용자 데이터 가져오기  
        const posts = await fetchPosts(user.id); // 사용자 게시물 가져오기  
        console.log(posts);  
    } catch (error) {  
        console.error("오류 발생:", error);  
    }  
}

위의 코드의 실행 순서를 알아보자

1. processData 함수가 호출된다.

2. try 블록이 시작되며, 블록 내에서 비동기 작업을 수행한다.

3. fetchUser 함수가 호출된다

※ await 키워드로 인해, fetchUser 함수의 Promise가 해결될 때까지 코드 실행이 일시 중지된다.

4. Promise가 해결되면, 사용자 데이터가 user 변수에 저장된다.

5. 게시물 데이터도 3-4번과 같이 실행된다.

6. posts가 콘솔에 출력이 된다.

7. 오류가 발생 시 catch블록이 실행된다.

 

 

나의 생각

원래 자바스크립트는 싱글스레드 기반 언어여서 하나의 스레드에서 모든 작업을 처리하게 되어있다.

즉, 한 번에 하나의 작업을 처리해야 되기 때문에 불편하다. 시간이 걸리는 작업은 비동기로 처리해야 한다.

그래서 비동기 처리를 위해 async와 await을 사용해 비동기 코드를 간결하고 읽기 쉽게 작성하는 것이다.