Quartz 4

javascript42

7 min read

비동기 프로그래밍

동기 vs 비동기

자바스크립트는 싱글 스레드 언어로 한 번에 하나의 작업만 수행할 수 있다. 즉, 이전 작업이 완료되어야 다음 작업을 수행할 수 있게 된다. 우리가 프로그래밍을 하면서 일반적으로 각 함수와 코드들이 위에서 아래로 차례대로 동작하는 방식이라고 할 수 있다. 이러한 코드 순차 실행을 동기(Synchronous)라고 한다

동기

동기 방식은 간단하고 직관적이지만 작업이 오래 걸리거나 응답이 늦어지면 사용자 경험에 영향을 준다. 예를들어 서버에 데이터를 요청하고 응답을 받아야 하는 작업이 있다면, 응답이 올 때까지 다른 작업을 하지 못하고 대기해야 한다

따라서 자바스크립트로 여러 작업을 동시에 처리하기 위해 비동기(Asynchronous)라는 개념을 도입하여, 특정 작업의 완료를 기다리지 않고 다른 작업을 동시에 수행할 수 있도록 하였다. 자바스크립트를 배우다 보면 setTimeout(), fetch() 함수가 비동기로 작동한다는 소리를 들어본 적 있을 것이다. 비동기는 메인 스레드가 작업을 다른 곳에 인가하여 처리되게 하고, 그 작업이 완료되면 콜백 함수를 받아 실행하는 방식으로, 쉽게 말해 작업을 백그라운드에 요청하여 처리되게 하여 멀티로 작업을 동시에 처리하는 것으로 보면 된다

비동기

비동기 처리의 유용성

예를 들어 웹 애플리케이션에서 데이터베이스 쿼리를 수행하는 작업이 있다고 가정해보자. 이 작업을 만일 동기적으로 수행하면, 데이터베이스에서 응답이 올 때까지 기다려애 한다. 그러면 이 때 웹 애플리케이션은 다른 요청을 처리하지 못하므로, 대규모 트래픽이 발생할 경우 웹 애플리케이션의 성능이 저하될 수 있다.

하지만 비동기 방식으로 데이터베이스 쿼리를 수행하면, 데이터베이스에서 응답이 올 때까지 기다리는 동안에도 다른 요청을 처리할 수 있게 된다. 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있는 것이다. 이렇게 비동기 방식을 사용하면, 대규모 트래픽에서도 안정적으로 동작하는 웹 애플리케이션을 만들 수 있다

대표적으로 웹에서 비동기 처리를 가능하게 하는 Ajax 기술이 있다. 다른 서버에게 데이터를 요청할때 XMLHttpRequest 객체나 혹은 fetch 메서드로 요청을 하게하는데, 서버로부터 응답을 기다리는 동안에도 사용자와의 인터랙션을 유지할 수 있으므로 사용자 경험을 향상시킬 수 있게 된다

// fetch 함수에 URL 전달
fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then(function(response) {
    return response.json(); // 응답을 JSON 형식으로 변환
  })
  .then(function(data) {
    console.log(data); // JSON 데이터를 출력
  })
  .catch(function(error) {
    console.error(error); // 에러를 출력
  });

비동기 병렬 처리 원리

비동기병렬

아까 분명히 자바스크립트는 싱글 스레드 언어라고 했는데 어떻게 작업들을 동시에 처리가 가능한 걸까?

자바스크립트를 실행하는 콜 스택은 싱글 스레드이다 그러나 서버에게 리소스를 요청하거나 파일 입출력 혹은 타이머 대기 작업을 실행하는 Web APIs 들은 멀티 스레드이므로 동시 작업 처리가 가능하다

즉, 브라이저라는 소프트웨어가 멀티 스레드 이기 때문에 메인 자바스크립트 스레드를 차단하지 않고 다른 스레드를 사용하여 Web API의 작업을 처리하여 동시 처리가 가능한 것이다

만일 아래와 같이 3초를 대기하는 setTimeout 비동기 함수와 그외 작업들이 있다고 한다면 이 setTimeout 코드가 Web APIs 들 중 타이머 처리를 담당하는 Timer API에 넘어가서 3000ms 밀리초를 병렬로 처리되면서, 동시에 메인 콜 스택의 Task1, Task2…을 처리하는 것이다

setTimeout(() -> {
    consloe.log('5초 대기 완료')
}, 3000);
 
Task1();
Task2();
Task3();

정리하자면 브라우저는 멀티스레드로 이루어져 있고 비동기 함수는 이러한 동시적 처리 작업 원리 덕분에 비동기 함수를 통해 성능 향상을 누릴 수 있었던 것이었다

Graph View