JavaScript - 비동기적으로 실행되는 것을 동기적으로 코딩하는 방법

비동기적으로 실행되는 것을 동기적으로 코딩하는 방법이 있나요?

동기와 비동기

동기(Synshronous)

모든 일을 순서대로 하나씩 처리하는 것
순서대로 처리한다 == 이전 작업이 끝나면 다음 작업을 시작한다

요청과 응답을 동기식으로 처리한다면?

요청을 보내고 응답이 올 때까지 기다렸다가 다음 로직을 처리(택배같은 느낌)
순서가 중요한 처리에 대해서는 동기식으로 진행해야 한다

비동기(Asynchronous)

작업을 시작한 후 결과를 기다리지 않고 다음 작업을 처리하는 것(병렬적 수행)
시간이 필요한 작업들은 요청을 보낸 뒤 응답이 빨리 오는 작업부터 처리

예시) Gmail에서 메일 전송을 누르면 목록 화면으로 전환되지만 실제로 메일을 보내는 작업은 병렬적으로 뒤에서 처리됨
메일 보내기 성공! 이라는 화면이 떠도 아직 메일을 보내는 중인 것!!

1. Promise의 동기적 사용

비동기 작업을 수행하는 함수가 Promise를 반환할 때, then() 메서드를 사용해 해당 Promise가 완료될 때까지 기다릴 수 있음

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = 'Some data';
            resolve(data);
        }, 1000);
    });
}

fetchData().then(data => {
    console.log('Data received:', data);
});

2. async/await

async 함수 내에서 await 키워드를 사용하여 비동기 작업의 완료를 기다릴 수 있음

async function processData() {
    const data = await fetchData();
    console.log('Data received:', data);
}

processData();

이렇게 작성하면 비동기적인 작업이 동기적인 코드의 흐름으로 통합 된다.
await 키워드는 해당 Promise가 이행될 때까지 현재 함수의 실행을 일시 중지하고, Promise가 이행되면 해당 값을 반환하고 다음 코드를 진행함