[스틸스] 장바구니 구현 (localStorage, reduce, map, filter, axios)

 

 

쇼핑몰에 필수적인 기능 중 하나인 장바구니 기능은 구현하기 위해 로컬스토리지를 사용했다.

또한 상품을 추가하고, 장바구니에서 보여주며 수량 조정, 삭제 등 세부적인 기능들을 구현하기 위해 신경을 많이 쓴 부분이기도 하다.

 

 

 

1. 장바구니 상품 추가

 

상품을 장바구니에 추가 버튼을 누르면 해당 상품의 인덱스와 수량을 로컬스토리지에 저장하도록 코드를 작성했다.

 

먼저, 로컬스토리지를 정의한 후 상품 인덱스로 장바구니에 추가하는 상품들을 관리해 수량을 추가할 수 있도록 했다.

상품이 정상적으로 추가되면 완료 메세지로 사용자가 확인할 수 있도록 구현했다.

let basket = JSON.parse(localStorage.getItem('basket') || '[]');

if (productIndex !== -1) {

                basket[productIndex].quantity += 1;

} else {

                basket.push({ id: parseInt(clickedIndex, 10), quantity: 1 });

}

localStorage.setItem('basket', JSON.stringify(basket));

 

 

그러나,

상품을 추가한 후 카트 아이콘에 표시되는 수량이 실시간으로 업데이트 되지 않는 문제가 생겼다.

 

상품을 업데이트 하는 함수가 상품이 추가된 이후에 바로 실행이 되지 않는다고 판단했고,

정의해둔 cartAmount 함수가 페이지 로드 시 실시간으로 실행되도록 함수를 호출해주었다.

 

함수가 페이지 로드 시에 계속 실행되면서 상품을 추가할 시 실시간으로 카트  아이콘 수량이 업데이트 되었고, 문제를 해결할 수 있었다.

 

 

---

 

2. 장바구니 데이터 불러오기

 

장바구니 페이지에서 로컬 스토리지에 저장된 데이터를 활용해 서버로 각 상품 데이터를 요청하고,

서버에서 전달받은 데이터를 활용해 사용자에게 장바구니에 저장된 상품 정보를 보여주도록 기능을 구현했다.

 

 

먼저 클라이언트 측에서 axios POST 요청을 통해 장바구니 데이터를 서버로 전송한다.

 

특히, 요청 헤더에 JSON 데이터 형식임을 명시해주었다.

axios.post('/cart', { basket: basket }, {

        headers: {

            'Content-Type': 'application/json'

        }

})

 

 

클라이언트에서 보낸 데이터 요청을 서버 측에서 받아 세션에 데이터를 저장하고, JSON 형식으로 성공 응답을 클라이언트에게 반환해주었다.

 

 

이어서, 서버 측에서 세션에 저장된 장바구니 데이터와 로그인 세션 데이터를 활용해 페이지를 렌더링 하게 된다.

 

장바구니가 비어있는 경우 비어있다는 메세지를 전달하며 페이지를 렌더링하며,

장바구니에 데이터가 존재하는 경우,

map 메서드를 이용해 장바구에 저장된 상품 id를 배열로 만들어 해당하는 상품 정보를 데이터베이스에서 가져온다.

 

 

다시 데이터베이스에서 가져온 상품 정보를 map 메서드로 장바구니 아이템을 생성해 페이지를 렌더링해주었다.

 

장바구니 아이템 렌더링

 

 

728x90

 

---

 

 

3. 장바구니에서 수량 조절

 

장바구니에서 각 상품에 대해 plus 버튼과, minus 버튼을 누르면 수량 증감이 가능하도록 하기 위해 상품의 id로 로컬스토리지에 저장된 상품의 수량을 조정해주었다.

const item = basket.find(item => item.id == id);

 

 

먼저 상품의 id로 로컬스토리지에 저장된 데이터를 찾고, 저장된 수량 데이터를 plus 버튼을 누를 때마다 1씩 증가시키고,

minus 버튼을 누를 때마다 1씩 감소하도록 코드를 작성했다.

 

수량을 조정한 후 다시 로컬 스토리지에 데이터를 저장하기 위해 setItem을 이용해 데이터를 업데이트 해주었고,

마지막으로 카트 아이콘에 표시될 수량과 서버에 보낼 데이터를 업데이트 하기 위한 함수도 호출해줌으로써 기능을 완성할 수 있었다.

 

 

특히, 감소하는 상황에서는 해당 상품의 수량을 감소시키되, 최소 수량이 1에 머물러 minus 버튼을 누를때 상품이 삭제되는 일이 없도록 설정해주었다.

 

이에 Math.max를 활용해 최소 수량을 1로 잡았으며, 이외에는 1씩 수량이 감소할 수 있도록 해주었다.

item.quantity = Math.max(1, item.quantity - 1);

 

localStorage.setItem('basket', JSON.stringify(basket));

 

 

---

 

 

4. 장바구니 상품 총 가격 업데이트

 

장바구니 상품의 총 가격을 계산하는 코드는 서버 측에서 처리해주고 있다.

 

데이터베이스에서 가져온 상품 정보와 장바구니의 상품 정보를 items 배열이 담고 있으며,

reduce 메서드를 사용하여 items 배열에 있는 각 아이템의 가격과 수량을 곱한 값을 누적하여 총 가격을 계산한다.

 

 

reduce 메서드는 배열의 각 요소를 순회하며 누적값을 계산하는 데 사용하므로 총 가격을 계산하기에 적절한 메서드라고 판단했다.

const totalPrice = items.reduce((sum, item) => sum + item.pro_price * item.quantity, 0);

 

 

이렇게 totalPrice를 서버 측에서 계산하여 클라이언트 측으로 데이터를 전달하면 클라이언트 측에서 업데이트 함수를 호출해 실시간으로 수량이 업데이트 될 때마다 총 가격도 업데이트 되도록 해주었다.

 

 

---

 

 

5. 장바구니 상품 삭제

 

장바구니의 상품을 삭제하기 위해 로컬 스토리지에 저장된 상품 id를 활용해 filter 메서드로 배열을 순회하며 조건에 맞는 id를 찾아 상품을 삭제하도록 코드를 작성했다.

 

 

filter로 조건에 맞는 상품을 삭제한 후 다시 로컬 스토리지에 setItem으로 데이터를 저장함으로써 삭제 기능까지 구현햊었다.

let basket = JSON.parse(localStorage.getItem('basket') || '[]');

    basket = basket.filter(item => item.id != id);

    localStorage.setItem('basket', JSON.stringify(basket));

 

 

장바구니 기능