donghyun.cc

동기와 비동기, 차이가 무엇일까?

소프트웨어 개발 개념JS
동기와 비동기, 차이가 무엇일까?

JS개발을 처음으로 시작하면 가장 먼저 만나는 개념 중 하나가 바로 동기와 동기다.
JS에서 "동기(Synchronous)"와 "비동기(Asynchronous)"는 코드 실행 방식의 차이를 나타내는 개념이다.

동기 (Synchronous)

동기는 작업을 순차적으로 진행하는 것 을 의미한다.
앞선 작업이 완료되기 전까지는 그다음 작업을 시작할 수 없다

1console.log("작업을 시작합니다!!");
2let result = prompt("값을 입력하세요:"); // 동기적 대기 방식
3console.log("입력된 값 : " + result);
4console.log("작업이 끝났습니다!!");

이 JS 코드를 살펴보자면, 작업의 처리가 위에서 아래로 순차적으로 실행된다.

장점

😀 이해하기 쉽다

  • 코드가 순차적으로 실행되어 흐름이 단순하고 예측 가능하다

단점

❌ 비효율적이다

  • 긴 작업이 있을 때, 그 작업을 처리하는 동안 다른 작업을 처리할 수 없어서 동시에 여러 작업을 처리해야 하는 상황에서 비효율적이다

비동기 (Asynchronous)

비동기는 작업을 동시에 처리하는 방식을 의미한다.
전의 작업을 기다릴 필요 없이 다른 작업을 진행할 수 있다.

🤷‍♂️ 실제로는 비동기 처리는 실행할 작업을 예약하고, 그 작업이 완료되기를 기다리지 않고 넘어가서 다음 작업을 진행하게 된다

1console.log("작업을 시작합니다!!");
2
3setTimeout(() => { // 비동기적 대기 방식
4    console.log("비동기 작업이 완료되었습니다.");
5}, 2000);
6
7console.log("작업이 끝났습니다!!");

이 JS 코드를 살펴보면, setTimeout을 사용하여 2초 후에 작업을 비동기적으로 실행할 수 있게 한다.

장점

🚀 효율적이다

  • 기다리는 동안 다른 작업을 미리 처리할 수 있어 시간 낭비를 줄일 수 있다

단점

❓ 복잡하다

  • 여러 작업이 동시에 진행되므로 코드 흐름을 파악하기 어려울 수 있다. JS에서는 "콜백 지옥" 같은 문제가 발생하기도 한다

동기 vs 비동기

집에서 배달을 시켜먹는 시나리오를 가정하자,

동기와 비동기의 차이점

왼쪽 그림에서는 배달 진행이 완료될때까지 아무 작업도 할 수 없다! -> 동기적 상황

오른쪽 그림에서는 배달이 진행되는 중에도, 다른 작업을 계속할 수 있다 -> 비동기적 상황

동기와 비동기를 언제 사용해야 할까?

동기를 사용하는 상황

🚶‍♂️‍➡️ 작업의 순서가 먼저 실행되어야 하는 경우

  • 앞선 작업이 반드시 끝난 후에 다음 작업을 실행해야 하는 경우에는 동기를 사용한다

🚗 작업의 처리 완료 시간이 빠르게 끝나는 경우

  • 단순한 계산이나 로직의 경우 비동기 작업이 필요하지 않다

비동기를 사용하는 상황

☕ 병렬 처리가 필요한 경우

  • 여러 작업을 동시에 처리하거나, 작업 완료까지 다른 작업을 진행햐야 하는 경우에는 비동기를 사용한다

❓ 작업의 처리 완료 시간을 알 수 없거나 느린 경우

  • 파일을 읽거나 네트워크 통신을 하는 경우 처리 완료 시간이 길 수 있기에 비동기를 사용해서 처리한다

동기, 비동기 중 비동기가 더 좋다?

❌❌ 두 방식 중 더 좋은 방식은 없다!

비동기는 효율적이지만 항상 적합한 건 아니고, 동기는 이해하기 쉽지만 성능 문제를 일으킬 수 있다
따라서 상황에 맞게 적절히 사용하는 것이 최선이다!