[CS 기본 - 웹의 시작 ] 5. http통신에서 동기와 비동기의 차이는 뭘까?

 

HTTP 통신에서 **동기(Synchronous)**와 **비동기(Asynchronous)**의 차이는 요청을 보낸 후 응답을 기다리는 방식에 있습니다. 이 차이점은 클라이언트와 서버 간의 통신에서 처리 흐름과 대기 방식에 영향을 줍니다.

1. 동기(Synchronous) 통신

• 동기 통신에서는 클라이언트가 서버에 요청을 보낸 후, 서버로부터 응답을 받을 때까지 기다립니다. 이 동안 클라이언트는 다른 작업을 수행하지 않고, 응답을 받을 때까지 대기 상태가 됩니다.
• 즉, 요청 → 응답의 순서가 보장되며, 응답이 올 때까지 클라이언트의 흐름이 멈추는 방식입니다.

동기 통신의 특징

• 단순한 흐름 제어: 요청과 응답이 차례대로 이루어져 흐름을 관리하기 쉽습니다.
• 응답 시간에 의존적: 서버의 응답이 늦어지면, 그만큼 클라이언트도 대기 시간이 길어지게 됩니다. 이는 사용자 경험(UX)에 부정적인 영향을 줄 수 있습니다.
• 순차적인 작업 처리: 요청이 순서대로 처리되므로, 작업의 순서가 중요한 경우에 적합합니다.

동기 통신의 예시

• 일반적인 HTTP 요청이 대표적입니다. 예를 들어, 브라우저에서 웹 페이지를 요청하면, 서버로부터 페이지 데이터를 모두 받을 때까지 기다립니다.
• 파일 다운로드: 파일을 다운로드할 때는 파일이 모두 다운로드될 때까지 대기하고, 그 후에 다른 작업을 진행합니다.

2. 비동기(Asynchronous) 통신

• 비동기 통신에서는 클라이언트가 서버에 요청을 보내고, 응답이 도착하기 전에 다른 작업을 수행할 수 있습니다. 응답이 도착하면 콜백 함수나 이벤트 리스너를 통해 결과를 처리합니다.
• 즉, 요청 → 다른 작업 수행 → 응답 처리의 흐름으로, 요청과 응답이 동시에 이루어질 수 있는 방식입니다.

비동기 통신의 특징

• 비차단(Non-blocking): 서버의 응답을 기다리지 않고 다른 작업을 계속 수행할 수 있습니다. 이는 응답 시간이 긴 작업에 특히 유리합니다.
• 더 나은 사용자 경험: 네트워크 대기 시간을 줄이거나, 화면의 반응성을 높일 수 있습니다. 예를 들어, AJAX 요청을 통해 백그라운드에서 데이터를 가져오는 동안, 사용자 인터페이스는 계속 동작할 수 있습니다.
• 복잡한 흐름 제어: 비동기 방식은 콜백 함수, 이벤트, 프로미스, async/await 등을 통해 응답을 처리해야 하므로, 동기 방식보다 흐름 제어가 복잡할 수 있습니다.

비동기 통신의 예시

• AJAX 요청: 웹 애플리케이션에서 페이지를 새로 고치지 않고 데이터를 서버와 주고받는 데 사용됩니다. 예를 들어, 검색 자동완성 기능에서 사용자가 입력할 때마다 비동기적으로 서버에서 검색 결과를 가져올 수 있습니다.
• JavaScript의 setTimeout: 일정 시간 후에 실행되는 함수로, 비동기적인 작업의 예시입니다.
• 파일 업로드: 업로드 과정에서 진행 상태를 표시하고, 업로드가 완료되면 콜백 함수로 응답을 처리하는 방식을 사용할 수 있습니다.

3. 동기와 비동기의 차이 요약

특성동기(Synchronous)비동기(Asynchronous)

요청 처리 방식	요청 후 응답을 기다림	요청 후 다른 작업을 수행, 응답을 기다리지 않음
클라이언트 흐름 제어	순차적, 응답을 기다리는 동안 차단됨	비차단, 다른 작업을 동시에 수행 가능
코드 복잡성	단순함	복잡함 (콜백, 이벤트, 프로미스 등 필요)
사용 사례	순서가 중요한 작업, 예: 파일 다운로드	실시간 데이터 처리, 예: 채팅, AJAX 요청

결론

동기와 비동기 통신의 선택은 응용 프로그램의 요구사항에 따라 달라집니다. 실시간으로 빠른 반응이 필요한 경우 비동기 통신이 적합하고, 작업 순서가 중요하거나 처리 중에 다른 작업을 진행할 필요가 없는 경우 동기 통신이 적합할 수 있습니다.