[JavaScript] 동기와 비동기 처리

동기(Synchronous)

작업을 순차적으로 하나씩 처리하는 것으로, 이전 작업이 완료된 이후에 다음 작업을 실행하게 된다.

비동기(Asynchronous)

작업을 시작한 후 결과를 기다리지 않고 바로 다음 작업을 수행하는 것으로, 요청에 대한 응답을 병렬적으로 처리한다.

비동기(Asynchronous)를 사용하는 이유

예를 들어, 용량이 큰 사진이나 데이터를 불러온 뒤에 실행되는 앱의 경우, 이를 동기로 처리한다면 데이터를 모두 불러온 뒤에야 앱이 실행되게 되므로, 사용자들은 앱을 이용하기 위해 오랜 시간 기다려야하는 불편을 겪게 된다.

만약 이를 비동기로 처리할 수 있다면, 먼저 처리되는 부분부터 보여지게 되므로, 사용자 경험에 긍정적인 영향을 줄 수 있다.

JavaScript의 비동기 처리 방식

JavaScript는 Single Thread 언어로, 여러 작업을 동시에 처리할 수 없다. 따라서 자바스크립트는 비동기 처리를 위해 다음과 같은 환경의 도움을 받는다.

💡 Thread?

작업을 처리할 때 실제로 작업을 수행하는 주체로, Multi-thread라면 업무를 수행할 수 있는 주체가 여러 개라는 의미

1. JS Engine의 Call Stack
   • Call Stack(LIFO)은 요청이 들어올 때 마다 순차적으로 처리하는 스택으로, 기본적인 자바스크립트의 싱글 스레드 작업 처리함.
2. Web API
   • JS 엔진이 아닌 브라우저에서 제공하는 Runtime 환경으로, 시간이 소요되는 작업이 Call Stack으로 들어오면, Web API로 보내서 처리하도록 함.
3. Task Queue
   • 비동기 처리된 Callback 함수가 대기하는 Queue로, Web API에서 처리가 끝난 작업들은 Task Queue(FIFO)에 순서대로 들어가게 됨.
4. Event Loop
   • Event Loop가 Call Stack이 비어있는 것을 체크하고, Task Queue에서 가장 오래된 작업을 Call Stack으로 보낸다.

console.log('Hi');
setTimeOut(function test() {
	console.log('TEST');
}, 3000)

console.log('Bye')

// 출력 결과
// Hi
// Bye
// TEST

Axios 라이브러리

자바스크립트의 HTTP 웹 통신을 위한 라이브러리로, 비동기 통신 기능을 제공

• 기본 구조

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
  	axios.get('요청할 URL')
  		.then(성공하면 수행할 콜백 함수)
  		.catch(실패하면 수행할 콜백 함수)
  </script>

  • GET, POST 등 여러 method 사용 가능
  • .then을 이용해서 성공하면 수행할 로직을 작성
  • .catch를 이용해서 실패하면 수행할 로직을 작성