[javascript] 동기와 비동기

동기(synchronous)

동기는 데이터의 요청과 결과가 한 자리에서 동시에 일어나는 것을 말한다.
👉 데이터를 요청하면 시간이 얼마나 걸리던지 요청한 자리에서 결과가 주어져야한다.

클라이언트가 서버에 데이터를 요청한다면 클라이언트는 서버가 요청에 따른 응답을 주기 전까지 다른 활동을 할 수 없고 응답을 기다려야한다.

이해하기 쉽게 커피를 주문하는 모습을 상상해보자. 커피숍 사정상 커피를 먼저 주문한 A가 주문한 커피를 받을 때까지 뒤에 줄 서있는 B는 주문조차 할 수 없다.
👉 이렇게 한 작업이 끝날 때까지 이어지는 작업을 막는 것을 블로킹(blocking)이라고 한다.

비동기(Asynchronous)

비동기는 동기와 반대로 데이터의 요청과 결과가 동시에 일어나지 않는다.
👉 서버에 데이터를 요청한 후 응답을 기다리지않고 다른 작업을 할 수 있다.

동기처럼 커피 주문에 비유한다면 커피 주문이 블로킹되지 않고(non-blocking) 언제든지 주문을 받을 수 있으며 커피가 완성되는 즉시 커피를 제공한다.
👉 A가 주문한 커피가 나오는 시점과 B가 주문하는 시점이 같을 필요가 없다.

💡 비동기 주요 사례

• Dom Element의 이벤트 핸들러
• 타이머(타이먀 API, 애니메이션 API)
• 서버에 자원 요청 및 응답(fetch API, AJAX)

Javascript의 비동기

Javascript의 비동기적 실행(Asynchronous execution)이라는 개념은 웹개발에서 유용하다. 아래 세 가지 작업은 비동기적으로 작동되어야 효율적이다.

• 백그라운드 실행, 로딩 창 등의 작업
• 인터넷에서 서버로 요청을 보내고, 응답을 기다리는 작업
• 큰 용량의 파일을 로딩하는 작업

💡 Node.js는 논블로킹(non-blocking)하고 비동기적(Asynchronous)으로 작동하는 런타임이다.