[Cloning Project] Namba1

eunnb05·2022년 6월 6일
1

Project : COOKIT 웹사이트 클론 프로젝트
Duration : 2주 (22.05.23 ~ 22.06.03)
Members : 프론트엔드 4명, 백엔드 1명

위코드 파운데이션 기간이 지나고 팀별로 1차 프로젝트를 진행하게 되었다. 우리 팀은 COOKIT이란 밀키드를 판매하는 e-commerce 웹사이트를 클론하게 되었고, 나는 상품 리스트 페이지와 상품 상세 페이지를 담당했다.

1차 프로젝트를 진행하면서 처음으로 시작부터 React js와 SASS를 사용하게 되었는데, 많은 개발자들이 리액트를 선호하는 이유를 알 것 같다.

이번 프로젝트를 통해 내가 느낀 리액트의 장점은 이러하다 :

  1. 재사용이 가능한 컴포넌트 (Components).

    실제로 우리 팀은 "components"란 파일을 만들어, 여러 페이지에 나타나는 요소들을 언제 어디서나 바로 재사용할 수 있도록 각각 다른 컴포넌트에 분리해놨다.

  2. Virtual DOM을 통해 빠른 화면 렌더링.

    수정이 필요한 부분이 있을 때 DOM 전체를 재렌더링 하는 것이 아니라, 교체될 부분만 렌더링이 되는 것이기 때문에 효율적이고 빠르다.

  3. 다양한 라이브러리 사용 가능.

    아쉽게도 이번 프로젝트에는 third party library 사용을 안 하고 진행하게 되었지만, 2차 프로젝트에는 라이브러리 사용을 할 수 있게 되어서, 이 부분을 매우 기대하고 있다.


나의 프로젝트 진행사항

  1. 프로젝트를 시작하기 앞서, 내가 가장 먼저 한 것은 Component tree를 구성하는 것과 쿠킷 웹페이지의 스크린샷을 찍어 컴포넌트로 어떻게 분리할 것인지 기획했다.

  2. 초기 레이아웃. 컴포넌트마다 해당 scss (SASS) 파일 생성하여 스타일을 더했다.

    Media Query, Grid layout을 사용해 반응형 웹을 구현했다.

  3. 기능 구현

    • Map 함수를 사용해 DB에서 받아온 상품 데이터만큼 컴포넌트가 반복되고 각 상품 정보가 컴포넌트에 적용된다.
      {menuCard.map(
           ({ id, name, serving, cookTime, spice, price, image }) => (
             <MenuCard
               key={id}
               id={id}
               name={name}
               serving={serving}
               cookTime={cookTime}
               spice={spice}
               price={price}
               image={image}
             />
           )
         )}
    • 삼항연산자로 버튼이 클릭 시, className이 적용되며 스타일을 더해준다.
    • JSX 안에 자바스크립트 사용.
    • 수량 및 가격 변경
  4. fetch 함수를 이용해, 백엔드와 데이터 통신.

    • Path Parameter, useParams() 사용
      상품 리스트에서 해당 상품 디테일 페이지로 이동할 때 사용.
    • Query Parameter, useLocation(), useNavigate() 사용
      상품 페이지에서 카테고리 및 상품 정렬, 검색 기능 구현할 때 사용.

결과물

0개의 댓글