[JavaScript] 동기와 비동기 개념 정리(+ promise, async/await)

동기와 비동기

동기와 비동기는 프로그램이 작업을 처리하는 방식에 대한 개념이다.

동기

동기 방식은 코드가 작성된 순서대로 실행되며, 하나의 작업이 끝나야 다음 작업이 실행되는 방식을 말한다.

• 작업이 순차적으로 실행됨
• 현재 작업이 끝날 때까지 다음 작업이 대기
• 코드 흐름이 직관적이지만, 실행 시간이 길어질 수 있음

비동기

비동기 방식은 특정 작업이 완료될 때까지 기다리지 않고, 다음 작업을 먼저 실행하는 방식이다.

• 특정 작업이 완료되길 기다리지 않고 다음 코드 실행
• 시간이 오래 걸리는 작업(예: 네트워크 요청, 파일 읽기)을 효율적으로 처리 가능
• 코드 실행 순서가 예상과 다를 수 있음

---

비동기 처리 방법

(1) 콜백 함수

비동기 작업이 끝난 후 실행할 함수를 전달하는 방식이다.

function fetchData(callback) {
  setTimeout(() => {
    console.log("데이터 가져오기 완료");
    callback();
  }, 2000);
}

fetchData(() => {
  console.log("다음 작업 실행");
});

⚠️ 콜백 지옥 문제-!!
콜백을 여러 번 중첩하면 코드가 복잡해져서 유지 보수가 어려워질 수 있다.

(2) Promise

Promise를 사용하면 콜백 지옥을 해결할 수 있다.

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("데이터 가져오기 완료");
      resolve();
    }, 2000);
  });
}

fetchData().then(() => {
  console.log("다음 작업 실행");
});

(3) async/await(가장 직관적인 방법)

async/await을 사용하면 동기 코드 처럼 읽기 쉬운 비동기 코드를 만들 수 있다.

async function fetchData() {
  await new Promise((resolve) => setTimeout(resolve, 2000));
  console.log("데이터 가져오기 완료");
}

async function main() {
  console.log("첫 번째 작업");
  await fetchData();
  console.log("다음 작업 실행");
}

main();

💡 결과

첫 번째 작업
(2초 대기)
데이터 가져오기 완료
다음 작업 실행

await 덕분에 코드가 동기 방식처럼 읽히지만, 실제로는 비동기로 실행된다-!!

---

정리

• 동기: 순서대로 실행되며, 작업이 끝나야 다음 코드가 실행됨
• 비동기: 작업을 기다리지 않고 다음 코드 실행, 시간이 오래 걸리는 작업에 유용함
• 비동기 처리를 위해 콜백 함수, Promise, async/await을 사용할 수 있음
• async/await이 가장 읽기 쉽고 직관적인 방식 !