API를 사용한 React 프로젝트를 해오면서, 동기 통신과 비동기 통신에 대해서 잘 알지못하면서 일단 구현부터 했었다.

앞으로는 알고 사용하자! 라는 마인드로 공부하고 정리해보고자 한다.

동기 통신(Synchronous)

동기란 요청과 응답이 동시에 일어남을 의미한다.

즉, 동기 통신이란 어떠한 request가 있을 때 해당 request에 맞는 response가 전달될 때 까지 다른 request를 요청할 수 없는 통신이다.

다른 관점에서 살펴보면, 동기 통신은 웹 페이지를 새로고침하면서 데이터를 불러오는 방식이다.
어떠한 request가 있을 때 웹 페이지의 전체를 갱신하게 해주는 통신 방식이다.

결과적으로, request가 신속하게 처리되어야 하는 서비스에서는 적절하지 않을 수 있다.
(request에 대한 response가 중요한 서비스에서 적절하다.)

---

비동기 통신(Asynchronous)

비동기란 요청과 응답이 동시에 일어나지 않고 나중에 응답함을 의미한다.

즉, 비동기 통신이란 request가 있을 때 해당 request에 맞는 response를 기다리지 않고 다른 request를 계속해서 보내는 통신이다.

다른 관점에서 살펴보면, 비동기 통신은 웹 페이지를 새로고침하지 않고도 데이터를 불러올 수 있는 방식이다.
어떠한 request가 있을 때 웹 페이지의 일부를 갱신하게 해주는 통신 방식이다.

결과적으로, response가 중요한 서비스에서는 적절하지 않을 수 있다.
(여러 request에 대한 빠른 response를 요구하는 서비스에서 적절하다.)

---

각각의 장/단점

동기 통신의 장점

• 비동기 통신보다 코드를 작성하고 이해하는 것이 쉽다.
• 요청과 응답의 처리가 순차적으로 이루어지기 때문에, 코드의 간결성과 직관성이 좋다.
• 요청과 응답의 순서, 응답 결과를 보장받을 수 있다.
• 요청과 응답이 연결되어 있어서, Error Handling이 상대적으로 쉽다.

동기 통신의 단점

• 페이지 전체 갱신으로 인해 서버와의 통신량이 많아지고, 속도와 성능이 저하될 수 있다.
• 요청과 응답의 처리 순서 보장으로 인해, 한 요청을 보내면 다른 요청은 보낼수가 없다.

---

비동기 통신의 장점

• 전체가 아닌 일부를 갱신하기 때문에, 서버와의 통신량이 적고 속도와 성능 면에서 좋다.
• 요청과 응답의 처리 순서는 보장되어 있지 않아서, 한 요청을 보낼 시 다른 요청도 보낼 수 있다.

비동기 통신의 단점

• 동기 통신에 비해 코드를 작성하고 이해하는 것이 어려워, 코드의 복잡도가 높아질 수 있다.
• 요청과 응답의 순서를 보장할 수 없다.
  • A, B의 순서로 요청을 보냈는데 B, A의 순서로 응답이 도착할 수 있다.
• 요청과 응답이 분리되어 있어서, Error Handling이 상대적으로 어렵다.