[Javascript] Sync와 Asyc

 

 

 

동기식 처리 모델과 비동기식 처리 모델의 예

 

 

동기식 처리 모델(Synchronous processing model)은 직렬적으로 태스크(task)를 수행한다. 즉 로직이 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기하게 된다.

 

예를 들어 서버에서 데이터를 가져와 화면에 표시하는 작업을 수행할 때 서버에 데이터를 요청하고 데이터가 응답될 때까지 이후 태스크들은 블로킹(blocking, 작업 중단)된다.

 

동기식 처리 모델(Synchronous processing model)

 

 

아래는 동기식으로 동작하는 코드의 예시. 순차적으로 실행된다.

function func1() {
  console.log('func1');
  func2();
}

function func2() {
  console.log('func2');
  func3();
}

function func3() {
  console.log('func3');
}

func1();

 

 

---

 

반면 비동기식 처리 모델(Asynchronous processing model)은 병렬적으로 작업을 수행한다. 즉 앞선 작업이 종료되지 않은 상태라 하더라도 대기하지 않고 다음 작업을 실행한다. 예를 들어 서버에서 데이터를 가져와 화면에 표시할 때, 서버에 데이터를 요청한 이후 응답이 올 때까지 대기하지 않고(Non-Blocking) 즉시 다음 작업을 수행하는 것. 이후 서버로부터 데이터가 응답되면 이벤트가 발생하고 이벤트 핸들러가 데이터를 가지고 수행할 작업을 계속해 수행한다.

 

자바스크립트의 대부분의 DOM 이벤트 핸들러와 타이머 함수(setTimeout, setInterval), Ajax 요청은 비동기식 처리 모델로 동작한다.

 

비동기식 처리 모델(Asynchronous processing model)

 

 

아래는 비동기식으로 동작하는 코드의 예시. 순차적으로 실행되지 않는다.

function func1() {
  console.log('func1');
  func2();
}

function func2() {
  setTimeout(function() {
    console.log('func2');
  }, 0);

  func3();
}

function func3() {
  console.log('func3');
}

func1();

 

위 예시를 실행하면 setTimeout 메서드에 두 번째 인수 인터벌을 0초로 설정해도 콘솔창에 'func1, func2, func3'의 순서로 로그가 출력되지 않는다. setTimeout 메서드가 비동기 함수이기 때문.

 

 

 

함수 func1이 호출되면 func1은 Call Stack에 쌓인다. 그리고 func1은 다시 func2를 호출하므로 func2가 Call Stack에 쌓이고 setTimeout이 호출된다. setTimeout의 콜백 함수는 즉시 실행되지 않고 지정 대기 시간만큼 기다리다가 'tick' 이벤트가 발생하면 task queue로 이동한 다음 Call Stack 비워졌을 때 Call Stack으로 이동되어 실행된다(이벤트 루프에 대한 자세한 내용은 별도 포스팅 예정).

 

 

 

---

 

 

웹에서의 비동기와 동기

 

Sync와 Async. 이 두 용어는 주로 웹에서 데이터를 주고받는 방식을 설명하는 데 사용되는데, 동기(Sync)는 요청과 응답이 동시에 일어난다는 뜻이고 비동기(Async)는 요청과 응답이 동시에 일어나지 않고 나중에 응답하는 것을 말한다.

 

그렇다면 왜 웹에서는 비동기와 동기라는 방식을 사용하는 걸까?

 

---

 

 

Sync(동기)

 

동기 통신은 웹 페이지를 새로고침하면서 데이터를 불러오는 방식이라고 볼 수 있다. 예를 들면 보낸 메일함에서 받은 메일함으로 페이지를 이동했을 때 메일 리스트 전체가 다시 로딩되는 것.

 

동기(Sync) 통신의 가장 대표적인 예시가 Form 제출이다. 폼은 웹 페이지에서 사용자의 입력을 받아 서버에 전송하는 역할을 하는데 클라이언트에서 폼을 서버에 제출하면 서버로부터 새로운 웹 페이지를 받아 화면에 표시하게 된다. 이처럼 웹 페이지의 전체를 갱신할 수 있게 해 주는 기술이 바로 동기(Sync) 통신이다.

 

 

동기 통신의 장점

