비동기통신, 동기통신

비동기통신, 동기통신은 웹에서 데이터를 주고받는 방식을 설명한다.

동기통신(Sync), 비동기통신(Async) 차이점

동기(Synchronous)

• 요청과 응답이 동시에 일어난다는 뜻
• 직렬적으로 태스크(task)를 수행 (순차처리)
• 웹페이지를 새로고침하면서 데이터를 불러오는 방식
• 대표적인 예 - Form 제출 : 클라이언트에서 폼을 서버에 제출하면 서버로부터 새로운 웹페이지를 받아서 화면에 표시한다.
• 웹페이지의 전체를 갱신할 수 있게 해주는 기술이 바로 동기(Sync) 통신이다.

동기 통신의 장점

• 동기(Sync) 통신은 비동기(Async) 통신보다 코드를 작성하고 이해하는 것이 쉽다.
• 요청과 응답이 순차적으로 이루어지기 때문에 코드의 간결성과 직관성을 유지할 수 있다.
• 동기(Sync) 통신은 요청을 보낸 후에 응답을 받아야 다음 작업을 수행하기 때문에 요청과 응답의 순서를 보장할 수 있다. 예를 들어 A와 B라는 두 개의 요청을 보냈으면, 반드시 A의 응답이 먼저 도착하고 B의 응답이 나중에 도착한다.
• 동기(Sync) 통신은 요청과 응답이 연결되어 있기 때문에, 에러가 발생했을 때 에러에 대한 처리가 쉬울 수 있다

동기 통신의 단점

• 전체 페이지를 다시 로딩하기 때문에 서버와의 통신량이 많아지고, 자원과 시간이 낭비될 수 있어, 웹페이지의 속도와 성능이 저하될 수 있다.
• 따라서 화면이 깜빡거리거나 멈추는 현상이 발생하기 때문에 사용자가 불편함을 느껴 사용자 경험이 떨어질 수 있다.
• 요청과 응답이 동시에 일어나야 하기 때문에 요청을 보낸 후에는 다른 작업을 할 수 없다. 예를 들어, 네이버 메일에서 메일을 보내는 동안 다른 메일을 읽거나 쓸 수 없다.

---

비동기(Asynchronous)

• 요청과 응답이 동시에 일어나지 않고 나중에 응답한다는 뜻
• 병렬적으로 태스크를 수행
• 웹페이지를 새로 고침하지 않고도 데이터를 불러오는 방식
• 대표적인 예 - 페이지에서 댓글 영역 부분만 업데이트되어 댓글이 적용

비동기 통신의 장점

• 전체 페이지를 다시 로딩하지 않고 필요한 부분만 업데이트하기 때문에 웹페이지의 속도와 성능을 향상할 수 있다.
• 서버와의 통신량이 줄어들고, 자원과 시간을 절약할 수 있다.화면이 깜빡거리거나 멈추지 않고 부드럽게 작동하기 때문에 사용자 경험을 개선시킬 수 있다.
• 요청과 응답이 동시에 일어나지 않아도 되기 때문에 요청을 보낸 후에 다른 작업을 할 수 있다.

비동기 통신의 단점

• 비동기(Async) 통신은 동기(Sync) 통신보다 코드를 작성하고 이해하는 것이 어려워 코드의 복잡도가 증가할 수 있다.
• 비동기(Async) 통신은 요청을 보낸 후에 응답을 기다리지 않고 다음 작업을 수행하기 때문에, 요청의 처리 속도에 따라 응답이 뒤죽박죽 될 수 있어 요청과 응답의 순서를 보장할 수 없다. 예를 들어, A와 B라는 두 개의 요청을 보냈는데, B의 처리가 더 빨라서 B의 응답이 먼저 도착하는 경우가 있을 수 있다.
• 비동기(Async) 통신은 요청과 응답이 분리되어 있기 때문에, 에러가 발생했을 때 어떤 요청에서 에러가 발생했는지 파악하고 처리하는 것이 쉽지 않을 수 있다.

 

참고

🌐 웹의 비동기(Async) / 동기(Sync) 통신 정리