🚗 동기와 비동기 차이점

🧵 동기(Synchronous)

요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어지는 방식을 말한다. 모든 일은 순차적으로 실행되며 어떤 작업이 수행중이라면 다음 작업은 대기하게 된다.
자바스크립트는 동기적으로 작동한다.

function a () {
  console.log('집에 도착했습니다.');
}
a();
function b () {
  console.log('샤워를 합니다.');
}
b();
function c () {
  console.log('잠에 듭니다.');
}
c();
/*
함수 실행순서: a 👉🏻 b 👉🏻 c
*/

🧶 비동기(Asynchronous)

비동기는 동시에 일어나지 않는다를 의미한다. 요청과 결과가 동시에 일어나지 않을거라는 말이다.
예로 setTimeout()과 AJAX가 존재한다.

function a () {
  console.log('집에 도착했습니다.');
}
a();
function b () {
  setTimeout(function(){
    console.log('샤워를 합니다.');
  }, 1000);
}
b();
function c () {
  console.log('잠에 듭니다.');
}
c();
/*
함수 실행순서: a 👉🏻 c 👉🏻 b
*/

데이터를 서버로부터 받아오는 앱을 만든다고 가정해보자!
서버로부터 데이터를 받아와서 해당 데이터를 뿌려준다.
= 맨 처음에 서버로부터 데이터를 받아오는 코드가 실행되어야 한다.
🤷🏻‍♀️ 동기적으로 구성을 하게 된다면?
데이터를 받아오기까지 기다린 다음에 앱이 실행될 것이고 데이터 양이 늘어날수록 앱의 실행속도는 더 느려진다. 그렇게 되면 데이터를 가져오기까지 앱이 대기하는 상태가 발생하게 된다.
🙆🏻‍♀️ 결론!
그래서 데이터를 수신하는 코드와 페이지를 표시하는 것은 비동기적으로 처리를 해야한다.