비동기처리

동기처리와 비동기처리, synchronous and asynchronous

1. 동기처리, synchronous

아래의 코드를 살펴보자.

const btn = document.querySelector('button');
btn.addEventListener('click', () => {
  alert("you clicked me!");
  
  let makeP = document.createElement('p');
  makeP.textHTML = "This is a new line";
  document.body.appendChild('makeP');
})

위의 코드가 실행되는 순서를 살펴보면,
1. button tag를 클릭한다.
2. 클릭 이벤트가 발생하면서 alert가 "you clicked me!"라는 메시지로 뜬다.
3. alert가 사라지면 p tag가 만들어지고, "This is a new line"이라는 텍스트가 입력되어 브라우저에 뜬다.

이 일련의 과정은 synchronous, 동기 처리의 과정을 매우 잘 보여준다.
동기 처리는 코드의 순서대로 진행되는데, 그 진행이 하나가 끝이 나야 다음 이벤트로 넘어가는 식이다. 그러나 이러한 방식은 서버로부터 데이터를 받아와야 하는 fetch 작업이나 데이터를 받아서 다시 리턴해야 하는 상황에서는 효율적인 방식이 될 수 없다. 그래서 요즘은 많은 Web API에서 비동기 처리로 진행한다.

2. 비동기처리, asynchronous

비동기처리란 순서 상으로 어떤 코드가 다 실행될 때까지 다른 코드의 실행을 멈추고 있는 것이 아니라 연속적으로 코드의 실행들을 일으키는 것이다. 비동기 처리를 하는 이유는 모든 코드들이 순차적으로 실행이 될 때까지 기다리게 되면 브라우저 상의 렌더링이 되는 시간이 너무 오래 걸리므로 일단 모든 코드들을 실행시키고 서버 상의 연결로 시간이 지연되는 부분들은 계속 진행시킬 수 있기 때문이다.

비동기처리를 했을 때 절대적으로 시간을 절약할 수 있고, 이는 웹 서비스를 제공에 매우 중요한 부분이다.

하나의 예시를 들어보자.

setTimeout(function() {
  console.log("Is it working well?");
}, 5000);

console.log("Yes, maybe...");

setTimeout(function() {
  console.log("Hmmm, I don't think so...");
}, 2000);

setTimeOut api를 실행했을 때 어떤 결과를 보게 될까?

비동기처리에 대한 이해가 없다면,
1. "Is it working well?" print
2. "Yes, maybe..." print
3. "Hmm, I don't think so..." print

이 순서로 출력될 것이라고 생각할 수 있다.

실제 콘솔에서는 어떤 결과가 나올까?

1. "Yes, maybe..." print
2. 2초 뒤에 "Hmm, I don't think so..." print
3. 5초 뒤에 "Is it working well?" print