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

...

웹에서의 비동기와 동기

웹 개발을 하다보면 비동기(Async)와 동기(Sync)라는 용어를 자주 접하게 될 것이다. 이 두 용어는 웹에서 데이터를 주고받는 방식을 설명하는데 사용되는데, 동기(Sync)는 요청과 응답이 동시에 일어난다는 뜻이고, 비동기(Async)는 요청과 응답이 동시에 일어나지 않고 나중에 응답하는 것을 말한다.

그렇다면 왜 웹에서는 비동기와 동기라는 방식을 사용하는 걸까? 그리고 이 두 방식은 어떤 장단점이 있고, 어떤 상황에서 적절하게 사용할 수 있을까?

동기 (Sync)

동기(Sync) 통신은 웹페이지를 새로고침하면서 데이터를 불러오는 방식이라고 보면 된다. 예를 들어, 네이버 메일에서 왼쪽 사이드바에 보낸메일함에서 받은메일함으로 바꾸면 메일 리스트 화면 전체가 다시 로딩되는 것을 볼 수 있다.

동기(Sync) 통신의 가장 대표적인 예시가 폼(Form) 제출이다. 폼(Form)은 웹페이지에서 사용자의 입력을 받아 서버에 전송하는 역할하는데, 클라이언트에서 폼(Form)을 서버에 제출하면 서버로부터 새로운 웹페이지를 받아서 화면에 표시하게 된다.

이렇게 웹페이지의 전체를 갱신할 수 있게 해주는 기술이 바로 동기(Sync) 통신이다.

동기 통신의 장점

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

동기 통신의 단점

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

비동기 (Async)

비동기(Async) 통신은 동기(Sync)의 반댓말로, 웹페이지를 새로고침하지 않고도 데이터를 불러오는 방식이다. 예를 들어, 네이버 블로그나 카페에서 댓글을 작성하고 작성 버튼을 누르면 페이지 전체가 재로드 되지 않고 댓글 영역 부분만 업데이트 되어 댓글이 적용됨을 볼 수 있다.

이렇게 웹페이지의 일부분만 업데이트할 수 있게 해주는 기술이 바로 비동기(Async) 통신인 것이다.

비동기 통신의 장점

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

비동기 통신의 단점

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

웹의 비동기 처리 기술 Ajax

웹의 비동기(Async) 통신의 가장 대표적인 예시가 바로 AJAX(Asynchronous JavaScript And XML) 이다. AJAX는 자바스크립트를 이용해서 웹 서버와 비동기로 통신하고, HTML, XML, JSON 등의 다양한 형식의 데이터를 주고받을 수 있다. AJAX를 사용하면 웹페이지가 로딩된 후에도 서버로부터 필요한 데이터만 요청하고 받아서 웹페이지를 동적으로 갱신할 수 있어, 웹 페이지의 일부분만을 업데이트할 수 있으므로, 전체 페이지를 새로고침하지 않아도 되고, 서버의 부하도 줄일 수 있습니다. 위에서 네이버 댓글 시스템을 예시로 들어 비동기를 설명했는데 이를 구현하는 기술이 Ajax 인 것이다.

Ajax의 동작 원리는 다음과 같다.

웹 브라우저에서 사용자의 요청이 발생하면, 자바스크립트로 XMLHttpRequest 객체를 생성한다.
XMLHttpRequest 객체는 서버에 비동기적으로 요청을 보낸다.
서버는 요청을 처리하고 응답을 XML이나 JSON 형식으로 보낸다.
XMLHttpRequest 객체는 응답을 받아서 자바스크립트로 처리한다.
자바스크립트로 처리된 결과를 웹 브라우저에 반영한다.

이처럼 Ajax는 웹 개발에서 많이 사용되는 비동기 기술이다. Ajax를 잘 이해하고 활용하면 더 나은 웹 애플리케이션을 만들 수 있다.

Ajax의 장점

웹 페이지의 속도와 사용성을 향상시킬 수 있다.
서버의 리소스를 효율적으로 활용할 수 있다.
다양한 데이터 형식을 지원한다. (XML, JSON)

Ajax의 단점

보안 문제가 있을 수 있다.
크로스 도메인 문제가 있을 수 있다. (CORS)
브라우저의 호환성 문제가 있을 수 있다. (IE 브라우저)

비동기와 동기 결론

이렇게 Sync(동기식)과 Async(비동기식은) 명확안 장단점을 가지고 있으며 서비스 특징에 따라 처리결과게 의해 처리하여 서비스의 질을 높일 수 있는 Synchronous(동기식) 방법과, 처리결과에 의존하지 않고 성능적으로 빠른 처리가 가능한 ASynchronous(비동기식) 방법을 잘 적용 하는게 중요하다.

웹 개발을 할 때는 비동기(Async) 통신과 동기(Sync) 통신의 장단점을 잘 파악하고, 상황에 따라 적절하게 사용해야 한다. 예를 들어, 웹페이지의 전체적인 구조나 디자인을 바꾸는 경우에는 동기(Sync) 통신을 사용하는 것이 좋을 수 있고, 웹페이지의 일부분만 자주 바뀌는 경우에는 비동기(Async) 통신을 사용하는 것이 좋을 수 있다.

비동기(Async) 통신	동기(Sync) 통신
요청과 응답이 동시에 일어나지 않는다.	요청과 응답이 동시에 일어난다.
웹페이지의 일부분만 업데이트한다.	웹페이지의 전체를 업데이트한다.
코드의 복잡도가 증가할 수 있다.	코드의 간결성과 직관성을 유지할 수 있다.
요청과 응답의 순서를 보장할 수 없다.	요청과 응답의 순서를 보장할 수 있다.
에러 처리가 어려울 수 있다.	에러 처리가 쉬울 수 있다.
웹페이지의 속도와 성능을 향상시킬 수 있다.	웹페이지의 속도와 성능이 저하될 수 있다.
사용자 경험을 개선시킬 수 있다.	사용자 경험이 떨어질 수 있다.
병렬적으로 여러 작업을 수행할 수 있다.	병렬적으로 여러 작업을 수행할 수 없다.

# 참고자료

https://hongssup.tistory.com/9

https://khj93.tistory.com/entry/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-Synchronous%EB%8F%99%EA%B8%B0%EC%8B%9D-%ED%86%B5%EC%8B%A0%EA%B3%BC-Asynchronous%EB%B9%84%EB%8F%99%EA%B8%B0%EC%8B%9D-%ED%86%B5%EC%8B%A0%EC%9D%B4%EB%9E%80

https://m.blog.naver.com/sjc02183/222028523941

https://wildeveloperetrain.tistory.com/104

http://www.tcpschool.com/ajax/ajax_intro_works