[Eric's JS] JavaScript에서 동기와 비동기의 이해 ☕️

JavaScript를 배우거나 사용하면서 중요하게 접하게 되는 개념 중 하나는 동기(synchronous)와 비동기(asynchronous)의 차이입니다.

이 글에서는 이 두 개념의 차이를 기본적인 예시부터 실용적인 예시까지 다양한 방법으로 설명해 드리겠습니다.

---

1. 기본 개념

구분	동기(Synchronous)	비동기(Asynchronous)
동작 원리	코드가 순차적으로 실행. 한 작업이 완료될 때까지 다음 작업 대기.	코드는 바로 다음 작업으로 넘어가며, 특정 작업의 완료를 기다리지 않음.
장점	코드의 흐름이 명확하며 예측하기 쉽다.	여러 작업을 동시에 처리 가능하여 효율적.
단점	긴 작업이 진행되는 동안 전체 프로세스가 멈출 위험이 있음.	코드의 흐름이 복잡해질 수 있고, 콜백, 프로미스 등의 메커니즘 이해 필요.

---

2. 간단한 예시

2-1. 동기(Synchronous)

설명:

동기 코드는 순차적으로 실행됩니다. 한 함수가 완료될 때까지 다음 함수는 기다려야 합니다.

코드 예시:

function firstFunction() {
  console.log("1. 첫 번째 함수 실행");
}

function secondFunction() {
  console.log("2. 두 번째 함수 실행");
}

firstFunction();
secondFunction();

비유:

당신이 카페에 가서 아메리카노를 주문했다고 상상해보세요. 이 카페는 한 번에 하나의 주문만 처리할 수 있습니다. 당신의 주문을 받으면 바리스타는 당신의 주문을 완료할 때까지 다른 고객의 주문을 받지 않습니다. 아메리카노가 준비될 때까지 모든 것은 정지 상태입니다.

2-2. 비동기(Asynchronous)

설명:

비동기 코드는 특정 코드의 완료를 기다리지 않고 다음 코드로 넘어갑니다.

코드 예시:

function firstFunction(callback) {
  setTimeout(function() {
    console.log("1. 첫 번째 함수 실행");
    callback();
  }, 1000);
}

function secondFunction() {
  console.log("2. 두 번째 함수 실행");
}

firstFunction(secondFunction);

비유:

이번에는 당신이 다른 카페에 가서 아메리카노를 주문했다고 상상해보세요. 이 카페는 여러 주문을 동시에 처리할 수 있습니다. 당신의 주문을 받은 후, 바리스타는 다른 고객의 주문도 받습니다. 당신의 아메리카노가 만들어지는 동안, 다른 주문들도 진행되고 준비됩니다.

---

3. 실 사용 예: 웹 사이트 데이터 로딩

웹 페이지에서 데이터를 로딩할 때 동기와 비동기 처리 방식의 차이를 확실히 볼 수 있습니다.

3-1. 동기 방식의 데이터 로딩:

웹 페이지에서 서버로부터 데이터를 가져와야 할 때, 동기 방식으로 처리하면 사용자는 데이터가 로드될 때까지 기다려야 합니다. 이 시간 동안 웹 페이지는 어떤 반응도 보이지 않게 됩니다.

코드 예시:

const data = loadDataFromServer();  // 동기적으로 서버에서 데이터 로드
displayData(data);                  // 데이터 표시

이런 방식에서 문제는, 만약 loadDataFromServer 함수가 네트워크 지연 또는 서버 문제로 인해 긴 시간이 걸린다면, 사용자는 웹 페이지가 "멈춘" 것처럼 느낄 수 있습니다.

3-2. 비동기 방식의 데이터 로딩:

반면에, 비동기 방식을 사용하면 웹 페이지는 서버로부터의 응답을 기다리는 동안도 다른 작업들을 계속해서 수행할 수 있습니다. 사용자는 웹 페이지가 반응하는 것을 계속 확인할 수 있고, 데이터가 로드되면 화면에 표시됩니다.

코드 예시:

loadDataFromServerAsync(function(data) {
  displayData(data);
});

또는 최근의 JavaScript에서는 async/await를 사용하여 아래와 같이 작성할 수도 있습니다:

async function displayDataFromServer() {
  const data = await loadDataFromServerAsync();
  displayData(data);
}

displayDataFromServer();

이러한 비동기 방식의 장점은, 사용자에게 웹 페이지가 "멈춘" 것처럼 보이지 않도록 하는 것입니다. 그러나 코드의 복잡성이 약간 높아질 수 있으며, 예외 처리를 적절히 해주어야 합니다.

---

결론

JavaScript에서 동기와 비동기의 개념은 중요합니다. 특히 웹 애플리케이션 개발에서 사용자 경험을 최적화하기 위해 비동기 처리 방식을 효과적으로 사용해야 합니다. 이 글을 통해 동기와 비동기의 차이와 사용법에 대한 기본적인 이해를 얻었기를 바랍니다.