React.js 로 '아니메 전시' 앱 만들기.

Side project title.

Anime Biased Exhibition Room

 

Description.

본 사이드 작업물은 react.js 로 카트 기능을 구현하기 위해 필요한 기능을 구현 해 보는 것에 목적을 두고 진행하였습니다.

컨셉은 '분기별 추천작'을 앱 관리자가 선별 하여 나열 해 둔 것을, 방문자가 마음에 드는 아이템을 몇 개 북마크 하도록 버튼을 클릭 해서 Bookmark 메뉴란에 저장되게 합니다.

 

이러한 기능을 구현하고자 react cart 를 구성하는 것을 목적으로 구글링 하며 조사 하던 중, useContext, createContext 를 접목하였습니다. 이는 props 의 보일러플레이트 같은 형태의 코드 구성을 피하고, 파일별로 접근이 용이할 필요 및 높은 직관성 및, 코드 구성의 전체적 흐름 파악에 편리함이 마음에 들어 해당 hook 개념과 함께 작업을 진행 해 보았습니다.

 

총 작업시간 : 4일

 

Limitation.

실제로 전산상의 거래가 가능케 하기 위해서는 여러 법적 절차라는 기능적 구현에 초점을 맞춘 것과는 괴리감이 크므로, 작업 도중 '에디터 픽! 선택해서 북마크 후, 원하는 사이트로 이동!' 이라는 구상안과 함께 진행되었습니다.

 

Environment.

본 사이드 작업물을 구동 하기 가장 이상적인 환경은 Chrome 브라우저의 최신 버전입니다.

 

Prerequisite.

본 코드를 실행하기에 앞서, 터미널에서 다음의 명령어 실행 및 설치가 요구됩니다.

npm install react-icons --save

react-router-dom 이 사용되었으며, 본 코드의 React 버전은 18.2.0 입니다.

 

Files

DataContext.js

핵심파일. 해당 파일에 주요 구성을 몰아 두고, 아래의 파일 개별마다 필요 기능을 불러 올 수 있도록 구성 하였습니다.

개인적으로 가장 만족했으며, 앞으로도 사용 할 의사가 있는 hook.

 

전역 사용시, react-query 사용 하듯이 wrapping 하여 사용 가능합니다.

 

ItemsList.js

각 item 별 데이터가 저장되어 있는 배열 형식의 데이터 리스트 입니다. 

 

Your Item = Cart.jsx, CartItem.jsx

Editor's Pick = Goods.jsx, Shop.jsx

 

새로이 겪은 문제점 및 개선사항.

1. DataContext.js 내부에서 item 의 좋아요 수의 표시 중, 마지막 아이템에서 indexing 문제가 발생하였습니다.

- Limbus company 의 좋아요 수가 NaN 으로 표기되는 문제를 다음과 같이 수정하였습니다.

// Before
const getDefaultCart = () => {
  let cart = {};
  for (let i = 1; i = ItemsList.length; i++) {
    cart[i] = 0;
  }
  return cart;
};

// After
const getDefaultCart = () => {
  let cart = {};
  for (let i = 0; i <= ItemsList.length; i++) {
    cart[i] = 0;
  }
  return cart;
};

2. 직관성 있게 보이도록 default 값으로 통합 가능한 코드의 일부를 재구성 하였습니다.

// before
export const DataContextProvider = (props) => {
  const [cartItems, setCartItems] = useState(getDefaultCart);

const checkout = () => {
   setCartItems(getDefaultCart());
};

  const contextValue = {
    cartItems,
    addItemToCart,
    removeItemFromCart,
    updateCartItemCount,
    checkoutTotalSum,
    checkout,
  };


// after
export const DataContextProvider = (props) => {
  const [cartItems, setCartItems] = useState(getDefaultCart());

향후 개선점.

Code Spliting (bundled) 을 적용해보고자 합니다. (Client side 에 한정해서 사용가능 하므로)

State 를 LocalStorage 내에 저장 함으로서, 새로 고침 이후에도 북마크 내용이 유지되도록 하는 것.

 

향후 개선 시, 잠재적 기능.

- 좋아요가 많을 수록, 지출 금액이 커진다는 경고 문구 구현 (예: 좋아요 +1, 낮음. 좋아요 +3, 과소비 확률 다소 높음).

- 마우스 커서가 호버링 된 시간이 길어 질 수록, 관심이 많다고 판단하여, 해당 아이템을 좋아요 +1 해도 '과소비 확률이 높게' 표시 되는 것.

 

링크.

GitHub - mireu-san/react-cart-system: Work in progress. This repository is to test out and demonstrate the use of useContext, cr