image

비동기통신, 동기통신

태그
Dev
상세설명동기통신(Sync), 비동기통신(Async) 차이점
작성일자2024.01.22

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

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

동기(Synchronous)

image

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

    • 동기 통신의 장점

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

    • 동기 통신의 단점

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

    • 비동기(Asynchronous)

    image

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

    • 비동기 통신의 장점

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

    • 비동기 통신의 단점

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

    • 참고

    https://inpa.tistory.com/entry/WEB-🌐-비동기Async통신-동기Sync통신

    이전 포스트

    payload 란

    다음 포스트

    svg 태그