동기식 (Synchronous) / 비동기식 (Asynchronous) 이란?

 

자바스크립트의 처리방식과 

동기식, 비동기에 대해서 천천히 알아보자!

 

 

---

 

 

출처 - https://learnjs.vlpt.us/async/

 

📑 동기식(Synchronous) VS 비동기식(Asynchronous)

동기와 비동기를 나누는 가장 큰 차이점을 어떻게 실행 순서를 가지는 지에 있다.

Syncronous 동기는 요청을 보낸 후 해당 요청의 응답을 받아야 다음 동작을 실행하는 방식을,

Asynchronous 비동기는 요청을 보낸 후 응답과 관계없이 다음 동작을 실행할 수 있는 방식을 의미한다.

 

 

 

---

 

👏 동기식 (Synchronous)

먼저 시작된 하나의 작업이 끝날 때까지 다른 작업을 시작하지 않고 기다렸다가 다 끝나면 새로운 작업을 시작하는 방식이다. 위 그림 Synchronous와 같이 작업이 직렬로 배치되어 실행되며 작업 실행의 순서가 확실히 정해져 있는 것을 동기식 처리라 부른다.

 

👏 비동기식 (Asynchronous)

동기식 방식과는 다르게 먼저 시작된 작업의 완료 여부와는 상관없이 새로운 작업을 시작하는 방식이다.
위 그림 Asynchronous와 같이 작업이 병렬로 배치되어 실행되며 작업의 순서가 확실하지 않아 나중에 시작된 작업이 먼저 끝나는 경우도 발생한다. 이와 같은 방식을 비동기식 처리라 부른다.

 

 

 

---

💻 자바스크립트 비동기 처리

 

자바스크립트에는 아래와 같이 3가지 비동기 처리방식이 있다.

 

1. 콜백 함수 사용

https://tlsdnjs12.tistory.com/13

비동기식 (Asynchronous) - 콜백 함수(Callback Function) 란?

 

2. Promise

https://tlsdnjs12.tistory.com/14

비동기식 (Asynchronous) - promise 이란?

 

 

3. Promise를 활용한 async/await

 

https://tlsdnjs12.tistory.com/15

비동기식 (Asynchronous) - Promise를 활용한 async/await 이란?

 

 

자바스크립트는 기본적으로 비동기적으로 동작을 한다.
개발하다 보면 비동기식으로 동작하는 부분이 동기적으로 동작해야 하는 경우가 생긴다.
이럴 때 비동기식 동작이 동기식으로 동작하도록 해주는 걸 비동기 처리라고 한다.

 

 

 

---

 

🎠 비동기의 주요 사례

 

👉 DOM Element 의 이벤트 이벤트 핸들러

- 마우스, 키보드 입력 (click, keydown 등), 페이지 로딩 (DOMContentLoaded 등)

 

👉 타이머

- 타이머 API (setTimeout 등), 애니메이션 API (requestAnimationFrame)

 

👉 서버에 자원 요청 및 응답

- fetch API, AJAX (XHR)