Project Overview

Wecode 1차 프로젝트 오늘의 집 클론 SweetHome이 마무리가 되었다.

우리 팀은 천만 회원을 보유한 국내 최대 인테리어 플랫폼 오늘의 집 을 프로젝트로 진행하게 되었다.
다양한 카테고리의 상품과 사용자 깔끔한 UI/UX 구조가 인상 깊었고 쉽지는 않겠지만 React로 구현을 해보면 많은 것을 배울 수 있을 거 같았다.

우리 팀은 유저가 사이트를 방문 했을 때 기본적으로 회원가입부터 상품 구매까지의 하나의 cycle 의 서비스를 제공할 수 있는 것을 목표로 정했다.

오늘의 집 클론 코딩

Team SweetHome

SweetHome - 오늘의 집 클론 코딩 시현 영상

Github

https://github.com/playck/17-1st-SweetHome-frontend

프로젝트 기간

2021.2.15 ~ 2021.2.26

기술 스택

프론트엔드 3명

• React
• React Router
• Sass
• Restful API
• Git

백엔드 4명

• Python
• Django
• MySQL
• Git
• AQueryTool
• Bycrypt / JWT
• RESTful API

협업 Tool

• Notion
• Slack
• Trello
• GitHub

구현 페이지 Cycle

회원가입/로그인 - 메인 페이지 - 상품 페이지 - 상품 디테일 페이지 - 장바구니

주요 구현 사항

⚡︎ 내가 구현한 기능!

• access token를 활용한 회원가입, 로그인 기능
• 공용 Navbar / Foooter 레이아웃 구현
• 메인 페이지 레이아웃 구현
• QueryString을 활용한 메인 페이지 피드 필터링 기능
• ⚡︎ 상품 페이지 레아아웃 구현
• ⚡︎ 가격순, 리뷰순 등 ordering 기능
• ⚡︎ Path parameter을 활용한 특정 상품의 페이지로 이동 기능
• ⚡︎ 상품 디테일 페이지 레이아웃 구현
• 해당 상품 리뷰 리스트 레이아웃 구현
• 리뷰 쓰기 기능
• ⚡︎ 장바구니에 주문 상품 담기 기능
• 장바구니 레이아웃 구현
• 장바구니 주문 상품 수량 변경 및 결제 요청

최종 결과물

우리 SweetHome 의 피, 땀, 눈물

1. 회원가입과 로그인
   

2. 메인페이지 피드 필터링 기능
   

3. 상품페이지 상품 정렬 기능
   

4. 상품디테일 페이지 / 상품 정보, 리뷰, 장바구니 기능
   

5. 장바구니
   

Project Review

Project 시작

PM이 되었다. ㅎㅅㅎ
PM의 역할에 대해 많이 고민하지도 못하고 험난한 코딩에 이리저리 치여 제 역할이 부족한 PM이였지만 너무나 좋은 팀원분들과 함께하여 그 부족함들을 같이 채워줘서 무사히 정말 재밌게 끝까지 마무리 할 수 있게 되어 고마움이 진짜 너무 크다.
2주 동안 모두 전력을 쏟고 많이 배웠기 때문에 충분히 멋진 프로젝트라고 본다.

배운 점

하나를 배우더라도 정확하게

• 배웠던 기술들을 전체적으로 다시 활용해보면서 React의 구조와 기본을 좀 더 명확하게 익히고 내가 놓치고 있던 부분들이 무엇이었는지 알수 있게 되어 좋았다.
  초기 세팅(CRA) 및 동적 라우팅, 쿼리스트링 등 다양한 기술을 새로 배우고 적용해 볼수 있어 좋았다.

협업 프로젝트의 코딩

• 팀으로서의 협업과 특히 백엔드와의 협업에 대해 많이 배우게 되었다. 단순히 개인만의 코드가 아닌 백엔드 데이터와의 소통을 위한 코드를 고민하고 적용해 볼 수 있어서 좋았다.

아쉬운 점

나의 역량에 맞는 현실적인 목표를 세우자

• 프론트엔드 3명에서 업무 분담을 할 때 cycle 순서대로 페이지를 넘기면서 간단하게 페이지를 나눴는데 2주동안 구현함에 있어서 정말 힘들었다.. 추가 구현 페이지로 결제, 마이 페이지도 있었는데 전혀 신경 쓰지 못했다.
  업무 분담에 있어 개인적인 역량에 좀 더 명확히 파악하고 한 페이지를 클론 하더라도 그 페이지의 구조와 구현 방식에 대해 더 깊게 고민 하고 시작 했다면 좋았을 거 같다.

• 무작정 코드를 써내려가는 것보다 내게 주어진 시간과 역량에 맞게 작업 과정과 시간 분배를 정하는 것이 정말 중요하다고 몸소 배웠다.

기능 구현에 치중하여 못한 리팩토링

• 2주차 때 "하루만 더 있었으면 좋겠다" 라는 말을 했다.
  2주라는 기간동안 가능한 기능 구현에 대해 신경만 썼더니 점점 코드가 투박해지고 리팩토링에 시간을 할애 하지 못했다. 기능 구현도 좋지만 개발자로서 좋은 코드를 고민하고 구현하는 것이 더 중요하다고 생각한다. 프로젝트는 마무리 되었지만 코드에 대한 리팩토링을 계속 하여 완성도를 높여보도록 하겠다.

협업 Tool의 활용

• 매일 스탠딩 미팅으로서 팀원들과의 소통은 좋았지만 Trello 활용을 좀 더 잘했으면 좋았을 거 같다. 단순히 게시를 위한 Trello 카드가 아닌 효율적인 협업으로서의 카드 제작 및 관리를 한다면 원활한 소통에 도움이 될 거 같다.

팀 프로젝트 후기

짧은 시간동안 정말 즐거웠고 뿌듯했다. 다들 정말 힘들었겠지만 싫은 소리 없이 서로 정말 따뜻하게 대해주고 재밌는 분위기 속에서 프로젝트를 했던 기억만 남았다. 개인적으로 코드만 보는 시간이 아닌 함께하면서 협업의 팀원으로서 정말 중요한 소통, 배려를 배운 값진 시간이었다.

이거 진짜 어떻게 구현하지? 하다가 결국 진짜 구현해버리는 파서블 민주님!
맡은 부분은 몸을 갈아서라도 만들어 버리는 상남자 Navbar 장인 진석님!
항상 통통튀면서 분위기도 살리고 우리 팀 식사 메뉴 픽담당 스윗만땅 채현님!
정말 착하고 프론트를 많이 배려해주시는 프론트 상처 담당 치료사 수아님!
0과 1의 사나이 하지만 항상 우리팀한테 1(True) 이었던 재현님!
앞으로도 SweetHome을 못 잊을 SweetHome에 홀릭된 애교쟁이 준하님!

모두 정말 고마워요!! ㅎㅅㅎ/ ♥️