이미지출처

동기

동기는 데이터의 요청과 결과가 한 자리에서 동시에 일어난다. 간딘히 말해 사용자가 데이터를 서버에게 요청한다면 그 서버가 데이터 요청에 따른 응답을 사용자에게 다시 리턴해주기 전까지 사용자는 다른 활동을 할 수 없으며 기다려야 한다.

• 장점 : 설계가 매우 간단하고 직관적이다.
• 단점 : 요청에 따른 결과가 반환되기 전까지 아무것도 못하고 대기해야한다.
  
  
  
  

비동기

비동기는 데이터의 요청과 결과가 동시에 일어나지 않는다. 서버에게 데이터를 요청한 후 요청에 따른 응답을 계속 기다리지 않아도 되며 다른 외부 활동을 수행하여도되고 서버에게 다른 요청사항을 보내도 된다.

• 장점 : 요청에 따른 결과가 반환되는 시간동안 다른 작업을 수행할 수 있으며, 자원을 효율적으로 사용할 수 있다.
• 단점 : 동기보다 설계가 복잡하다.

다음과 같은 작업들은 주로 비동기적으로 처리한다

• Ajax Web API 요청 : 서버쪽에서 데이터를 받아와야 할 때는, 요청을 하고 서버에서 응답을 할 때 까지 대기를 해야 되기 때문에 작업을 비동기적으로 처리한다.
• 파일 읽기 : 주로 서버 쪽에서 파일을 읽어야 하는 상황에는 비동기적으로 처리한다.
• 암호화/복호화 : 암호화/복호화를 할 때에도 바로 처리가 되지 않고, 어느정도 시간이 걸리는 경우가 있기 때문에 비동기 적으로 처리한다.
• 작업 예약 : 단순히 어떤 작업을 몇 초 후에 동작해야 하는 상황에는 setTimeout 을 사용하여 비동기 처리한다.

자바스크립트에서 비동기 프로그래밍을 하기 위해서 callback 함수 , Promise, async/await 라는 문법을 사용한다.

📚Reference

• 동기와 비동기에 대해서
• 자바스크립트에서 비동기 처리 다루기