동기(Synchronous) 비동기(Asynchronous)

1. 동기(Synchronous)

동기적 처리는 작업이 순차적으로 실행되는 방식임. 하나의 작업이 끝날 때까지 다음 작업이 대기하며, 작업이 완료된 후에야 다음 작업이 실행됨. 즉, 코드가 위에서 아래로 순서대로 실행됨.

특징:

• 작업이 직렬적으로 처리됨.
• 하나의 작업이 끝나기 전까지는 다음 작업을 시작할 수 없음.
• 결과를 바로 얻을 수 있음.

function task1() {
  console.log("Task 1 시작");
  console.log("Task 1 끝");
}

function task2() {
  console.log("Task 2 시작");
  console.log("Task 2 끝");
}

task1();
task2();

Task 1 시작
Task 1 끝
Task 2 시작
Task 2 끝

• 여기서는 task1이 끝난 후에야 task2가 실행됨. 모든 작업이 순차적으로 처리됨.

2. 비동기(Asynchronous)

비동기적 처리는 작업이 동시에 실행될 수 있는 방식임. 즉, 다른 작업을 기다리지 않고 바로 다음 작업을 실행하며, 특정 작업이 완료될 때 나중에 그 결과를 처리함. 비동기 처리는 시간이 오래 걸리는 작업(예: 네트워크 요청, 파일 읽기 등)을 처리할 때 매우 유용함.

특징:

• 작업이 병렬적으로 처리될 수 있음.
• 결과를 기다리지 않고, 다음 작업을 먼저 실행함.
• 특정 작업이 완료되면 콜백 함수나 Promise, async/await 등을 통해 결과를 처리함.

function task1() {
  console.log("Task 1 시작");
  setTimeout(() => {
    console.log("Task 1 끝");
  }, 2000); // 2초 후에 실행됨
}

function task2() {
  console.log("Task 2 시작");
  console.log("Task 2 끝");
}

task1();
task2();

 

Task 1 시작
Task 2 시작
Task 2 끝
Task 1 끝 (2초 후)

비동기 처리로 인해 task1의 일부 코드가 실행되기 전에 task2가 먼저 실행됨. setTimeout은 2초 후에 실행되므로, 그 사이에 다른 작업이 먼저 처리됨.

동기와 비동기의 차이점

동기(Synchronous)비동기(Asynchronous)

실행 방식	작업이 순차적으로 실행됨	작업이 병렬적으로 실행될 수 있음
실행 순서	이전 작업이 완료되기 전에는 다음 작업을 실행할 수 없음	이전 작업의 완료 여부와 상관없이 다음 작업을 실행할 수 있음
대기 시간	긴 작업이 있으면 그 작업이 끝날 때까지 대기	긴 작업이 있어도 다른 작업을 먼저 처리할 수 있음
예시	함수 실행, 계산 등 즉시 결과를 얻는 작업	네트워크 요청, 파일 읽기 등 시간이 오래 걸리는 작업

비동기 처리 방식

비동기 작업을 처리하기 위해 자바스크립트에서는 여러 가지 방법을 제공함. 대표적으로 콜백(callback), Promise, async/await이 있음.

(1) 콜백(callback)

• 콜백 함수는 비동기 작업이 완료되었을 때 실행되는 함수임.

function task(callback) {
  setTimeout(() => {
    console.log("Task 완료");
    callback(); // 작업 완료 후 실행
  }, 2000);
}

task(() => {
  console.log("모든 작업 완료");
});

 

(2) Promise

• Promise는 비동기 작업의 결과를 처리하는 객체임. 비동기 작업이 완료되면 resolve나 reject로 결과를 반환함.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Task 완료"), 2000);
});

promise.then((message) => {
  console.log(message); // "Task 완료"
});

 

(3) async/await

• async/await는 비동기 코드를 동기식 코드처럼 작성할 수 있게 해줌. await 키워드는 Promise가 완료될 때까지 기다렸다가 결과를 반환함.

async function task() {
  const result = await new Promise((resolve) =>
    setTimeout(() => resolve("Task 완료"), 2000)
  );
  console.log(result); // "Task 완료"
}

task();

 

 

언제 비동기 처리가 필요한가?

비동기 처리는 시간이 오래 걸리는 작업을 처리할 때 필요함. 예를 들어:

• 네트워크 요청: 서버에서 데이터를 받아오는 동안 다른 작업을 계속 처리할 수 있음.
• 파일 읽기/쓰기: 파일을 읽거나 쓸 때, 그 작업이 완료되기 전에도 다른 코드가 실행될 수 있음.
• 타이머: 일정 시간 후에 어떤 작업을 수행하고 싶을 때(예: setTimeout).

비동기 처리를 통해 사용자 경험을 향상시키고, 프로그램이 중단되지 않고 계속 실행될 수 있도록 도와줌.

 

요약:

• 동기(Synchronous): 작업이 순차적으로 실행되고, 한 작업이 끝나기 전까지는 다른 작업을 시작할 수 없음.
• 비동기(Asynchronous): 여러 작업이 동시에 실행될 수 있으며, 다른 작업이 완료되기를 기다리지 않고 실행이 가능함.
• 자바스크립트에서 비동기 작업을 처리하는 방법으로는 콜백, Promise, async/await가 있음.