TIL
[1차 프로젝트] 마켓홀리 팀 프로젝트 후기
sodait
2021. 3. 28. 11:17
1. 프로젝트 소개
- 온라인 식재료 판매 커머스 마켓컬리 웹 사이트를 모티브로한 팀 프로젝트(Market Holy)
- 2021.03.15 ~ 2021.03.26 (2주)
- 프론트 4명 + 백엔드 2명
⚒ 기술 스택
Front-end
- HTML, JavaScript(ES6+), React, SCSS
⚙ 협업 툴
- Slack, Trello, Git & Github
👉 팀 배정을 받아 2주동안 마켓컬리 클론 프로젝트를 하게 되었다!
팀 배정 전 웹 사이트 투표할 때, 주로 깔끔한 UI 구조를 가진 사이트들에 투표하였는데,
마켓컬리 웹 사이트도 깔끔한 편이라 만족했다.
1-1 프로젝트 시작 전
팀원들과 이 사이트에서는 어떤 페이지가 필수적으로 구현되어야 하는지,
서비스 특징을 파악하여 필수 구현 페이지를 정하였다.
필수 구현)
- 회원가입/로그인 페이지
- 메인 페이지
- 상품 리스트 페이지
- 상품 상세(디테일) 페이지/Nav
- 장바구니 페이지
추가 구현)
- 마이페이지
- 결제페이지
- aside bar
- Footer
👉 CRA 초기세팅을 팀에서 마친 다음, 각자 clone 받아 브런치를 생성해 작업한 후, 하나씩 붙이는 식으로 진행하였다.
👉 팀원별로 작업 파트를 나눴고, 나는 그 중에서 회원가입&로그인 페이지를 맡게 되었다.
로그인 branch와 회원가입 branch로 나눈 다음, 각자 레이아웃 먼저 만들어 커밋하고
그 후 기능을 만들어 각각 다시 커밋하였다.
😉 혼자 할 때보다 이번 팀 프로젝트를 진행하면서 git을 더 많이 쓰게 되었는데,
이로 인해 조금이나마 git에 더 익숙해진 것 같아 좋았다.
2. 프로젝트 협업을 위한 Trello 사용
👉프로젝트 시작 단계)
- Backlog : 프로젝트에 필요한 모든 것
- This Week : 이번주 안에 해야할 것
- In Progress : 현재 작업중인 것
- Done : 완료한 것
기본적으로 이렇게 4가지 보드로 나누고 시작!
색상을 통해 프론트 / 백엔드 구분!
각 맡은 페이지마다 한 사람씩 할당하였고, 그 안에 각자 해야 할 것들을 체크리스트✅로 작성하였다.
👊프로젝트 완성 단계)
이후에는 보드가 몇 가지 더 생성되었다.
- Data Name List : key 값 등 프론트엔드와 백엔드의 데이터를 맞추기 위해 공유
- Common CSS : 공통 css style 속성(color, font..)
- Bug : 거의 완성되었으나 자잘한 bug 해결 못했을 경우
😁사실 이전에 Trello를 사용한 적은 있지만, 별로 효율적으로 쓰지 못했었는데, 이번 프로젝트를 통해 협업하면서 Trello를 어느정도 잘 활용하게 된 것 같아 좋다.
😶살짝 아쉬운 점은 처음에는 Trello를 신경쓰다가 나중에는 서로 기능 구현하느라 바빠지면서 Trello가 뒷전이 된 상황들이 좀 있어서 조금 아쉬웠다고 팀원들끼리 얘기가 나왔었다..ㅎㅎ
다음 프로젝트에서는 좀 더 Trello로 활용을 잘 해보도록!
3. 내가 구현한 페이지
1) 로그인&회원가입 페이지
* 이메일/비밀번호 등 각 유효성 검사
- 이메일, 비밀번호 input 값 입력 시, 하단 주의 문구
- 회원가입 모든 input 값 입력 시에만 회원가입 가능
* 정규식 표현 로직
- 이메일: 영문+ @ + . 포함(.이후 영문 2-3자)
- 비밀번호: 10자 이상, 핸드폰: 숫자 10-11자까지
- 생년월일: - 포함 숫자 8자까지
* 회원가입 약관동의 data json파일로 분리
* Daum Postcode 주소 API 사용하여 주소 값 입력
* localStorage의 token을 사용하여 로그인 기능 구현
* fetch를 사용하여 백엔드 api 호출
* Class component 사용
2) Footer 레이아웃
- 공통 Component로 Footer 구현 (React icon 사용)
3) 결제 페이지
- 레이아웃 구현 & Mock Data 활용까지는 했으나 시간상 최종 구현까지는 하지 못했다.
👉로그인&회원가입, Footer까지 마치고 이후 남아있는 결제 페이지를 맡게 되었다.
애초에 추가 구현 사항이었고, 결제 API를 아직 넣지도 못했으며, 백엔드에서도 아직 다른 필수 구현 사항들과 맞춰봐야할 것들이 많았다. 프로젝트에서는 페이지를 많이 구현한다고 좋은 게 아니라 하나를 구현하더라도 좀 더 정확하게 알고 공부해 보는 것이 중요했기 때문에 결제 페이지는 취소되었다.
😆프로젝트 막바지에 최종 merge를 하면서 팀원 간에 맞춰봐야 할 것들도 많고, 버그들도 수정할게 많아지면서 결제 페이지에 대한 아쉬움은 사라졌다.
Review👀
우리 팀은 프론트-프론트끼리도, 프론트-백엔드 간에도 소통이 잘 되었다고 생각한다.🤝
다들 첫 프로젝트지만 서로서로 좀 더 즐겁게 하려고 노력했던 것 같다.😀
그치만 확실히 혼자 구현할 때와는 다르다.
혼자할 때와는 다르게 조금이라도 소통이 덜 된 부분은 이후 작은 문제라도 발생하는 것 같다.😅
특히나 백엔드와 소통하고 통신할 때는 신기하고 재밌으면서도 어렵다.
아무래도 백엔드와는 서로 뭐가 있는지 없는지 잘 모르기 때문에 더 그런 것 같다.
사소한 부분도 간과하지 말고 더욱 적극적인 소통이 중요하다는 것을 크게 느꼈던 것 같다. ❗