📘[WEB] 동기, 비동기 통신에 대해서

통신 방식

웹 개발을 진행하다보면 동기 통신과 비동기 통신에 대한 개념이 자주 등장한다.
직접 겪은 경험 중에는 대표적으로 AJAX를 사용할 때이다.
AJAX는 비동기식 자바스크립트 AND Xml이라는 뜻이다.

AJAX를 사용하면서 사용 법은 익혔지만, 정작 동기 통신과 비동기식 통신의 차이에 대해서는 제대로 알지 못했다.

동기와 비동기는 통신 방식에 있어 차이가 있다.
즉, 데이터를 주고받는 방식을 말한다.

동기(Sync)

동기는 요청과 응답이 동시에 일어난다는 뜻이다.
즉, 동기는 데이터 요청을 하면 한 요청에 대해 즉각적으로 응답을 받을 수 있으므로, 요청과 응답의 순서가 보장된다.

동기 통신은 웹 페이지를 새로고침하면서 데이터를 불러오는 방식이라고 생각할 수 있다.
즉, 웹페이지의 전체를 갱신할 수 있게 해주는 기술이 동기 통신이다.

동기(Sync)의 장점

1. 비동기 통신에 비해 코드를 작성하고 이해하는 것이 쉽다.
2. 요청과 응답이 순차적으로 이루어지기 때문에 코드의 간결성과 직관성을 유지할 수 있다.
3. 요청을 보낸 후에 응답을 받아야 다음 작업을 수행하므로, 요청과 응답의 순서가 보장된다.
4. 요청과 응답이 연결되어 있기 때문에, 에러가 발생했을 때 에러에 대한 처리가 쉬울 수 있다.

동기(Sync)의 단점

1. 전체 페이지를 다시 로딩하기 때문에 서버와의 통신량 증가, 자원과 시간이 낭비될 수 있어 웹 페이지의 속도와 성능이 저하될 수 있다.
2. 화면이 깜빡거리거나 멈추는 현상이 발생할 수 있어, 사용자가 불편함을 느낄 수 있다.
3. 요청과 응답이 동시에 일어나야 하므로, 요청을 보낸 후에는 다른 작업을 할 수 없다.

비동기(Async)

비동기는 요청과 응답이 동시에 일어나지 않는 방식이다.
동시에 일어나지 않으니 요청이 여러 개 들어와도 응답은 나중에 한다는 뜻이다.
즉, 비동기는 데이터 요청과 응답의 순서가 보장되지 않는다.

비동기는 동기와 반대로 웹 페이지를 새로고침 하지 않고 데이터를 불러오는 방식이다.
웹 페이지 전체를 새로고침하지 않으니, 웹 페이지의 일부분만 업데이트할 수 있게 해주는 기술이 비동기 통신이다.

비동기(Async)의 장점

1. 전체 페이지를 다시 로딩하지 않고 필요한 부분만 업데이트할 수 있기 때문에 웹 페이지의 속도와 성능을 향상시킬 수 있다.
2. 서버와의 통신량이 줄어들고, 자원과 시간을 절약할 수 있다.
3. 요청과 응답이 동시에 일어나지 않아도 되므로, 요청을 보낸 후에 다른 작업을 할 수 있다.

비동기(Async)의 단점

1. 동기 통신에 비해 코드를 작성하고 이해하는 것이 어려워 코드의 복잡도가 증가할 수 있다.
2. 요청을 보낸 후 응답을 기다리지 않고 다음 작업을 수행할 수 있는데, 요청 처리 속도에 따라 응답이 뒤섞일 수 있어 요청과 응답의 순서를 보장할 수 없다.
3. 요청과 응답이 분리되어 있기 때문에, 에러가 발생했을 때 어떤 요청에서 어떤 에러가 발생했는지 파악하고 처리하는 것이 쉽지 않을 수 있다.

2023-11-30 글인데, .md 확장자에서 .을 안붙여서 안올라갔었네..

참고자료

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