공부하며 정리해보기 - 2. Async/Sync에 대해

비동기와 동기는 웹 개발에서 중요한 개념입니다.

이 두 방식은 웹 애플리케이션에서 데이터를 주고받는 방법을 설명하며, 각각 고유한 장단점이 있어 상황에 따라 적절하게 사용합니다.

 

 

1. Sync(동기)

 

 - 요청과 응답이 동시에 이루어지는 방식입니다. 웹 페이지를 새로고침하면서 데이터를 불러오는 경우가 이에 해당합니다. 예를 들어, 온라인 쇼핑몰에서 사용자가 결제 정보를 입력하고 결제 버튼을 누르면, 페이지가 새로고침되면서 결제가 처리되고, 새 페이지에 결제 완료 정보가 표시됩니다.

 

장점

1. 코드의 간결성
   - 동기 통신은 요청과 응답이 순차적으로 이루어지므로, 코드를 작성하고 이해하기 쉽습니다.
2. 순서 보장
   - 요청을 보낸 후 응답을 받아야 다음 작음을 수행할 수 있으므로, 요청과 응답의 순서가 보장됩니다.
3. 에러 처리 용이
   - 요청과 응답이 연결되어 있어, 에러 발생 시 처리하기 쉽습니다.

단점

1. 성능 저하
   - 페이지 전체를 새로고침해야 하므로 서버와의 통신량이 많아지고, 성능이 저하될 수 있습니다.
2. 사용자 경험 저하
   - 페이지가 깜빡거리거나 멈추는 형상이 발생하여, 사용자가 불편함을 느낄 수 있습니다.
3. 작업 차단
   요청을 보낸 후 응답을 기다려야 하므로, 다른 작업을 동시에 수행할 수 없습니다.

 

2. Async(비동기)

 

 - 요청과 응답이 동시에 이루어지지 않는 방식입니다. 페이지를 새로고침하지 않고, 필요한 부분만 업데이트하는 경우가 이에 해당합니다. 예를 들어, 실시간 채팅 애플리케이션에서 메세지를 전송하면, 전체 페이지를 새로고침하지 않고 채팅 창에만 새 메시지가 나타납니다.

 

장점

1. 성능 향상
   -  페이지의 일부만 업데이트하므로, 웹페이지의 속도와 성능이 향상됩니다.
2. 사용자 경험 개선
   - 화면이 깜박거리거나 멈추지 않고 부드럽게 작동하여, 사용자 경험이 향상됩니다.
3. 병렬 작업 가능
   - 요청을 보낸 후에도 다른 작업을 수행할 수 있습니다.

단점

1. 코드 복잡도 증가
   - 비동기 통신은 코드 작성과 이해가 어려울 수 있으며, 복잡도가 증가할 수 있습니다.
2. 순서 보장의 불확실성
   - 요청과 응답이 동시에 일어나지 않아, 요청의 처리 속도에 따라 응답순서가 뒤바뀔 수 있습니다.
3. 에러 처리 복잡
   - 요청과 응답이 분리되어 있어, 에러가 발생했을 때 원인을 파악하고 처리하기가 어렵습니다.

---

3. 동기 및 비동기 처리의 예시

동기 처리의 예시

상품 상세 페이지 로딩

• 설명: 사용자가 상품 목록에서 특정 상품을 클릭하면, 상품의 상세 정보 페이지로 이동합니다. 이때 전체 페이지가 새로고침되며, 새로운 URL로 이동하여 서버에서 상품에 대한 전체 HTML 페이지를 받아옵니다.
• 동작: 전체 페이지가 서버로부터 응답을 받아 로딩되기 전까지 사용자는 다른 작업을 할 수 없습니다. 이는 요청이 완료될 때까지 기다려야 하기 때문입니다.
• 예시 코드: 동기 방식의 폼 제출
  

  <form action="/order" method="POST">
      <input type="hidden" name="productId" value="12345">
      <button type="submit">Buy Now</button>
  </form>

  
  사용자가 Buy Now 버튼을 클릭하면, 페이지가 서버에 요청을 보내고 응답을 받아 새로고침됩니다. 이 과정은 동기적으로 진행되며, 서버 응답이 오기전까지 다른 작업을 할 수 없습니다.

비동기 처리의 예시

장바구니에 상품 추가

• 설명 : 사용자가 특정 상품을 장바구니에 추가할 때, 페이지가 새로고침되지 않고, 해당 상품이 비동기적으로 서버에 추가 요청을 보낸 후, 장바구니의 상태를 업데이트합니다.
• 동작 : 서버로부터 응답이 도착하기 전에도 사용자는 쇼핑몰에서 다른 상품을 검색하거나 추가할 수 있습니다. 서버에서 장바구니 업데이트 응답이 오면, 화면의 일부만 업데이트 응답이 오면, 화면의 일부만 업데이트되거나 알림이 표시됩니다.
• 예시 코드: 비동기 방식의 상품추가

const addToCart = (productId) => {
    axios.post('/cart', { productId: productId })
        .then(response => {
            cartProductList(response.data);
        })
        .catch(error => {
            console.error('추가되지 않음:', error);
        });
};

사용자가  addToCart 버튼을 클릭하면, 페이지가 새로고침되지 않고 장바구니에 상품이 비동기적으로 추가됩니다.
서버 응답이 오면 List를 받아 추가 처리를합니다. 그 사이 사용자는 다른 작업을 할 수 있습니다.