[javascript] 비동기 데이터 요청을 이용한 쇼핑 카트 구현 방법

11 Dec 2023

javascript

이번에는 자바스크립트의 비동기 데이터 요청을 이용하여 쇼핑 카트를 구현하는 방법에 대해 알아보겠습니다.

1. XMLHttpRequest를 이용한 데이터 요청

우선, XMLHttpRequest 객체를 사용하여 서버에서 상품 목록을 가져올 수 있습니다. 다음은 예시 코드입니다.

let xhr = new XMLHttpRequest();
xhr.open('GET', '/products', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    let products = JSON.parse(xhr.responseText);
    // 상품 목록을 처리하는 코드 작성
  }
};
xhr.send();

2. 데이터 처리 및 쇼핑 카트 구현

서버에서 받아온 상품 목록을 처리하여 쇼핑 카트에 추가하고, 카트에 담긴 상품 목록을 화면에 표시할 수 있습니다.

// 받아온 상품 목록을 가공하여 화면에 출력하는 함수
function displayProducts(products) {
  // 상품 목록을 화면에 출력하는 코드 작성
}

// 쇼핑 카트에 상품 추가하는 함수
function addToCart(product) {
  // 카트에 상품을 추가하는 코드 작성
}

// 상품 목록을 받아온 후 처리하는 함수 호출
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    let products = JSON.parse(xhr.responseText);
    displayProducts(products);
  }
};

3. 이벤트 처리

사용자가 상품을 카트에 추가하고 제거하는 등의 동작을 할 때 이벤트를 처리하여 쇼핑 카트를 업데이트할 수 있습니다.

// 상품을 카트에 추가하는 버튼 클릭 시 이벤트 처리
document.getElementById('add-to-cart-btn').addEventListener('click', function() {
  addToCart(selectedProduct);
  // 화면에 카트 내용 업데이트하는 코드 작성
});

이와 같은 방법으로 비동기 데이터 요청을 활용하여 쇼핑 카트를 구현할 수 있습니다.

위 코드는 실제 구현을 위한 예시이며, 실제 프로젝트에서는 보다 안정적인 코드 및 보안을 고려해야 합니다.

참고 자료:

MDN Web Docs - XMLHttpRequest: https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest
MDN Web Docs - 이벤트 핸들링: https://developer.mozilla.org/ko/docs/Web/Guide/Events/Creating_and_triggering_events