[우테코] 장바구니 미션 - 2단계 정리

2단계 회고

이번 미션에서는 redux를 활용해서, 관리할 데이터의 개수가 많아서 머리가 복잡스러운 한주였다.

이 데이터는 redux에서 관리해야할지, state로 관리해야할지, 서버에서 관리해야할지, const 변수로 관리해야할지 고민하고 결정하는 과정이 힘들었다.
추가적으로 장바구니 페이지에서 컴포넌트를 분리하고 구현하는데 은근 까다로운 부분들이 있었다.
(예를 들어 체크 박스라던가.. 체크 박스라던가... ✔︎)

추가적으로, 하나의 기능을 구현하면 다른 곳에서 에러가 나오고
뭔가 해결 된 것 같다 싶다가도 의도대로 동작하지 않는 부분이 존재해서 마지막까지 힘들었다 🥲

컴포넌트 분리

이번 미션은 장바구니 페이지를 구현하는 것이였다.

최종적으로 나눠진 컴포넌트는 위의 그림과 같다.

저번주에 이어진 고민인 button의 styled-component을 어떻게 활용해야하는지가 이어졌다.

이번 한 주 동안 주변에 컴포넌트를 어떻게 나눠야 하는지, styled-component의 역할에 대해서 계속해서 의견을 물어보고 다녔는데 styled-component도 컴포넌트 라는 말이 제일 와 닿았다.

styled-component는 스타일링을 위한 수단이긴 하지만, 컴포넌트를 생성하는 도구이기도 하다.
그렇게 때문에, styled-component로 스타일링을 준 버튼을 만드는 것도 컴포넌트로 분리하는 것이라고 생각하기로 했다.

데이터 관리

이번 미션에서 관리해야할 데이터는 크게는 1단계에서도 썼던 productList, productDetail
그리고 이번 2단계에서 새롭게 들어온 cartList 이렇게 3가지가 있었다.

2단계에서는 MSW 를 통해서 mock api를 직접 구현해서 작성해야 했다. 그래서 서버쪽에서 어떤 식으로 처리를 해서 정보를 넘겨 줄 것인지도 스스로 가정해서 정해줄 수 있었다.

그만큼 자율성이 주어지긴 하였지만, 리액트의 경험이 많지 않아서 어떻게 정보들을 관리해야하는지 머리가 아팠다.

state, redux 또는 전역변수로 관리할 것인지가 다 생각을 했어야 했다.

결론적으로 아래의 방식대로 관리하게 되었다.

productList , product

상품 정보 리스트의 경우,
메인페이지인 상품 리스트 페이지를 방문할 때마다 서버에서 정보를 요청에서 받아오는 형식으로 진행이 되었다.
product의 경우에도 product 상세 페이지에 접근할 때에 param을 활용하여 상품 id값을 가져와
서버에 product의 상세 정보를 받아오도록 처리하였다.

cartList

장바구니 상품 리스트의 경우, redux를 활용해서 데이터를 관리하였다.
장바구니에 상품을 추가하는 이벤트(=cartbutton 클릭, 상품 상세 페이지 내에서의 장바구니 담기 버튼 클릭, 장바구니 페이지 내에서 ▴ 클릭) ,
상품을 삭제하는 이벤트 (= 장바구니 페이지 내에서의 상품 삭제버튼 클릭, ▾ 버튼 클릭 등의 이벤트) 가 발생하였을 때마다 dispatch를 하여 cartList store의 정보를 업데이트 했다.

그리고, 장바구니 페이지에 접속했을때 , 저장된 cartList의 정보를 토대로 유저가 추가한 장바구니 정보들을 보여주어야 했다.
또한 새로고침을 하여도 정보가 날아가지 않은 채로 보여주어야 했따. 그래서 cartList에 변동이 있을 때마다 서버에 해당 cartList를 전송하여 서버 내에서 저장하도록 하였다.

그래서 cartList의 경우 최초 렌더링 시에 서버에서 저장된 cartList의 정보를 받아와 보여주는 방식으로 진행되어야 한다.

checkList

장바구니에서 체크된 상품들을 토대로 총 상품 금액과 상품 수량을 보여주어야 했다. 그래서 어떤 상품이 체크되었는지 정보를 관리해야할 필요가 있었다.
해당 정보를 어떻게 관리를 해야할지 고민이 많았다.
서버에서 checkList를 관리하는 경우에, 너무 과도한 서버 요청이 이루어지는 것이 아닌가 싶었다.

그리고 서버에서 관리하게 된다면, 기존에 있는 productList에서 isChecked라는 속성을 추가해서 관리해야할 텐데 불필요한 정보를 담고 있다고 생각이 들었다.

그래서 checkList의 경우, 장바구니 페이지(=Cart component) 내에서 state로 관리하고
checkbox 클릭 이벤트가 발생할 때마다 state를 업데이트 하도록 하였다.

productInfoList

이 List는 cartList 에 저장된 상품의 id들을 토대로 서버에 장바구니 페이지에서 보여줄 상품 상세 정보를 (수량을 포함한!)을 저장하는 곳이다.

사실, 해당 List가 필요할 것이라고 처음 부터 예상하지 못했다.
하지만 cartList에서는 상품의 id와 quantity를 가지고 있고, productList에서는 상품의 이름과 썸네일 url, 가격 정보를 가지고 있었다.

그리고 장바구니 페이지에서는 두 가지 정보를 조합하여 유저에게 보여주어야 했다.

이 처리를 프론트단에서 해야할지, 서버에서 처리를 해줘서 보내준다고 가정을 해야할지 고민이 되었다.
최종적으로는 (시간 부족 등과 같은 문제점으로..😢) cartList에 저장되어 있는 장바구니 id리스트들을 보내면 productList와 cartList에 있는 정보를 조합해서 productInfoList로 보내주는 방식을 채택하게 되었다.