Synchronous&Asynchronous

1. 동기 프로그래밍(Synchronout Programming)

• 동기 프로그래밍은 코드가 순차적으로 실행되는 구조이기 때문에 앞선 코드가 끝나야 다음 코드가 실행된다.
• 코드 흐름이 명확하여 예측이 쉽고 디버깅하기 편하지만 하나의 작업이 오래 걸릴 경우, 전체 응답성이 떨어지고 프로그램의 활용도나 효율성에 제한이 생긴다.

function syncFunc01() {
  let sum = 0;
  for (let i = 0; i < 9999999999; i++) {
    sum += i;
  }
  return sum;
}

function syncFunc02() {
  let sum = 0;
  for (let i = 0; i < 100; i++) {
    sum += i;
  }
  return sum;
}

function example() {
  console.log('첫 번째 작업 시작');
  let result1 = syncFunc01(); // 시간이 오래 걸리는 작업
  console.log(`첫 번째 작업 완료: ${result1}`);

  console.log('두 번째 작업 시작');
  let result2 = syncFunc02();
  console.log(`두 번째 작업 완료: ${result2}`);
}

example();

 

2. 비동기 프로그래밍(Asynchronous Programming)

• 비동기 프로그래밍은 이전 작업이 끝날 때까지 기다리지 않고 다음 작업을 실행하는 방식이다.
• 즉, 코드가 병렬적으로 실행될 수 있다.
• 비동기 프로그래밍을 하면 응답성이 더 좋아지지만 흐름이 명확하지 않아 디버깅이 어렵거나 가독성이 낮아질 수 있다. 이러한 불편함에도 불구하고, 더 빠른 처리를 위하여 비동기 처리를 많이 이용한다.

function syncFunc01() {
  setTimeout(() => {
    let sum = 0;
    for (let i = 0; i < 9999999999; i++) {
      sum += i;
    }
    console.log(`시간이 오래 걸리는 계산식 결과: ${sum}`);
  }, 10);
}

function syncFunc02() {
  setTimeout(() => {
    let sum = 0;
    for (let i = 0; i < 100; i++) {
      sum += i;
    }
    console.log(`두 번째 작업(첫 번째 작업을 기다리지 않음): ${sum}`);
  }, 0);
}

function example() {
  console.log('첫 번재 작업 시작');
  syncFunc01();

  console.log('두 번째 작업 시작');
  syncFunc02();
}

example();

 

<실행순서>

(1) '첫 번재 작업 시작'
(2) '두 번째 작업 시작'
(3) 두 번째 작업 결과 출력
(4) 첫 번째 계산식 결과 출력

 

3. async/await - 비동기 처리를 동기처럼

async함수와 await 키워드를 사용하면 비동기 로직을 동기 코드처럼 작성할 수 있으며 가독성과 유지보수성이 크게 향상된다.

아래 예제에서 fetchUserData()는 실제 API에서 데이터를 비동기로 가져오며, await는 해당 작업이 끝날때까지 기다리도록 만들고 try- catch로 예외 처리를 할 수 있다.