Javascript 동기와 비동기

1. 동기(Synchronous)와 비동기(Asynchronous)는 프로그래밍에서 작업이 수행되는 방식을 설명하는 용어입니다.

  1) 동기 (Synchronous)
    (1) 기다림: 동기 방식은 한 작업이 완료될 때까지 기다린 후 다음 작업을 실행합니다.
    (2) 순차적: 코드는 순차적으로 실행되며, 이전 작업이 완료되어야만 다음 작업이 시작됩니다.
    (3)예시: 상점에서 결제하는 과정을 생각해보세요. 한 사람이 계산대에서 결제를 하고 있다면, 다음 사람은 그 사람이 결제를 완료할 때까지 기다려야 합니다.

  2) 비동기 (Asynchronous)
    (1) 동시 진행: 비동기 방식은 작업을 시작하고 완료를 기다리지 않고 바로 다음 작업을 실행합니다.
    (2) 병렬적: 여러 작업이 동시에 처리될 수 있습니다.
    (3) 예시: 레스토랑에서 주문하는 과정을 생각해보세요. 주문을 하고 음식이 나오기를 기다리는 동안, 다른 손님들도 주문을 할 수 있으며, 주방에서는 여러 주문을 동시에 처리할 수 있습니다.

2. 비유로 이해하기
  비유로 동기와 비동기를 이해해봅시다. 상상해보세요. 여러분은 카페에 가서 커피를 주문했습니다.

  1) 동기적 방식: 여러분은 커피를 주문하고, 커피가 만들어질 때까지 기다립니다. 커피가 완성되면 받아서 테이블로 가서 앉습니다. 이 시간 동안 다른 일을 하지 않고, 커피가 준비될 때까지 기다리는 것이 동기적 방식입니다.

  2) 비동기적 방식: 여러분은 커피를 주문하고 주문 번호를 받습니다. 그리고 자리에 앉아서 책을 읽거나 핸드폰을 확인하는 등 다른 일을 합니다. 커피가 준비되면 주문 번호를 부르고, 이때 여러분은 커피를 찾아가서 받습니다. 이렇게 주문한 작업과 다른 작업을 동시에 처리하는 것이 비동기적 방식입니다.

3. JavaScript에서의 적용
  JavaScript에서는 주로 I/O 작업, API 호출, 타이머 등에 비동기 처리가 사용됩니다. 이는 브라우저에서 웹 페이지가 사용자와 상호작용하면서도 네트워크 요청을 처리할 수 있도록 하기 위해서입니다. 비동기 처리를 사용하면, 긴 작업이 실행되는 동안에도 UI가 멈추지 않고 반응할 수 있습니다.

  1) 동기 코드 예제

console.log("1. 시작"); // 1번 로그 출력

const sum = 1 + 2; // 덧셈 연산
console.log("2. 덧셈 결과:", sum); // 2번 로그 출력

console.log("3. 종료"); // 3번 로그 출력

  2) 비동기 코드 예제
    아래의 비동기 코드 예제들은 모두 먼저 "1. 시작"을 출력하고, "3. 종료"를 출력한 뒤에, 2초 후에 비동기 작업의 결과를 출력합니다. 이를 통해 비동기 코드가 메인 스레드를 차단하지 않고 동작한다는 것을 이해할 수 있습니다.

    (1) 콜백(callback)

console.log("1. 시작"); // 1번 로그 출력

// 2초 후에 콜백 함수를 실행하는 비동기 코드
setTimeout(() => {
    console.log("2. 2초 후 실행"); // 3번 로그 출력 (2초 후)
}, 2000);

console.log("3. 종료"); // 2번 로그 출력

  (2) 프로미스(Promise)

console.log("1. 시작"); // 1번 로그 출력

// 비동기 작업을 수행하는 프로미스 생성
const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("2. 프로미스 결과"); // 프로미스를 resolve 상태로 변경
    }, 2000);
});

// 프로미스가 resolve 상태가 되면 then() 안의 콜백 함수 실행
promise.then((result) => {
    console.log(result); // 3번 로그 출력 (2초 후)
});

console.log("3. 종료"); // 2번 로그 출력

  (3) async/await

console.log("1. 시작"); // 1번 로그 출력

// 비동기 함수 선언
async function asyncFunction() {
    const promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("2. 프로미스 결과"); // 프로미스를 resolve 상태로 변경
        }, 2000);
    });

    // await로 프로미스가 끝날 때까지 기다림
    const result = await promise;
    console.log(result); // 3번 로그 출력 (2초 후)
}

// 비동기 함수 호출
asyncFunction();

console.log("3. 종료"); // 2번 로그 출력