• 비동기 통신보다 코드를 작성하고 이해하기 쉽다.
• 요청과 응답이 순차적으로 이루어지기 때문에 코드의 간결성과 직관성을 유지할 수 있다.
• 요청을 보낸 후에 응답을 받아야 다음 작업을 수행하기 때문에 요청과 응답의 순서가 보장된다. 예를 들어 A와 B라는 두 요청을 순서대로 보냈으면 반드시 A의 응답이 먼저 도착하고 B의 응답이 나중에 도착하낟.
• 동기 통신의 요청과 응답은 연결되어 있기 때문에 오류 발생 시 오류에 대한 처리가 쉬울 수 있다.

 

동기 통신의 단점

• 전체 페이지를 다시 로딩하기 때문에 서버와의 통신량이 많아지고 자원과 시간이 낭비될 수 있어 웹 페이지의 속도와 성능이 저하될 수 있다.
• 화면이 깜빡거리거나 멈추는 현상이 발생하기 때문(전체 페이지를 다시 로딩하니까)에 사용자 경험이 떨어질 수 있다.
• 요청과 응답이 동시에 일어나야 하기 때문에 요청을 보낸 후에는 다른 작업을 할 수 없다.

 

---

 

Async(비동기)

 

비동기 통신은 웹 페이지를 새로고침하지 않고도 데이터를 불러오는 방식이다. 예를 들어 블로그나 카페에서 댓글을 작성하고 등록 버튼을 누르면 페이지 전체가 리로드되지 않고 댓글 영역 부분만 업데이트되어 댓글이 적용되는 것. 이처럼 웹 페이지의 일부분만 업데이트할 수 있게 해주는 기술이 바로 비동기 통신인 것이다.

 

 

비동기 통신의 장점

• 전체 페이지를 다시 로딩하지 않고 필요한 부분만 업데이트하기 때문에 웹 페이지의 속도와 성능을 향상시킬 수 있다.
• 서버와의 통신량이 줄어들고 자원과 시간을 절약할 수 있다. 화면이 깜빡거리거나 멈추지 않고 부드럽게 동작하기 때문에 사용자 경험을 개선시킬 수 있다.
• 요청과 응답이 동시에 일어나지 않아도 되기 때문에 요청을 보낸 후에 다른 작업을 할 수 있다.

 

비동기 통신의 단점

• 비동기 통신은 동기 통신보다 코드를 작성하고 이해하는 것이 어려워 코드의 복잡도가 증가할 수 있다.
• 비동기 통신은 요청을 보낸 후에 응답을 기다리지 않고 다음 작업을 수행하기 때문에 요청의 처리 속도에 따라 응답이 뒤죽박죽될 수 있어 요청과 응답의 순서를 보장할 수 없다. 예를 들어 A와 B라는 두 요청을 보냈는데 B의 처리 속도가 더 빠르다면 B의 응답이 먼저 도착하는 경우가 생길 수 있다.
• 요청과 응답이 분리되어 있기 때문에 오류가 발생했을 때 어떤 요청에서 에러가 발생했는지 파악하고 처리하는 것이 쉽지 않을 수 있다.

 

---

 

 

이처럼 Sync와 Asnc는 장단점이 명확한 만큼 처리 순서와 결과에 맞게 처리하여 서비스의 질을 높일 수 있는 Synchronous 방식과 처리 결과에 의존하지 않고 성능적으로 빠른 처리가 가능한 Asynchronous 방식을 잘 알고 적용하는 것이 중요하다.

 

예를 들어 웹 페이지의 전체적인 구조나 디자인을 바꾸는 경우에는 동기식 통신을, 웹 페이지의 일부분만 자주 바뀌는 경우에는 비동기 통신을 사용하는 것이 좋을 수 있다.

Async(비동기)	Sync(동기)
요청과 응답이 동시에 일어나지 않는다.	요청과 응답이 동시에 일어난다.
웹 페이지의 일부분만 업데이트된다.	웹 페이지의 전체를 업데이트한다.
코드의 복잡도가 증가할 수 있다.	코드의 간결성과 직관성을 유지할 수 있다.
요청과 응답의 순서를 보장할 수 없다.	요청과 응답의 순서를 보장할 수 있다.
에러 처리가 어려울 수 있다.	에러 처리가 쉬울 수 있다.
웹 페이지의 속도와 성능을 향상시킬 수 있다.	웹 페이지의 속도와 성능이 저하될 수 있다.
사용자 경험을 개선시킬 수 있다.	사용자 경험이 떨어질 수 있다.
병렬적으로 여러 작업을 수행할 수 있다.	병렬적으로 여러 작업을 수행할 수 없다.