[팀프로젝트] Lush clone-장바구니 & config

▶︎ 장바구니

구현기능

• 인가(Authorization), 조건부렌더링, config파일

▪︎ Authorization

Cart.js

---

  componentDidMount() {
    fetch(`${API.CART}`, {
      headers: {
        Authorization: localStorage.getItem('token'),
      },
    })
      .then(res => res.json())
      .then(inCart => {
        this.setState({ isEmptyCart: inCart.cart_list });
      });
  }

---

제일 먼저 시작되는 함수 componentDidMount를 통해 서버에 유저의 인가를 확인하여 장바구니의 정보를 가져오는 것이다.
유저가 요청한 request를 실행 할 수 있는 권한이 있는 유저인지 확인하는 절차는 헤더에 담아서 서버에 보낸다.
이때, 토큰은 localStorage에 저장했기 때문에 여기에는 getItem을 적용한다.
유저가 확인되면 장바구니에 대한 정보를 전달 받는데, 여기서 유저가 장바구니에 상품을 담을 때마다 바뀌기 때문에 setState 적용했다.

▪︎ 조건부렌더링

Cart.js

---

{isEmptyCart.length > 0 ? <OrderTable /> : <EmptyCart />}

---

1. 아직도 어려운 조건부렌더링.
   장바구니에 상품이 없을 때와 있을 때의 보여지는 화면이 다르기 때문에 조건부렌더링을 적용했다.
   isEmptyCart는 빈배열로, 요소가 1개 이상이어야지 OrderTable을 보여준다는 삼항연산자를 사용했다.
   사실 여기서 빈 장바구니를 Cart 파일에 구현했다면 더 짧아질 수 있었다.

{isEmptyCart.length > 0 && <OrderTable />}

그러나 빈 장바구니도 API를 만들었기 때문에 조건부렌더링을 적용했다.

▪︎ config.js

URL 주소를 변수에 담아 모든파일에 적용되도록 하여 유지보수에 용이

config.js

---

const BASE_URL = 'http://3.34.96.53:8000';

export const API = {
  BASE_URL: `${BASE_URL}`,
  PRODUCT_DETAIL: `${BASE_URL}/products`, // search_result
  SEARCH: `${BASE_URL}/products?search=`,
  SIGNUP: `${BASE_URL}/users/signup`,
  SIGNIN: `${BASE_URL}/users/signin`,
  CART: `${BASE_URL}/carts`, //  post & get
  REVIEW: `${BASE_URL}/reviews`, // 상품리뷰 하나보기
  TOTAL_REVIEW: `${BASE_URL}/products/reviews`, // 상품리뷰 전체보는거
};

---

서버의 아이피 주소가 변동되는 경우가 있기 때문에 config.js 로 한번에 관리하는 것이다.

덕분에 이렇게 적용함으로써 유지보수에도 용이하고, 가독성도 좋다는 사실!
앞으로도 좋은방향으로 성장했으면 좋겠다.

---