비동기 통신만으로 웹페이지를 만들지 않는 이유

테토 2024. 4. 15. 15:38

이번에 ajax를 간단히 공부하면서 어떤 경우에 비동기 통신을 사용하는지 궁금증이 생겼다.

Sync 통신만 사용해서 웹페이지를 전부 구성할 수도 있고, Async 통신만으로 구현할 수도 있다.

하지만 그렇게 사용하는 경우는 잘 없는 것 같고 sync 통신으로 사용하되 필요한 경우에 Async 통신을 사용하는 경우가 많아보인다. 왜 Async 통신만으로 페이지를 만들지 않는지 궁금해져서 글을 쓰게 되었다.

클라이언트가 서버에 요청을 보낸 후 응답이 올 때까지 대기한다.

Html 파일이 다 만들어진 후에 페이지를 이용할 수 있다.

서버에 직접 요청을 보낸다.

블로그에 글을 작성한 후 완료를 누르면 작성한 내용이 서버로 전송되고 페이지 주소가 변화되며 새로운 페이지를 불러온다.

검색엔진에 검색을 할 때도 검색어를 입력하고 엔터를 치면 주소가 바뀌고 화면 전체가 새로고침 되는 것을 볼 수 있다.

클라이언트가 서버에 요청을 보내고 응답을 기다리지 않는다.

응답이 안와도 다른 일을 하다가 응답이 준비됐다는 신호가 오면 응답을 가져온다.

자바스크립트를 통해 서버에 요청을 보낸다.

비동기 통신이 사용되는 경우는 웹페이지 주소가 바뀌지 않는다.

티스토리 홈에서 스크롤을 내려서 글 더보기를 누르면 하위 글이 더 보여지지만 페이지 주소는 그대로이다.

블로그에 댓글을 달거나 댓글 부분만 새로고침하는 경우에도 페이지 전체가 새로고침 되지 않고 댓글창만 최신화된다.

예제들을 보면 비동기 통신이 화면의 일부만 변경되는 경우에 사용되는 것을 알 수 있다.

자바스크립트 의존도가 높아진다
- 자바스크립트를 통해 화면을 다시 만들어야하는데 페이지 전체가 변화할 경우 자바스크립트 코드를 통해서 만들기 너무 복잡하다.
사용자 경험이 오히려 감소한다.
- 요청과 응답 사이에 화면이 깜박이지 않으니 시간이 오래 걸릴 경우 사용자 입장에서 입력이 된 건지 헷갈릴 수 있다.
속도가 느려진다
- 페이지의 일부분이 아니라 전체를 가져오는데는 동기통신보다 시간이 오래걸린다.

그리고 생각을 해보면 페이지 한 두개라면 괜찮을 지 몰라도 다양한 페이지가 보여져야하는데 비동기 통신만 해버리면 처리자체가 너무 복잡해지고, 중간페이지를 사용자가 직접 접속이 불가능해진다.

이 외에도 에러를 확인하기 비교적 어렵다는 점. 요청과 응답의 순서가 보장되지 않는다는 점 등 비동기 통신의 단점도 있다.

그렇기 때문에 동기통신과 비동기통신을 주로 사용하는 곳에는 이유가 있다는 것을 알 수 있었다!