1차 프로젝트 후기 - The Picker Project

ddoni·2021년 1월 24일

위코드

🌎The Picker Project

위코드 1차 팀 프로젝트로 친환경 제품을 판매하는 The Picker 웹 사이트 클론을 진행하였다. 2주동안 프론트엔드 2명 백엔드 1명이서 작업한 프로젝트이다.

전체 코드는 깃헙에서 확인 가능합니다✨

(https://github.com/wecode-bootcamp-korea/Wepicker-frontend)

사용된 기술 스택

Front-end

React, Sass, HTML/CSS, JavaScript, Create-React-App, Slick-slider, React-router-dom, RESTful API

구현한 페이지

(* 표시된 부분이 제가 구현한 페이지 입니다.)

메인 랜딩페이지
로그인/회원가입 페이지
베스트 제품 *
상품 리스트 페이지 *
상품 상세 페이지 *
위시리스트 *
장바구니

기록하고 싶은 코드

베스트 제품 페이지

사이트는 베스트 제품 리스트를 메인페이지에서 슬라이드 형태로 보여주는데 우리 팀은 메인에서도 보여주고 상품 리스트 페이지의 상단 부분에도 보여주면 좋겠다 생각하여 공통 컴포넌트 부분으로 분리하여 작업하였다. 슬라이드 기능은 구현해 본적이 없어 slick-slide library를 설치하여 사용하였다. 기본적인 세팅은 공식문서 내용을 참고 하였는데 막연히 third-party library 사용에 겁을 먹었는데 생각보다 어렵지 않게 구현되어 앞으로도 더 많이 다양한 라이브러리를 사용해보고 싶다.

slick-slider library에는 원하는 슬라이드의 기능을 구현하기위해 컴포넌트 내에 요소값을 추가해줘야하는데 객체 타입으로 선언하고 계산된 속성명을 사용해주면 훨씬 깔끔한 코드 작성이 가능하다

상품 리스트 페이지

상품 리스트 페이지내에는 등록순, 인기순, 낮은가격순 등 상품리스트를 필터링하여 데이터를 불러오는 필터 역할을 하는 select 태그가 있었는데 선택된 옵션에 따라 다른 api 데이터를 불러오도록 하기 위해서 객체로 선택옵션의 이름 - api 주소 짝지어 선언한 후 Object.entries로 이중배열로 만든 후 map을 돌려 옵션들이 리턴되게 하였다.

페이지네이션

페이지네이션은 백엔드에서 데이터를 전달해줄때 maxpage를 보내주어 이를 이용하여 페이지버튼을 생성해야했다. 어떻게 해야하나 감을 못잡다가 멘토님께서 maxpage 값으로 전달되는 수를 이용하여 배열을 생성하고 인덱스를 이용하여 버튼을 생성하도록 하였다. 생소한 문법이지만 생각보단 코드로는 간결하게 구현되어 신기한 부분이였다.

아쉬운 부분

프로젝트 기간 중 거의 반은 상세페이지를 구현하면서 보냈던 것 같다. 상세페이지에는 생각보다 많은 기능이 있었고 처음 백엔드와 소통을 하지 않고 내가 만든 mock data를 기준으로 레이아웃과 기능을 구현하다보니 이후에 백엔드 데이터가 완료되어 실제 api 데이터를 받아올때에는 key값을 수정하는 것은 물론 상태값 관리를 다시 수정해야 되서 예상보다 더 많은 시간이 소요되어 많이 아쉬운 부분이 있다.

상세페이지에서 선택된 옵션을 상태 값에 저장하기

더피커 사이트는 상품에따라 옵션이 있고 없고 선택을 해도되고 안해도 된다. 그렇기 때문에 선택된 옵션을 상태값에 저장하고 중복된 옵션을 또 선택할 경우에 중복 저장이 되지 않도록 걸러지는 것이 중요했다. 이벤트가 발생하는 선택된 값을 기준으로 데이터를 일일히 필터링 하여 데이터 상태를 업데이트 하였는데 이부분은 넘나 하드코딩 방식인 것 같아 리팩토링 시 꼭 수정해보고 싶다.

수령방식과 택배비

상세페이지에선 택배인지 방문수령인지, 택배비가 선불인지 착불인지 선택하는 select 2개가 있었는데 처음 구현할때 각각 이벤트를 주어 각각의 상태로 저장하였다. 그런데 장바구니 버튼 클릭시 백엔드 서버로 post 요청을 보낼때에 이부분은 하나의 값으로만 전달해달라는 요청을 받았다. 각각의 select는 독립된 관계가아니라 첫번째 select의 값에따라 두번째 select를 골라야하거나 안골라도 되는 상황이라 main select - sub select 관계였다. 결국은 부족한 시간으로 각각의 값을 배열형태로 백엔드로 보내기로 협의하였다. 더 좋은 형태로 보내줄수 있는 방법이 분명 있을텐데! 무작정 내가 짠 방식대로 맞춰달라고 요청한거 같아 아쉽다.. 꼭 이부분도 리팩토링 단계에서 수정할 예정이다.

1차 프로젝트 후기

처음 1차 프로젝트를 시작하면서 위코드에서 개인적으로 가장 중요하다 생각하는 단계인 프로젝트의 PM을 한번쯤은 맡고싶어서 PM 지원하게 되었고 PM을 담당하게 되었다. PM으로써 많은 역할을 했다고 생각하진 않지만 너무 좋은 팀원분들을 만나 아쉽지만 만족스런 결과를 낼 수 있었다고 생각한다! 팀 프로젝트를 시작하면서 많은 것을 욕심내지 않고 팀원 모두가 해낼 수 있는 결과로 agile하게 진행하는 것으로 초점을 맞췄는데 더 세세한 부분을 신경쓰지 못한 것에는 아쉬움이 든다. 이 아쉬움을 바탕으로 2차 프로젝트로 잘해보고 싶다!!😊