동기식 / 비동기식 처리 방식의 차이를 알아보려한다.

동기 (Synchronous)

• "직렬적" (혹은 "순차적") 으로 일(task)을 수행한다.
• 요청을 보낸 후 응답을 받아야 다음 동작이 이루어지는 방식.
• 모든 일은 순차적으로 실행되며 어떤 작업이 수행중이면 다음 작업은 대기한다.

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

동기 예시

func1();
function func1() {
  console.log("첫번째 함수");
  func2();
}
function func2() {
  console.log("두번째 함수");
  func3();
}
function func3() {
  console.log("세번째 함수");
}

첫번째 함수
두번째 함수
세번째 함수

---

비동기 (Asynchronous)

• "병렬적으로" 태스크를 수행한다.
• 작업이 수행중이어도 대기하지 않고 (Non-Blocking) 다음 작업을 수행한다.

비동기 예시

func1();
function func1() {
	console.log("첫번째 함수");
    func2();
}
function func2() {
	setTimeout(function(){
    	console.log("두번째 함수");
	}, 0); 
	func3();
}
function func3() {
	console.log("새번째 함수");
}

첫번째 함수
세번째 함수
두번째 함수

비동기 처리가 사용되는 이유

만약 동기적으로 데이터를 서버로부터 받아온다면 데이터를 받아오는 것을 기다린 다음에야 페이지가 실행되므로 사용자는 데이터가 전부 받아질 때까지 어떤 화면도 볼 수 없다.
그리고 서버에서 가져오는 데이터의 양이 늘어날수록 실행 속도는 느려지게 된다.
이러한 불편함을 방지하기 위해 데이터를 수신하는 것과 페이지를 표시하는 것은 비동기적으로 처리해야한다.

페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트, 기타 코드등을 모두 재요청할 경우 불필요한 리소스가 낭비되지만 비동기 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있다.

이 비동기처리를 코드로 가장 많이 사용되는 것은 "DOM 이벤트 핸들러", "Timer함수(setTimeout, setInterval)", "AJAX" 다.