React | 프립 클론 프로젝트

2nd TEAM Project

1차 프로젝트였던 마켓컬리 클론 프로젝트가 끝나고 곧이어 진행되었던 2차 프로젝트에서는 여가, 액티비티 공유 플랫폼인 프립을 클론하게 되었다. 이전 프로젝트 때 화면 구현조차 완벽하게 하지 못해 아쉬운점이 너무 많았고 2주 간의 프로젝트 기간 외에 추석연휴 1주가 포함되어 있어 사실상 3주라는 시간이 주어졌기에 개인적으로 많은 욕심이 났던 프로젝트이다.
하지만 예상치 못한 여러 난관들로 인해 이전 프로젝트 못지않게 많은 아쉬움을 남기고 마무리 했어야만 했던 두번째 팀프로젝트를 회고해보려 한다.

작업기간🔥

2021.09.13 ~ 2021.10.01 (추석 연휴 1주 제외)

기술스택

FE : 3명

• React
• Javascript
• Styled Component

BE : 3명

• Django
• Python
• MySQL
• jwt
• AWS S3, RDS, EC2

구현사항

본인이 구현한 기능은 ✅로 표시했다.

공통

✅ styled component 사용하여 레이아웃 구현
✅ 동적 라우팅을 사용한 페이지 이동

1. 메인페이지

✅ react-slick-slider 라이브러리 사용하여 배너 슬라이드 구현
✅ fetch API와 React Hooks 사용하여 서버 데이터 전달받아 map() 메서드 사용하여 카테고리 리스트 구현
✅ 반복되는 컴포넌트 레이아웃 구현 후 map() 메서드 사용하여 메인페이지 구현
✅ 모달창으로 은행, 계좌번호 입력받아 서버에 저장
◻︎ 카카오 소셜 로그인 기능 구현

2. 상세페이지

◻︎ 메인페이지, 리스트페이지 상품 클릭에 따른 동적인 상세페이지 렌더링
◻︎ 상세페이지 상품 및 리뷰 이미지 슬라이드 기능 구현
◻︎ 카카오 지도 API를 이용하여 (진행 장소 및 모이는 장소) 지도 구현

3. 리스트페이지

◻︎ 카테고리 페이지 API 이용하여 제품 렌더링
◻︎ 카페코리 페이지 필터 함수를 이용하여

4. 상품등록페이지

✅ react-daum-postcode API 사용하여 다음지도 활용한 주소찾기 기능 구현
✅ 이미지 업로드 기능 구현
✅ formData에 업로드된 이미지 담아 axios 를 통해 서버에 저장
✅ AddProduct(부모컴포넌트)의 callback 함수 이용하여 Postcode(자식컴포넌트)에서 저장된 데이터 부모 컴포넌트로 전달하여 사용

Project Review

새로운 기술 스택 사용 경험

2차 프로젝트가 시작하면서 여러가지 부분에 대한 제약이 있었다. 이전에 사용하던 클래스형 컴포넌트, sass 대신 함수형 컴포넌트와 Hooks, Styled component 를 사용해야만 했다. 이제 막 익숙해지려던 차에 새로운 기술을 사용해야하다 보니 처음에 적응하는데 다소 어려움이 있었다. 일정이 다소 지체되었지만 이전에 사용하지 못했던 라이브러리를 사용할 수 있게 되면서 업무를 간소화하여 일정을 맞출 수 있었다.
이전이었다면 귀찮아서, 두려워서 익숙한 기술들 위주로 학습을 계속 했었는데 이번 프로젝트를 통해 새로운 기술 스택을 사용하는 경험을 할 수 있었다. 코드몽키로 도태되지 않고 스스로 생각하고 기획할 수 있는 개발자가 되기 위해서 클론코딩과 더불어 특정 기술과 코드에 얽매이는 습관을 버려야함을 느꼈다.
JavaScript와 같은 기본 기술에 항상 충실하되 끊임 없이 새로운 기술 스택을 접하고 적용해보면서 발전해 나가는 개발자가 되기 위한 토대를 얻을 수 있었다.

더 나은 협업 경험

1차 프로젝트 막바지에 Trello를 통한 일정관리에 대한 이점을 느꼈는데 2차 프로젝트에서는 이런 점을 반영하여 더욱 적극적으로 tool을 사용했다. 페이지와 기능들을 필수구현, 추가구현으로 세부화하여 더욱 촘촘하게 전체 일정과 세부일정을 계획하였고 프로젝트 기간을 효율적으로 활용할 수 있었다.
더불어 git rebase를 적극적으로 활용하여 git을 활용한 더 나은 버전관리를 수행할 수 있었다.