🥾 닥터마틴 홈페이지 클론코딩
⏰ 개발기간 및 인원
- 개발 기간 : 2023년 1월 2일 ~ 2023년 1월 13일 (12일)
- 개발 인원 : FrontEnd (이진경(PM), 박채연, 김기윤), BackEnd (김승기(PM), 김동규)
👨💻 Developers
🖥 Front-End Developsers
- 이진경 (FE) 김기윤 (FE) 박채연 (FE)
💻 Back-End Developers
- 김승기 (BE) 김동규 (BE)
⚙️ STACK
🖥 Front-End
- JavaScript
- React
- Sass
- esLint
- Prettier
💻 Back-End
- JavaScript
- Nodejs
- MySql
- Rest
🔨 TOOLS
🗓️ Trello
📃 DB
✅ 구현 기능
1️⃣ 회원가입 / 로그인 페이지 (
- :: 기윤님
- 아이디 및 패스워드 유효성 검사 (아이디, 비밀번호 조건 확인 및 비밀번호, 비밀번호 확인 일치 여부 검사)
2️⃣ 메인 페이지
- :: 내 담당
- 메인 페이지 최상단 슬라이더 기능 구현
- 대륙 선택시 해당 대륙 국가 상품 필터링 기능 구현 & 상품 슬라이더 기능 구현
- 스크롤 이동 시 배경 고정 / 텍스트만 이동하는 기능 구현
3️⃣ 제품 상세 페이지
- :: 내 담당
- 사이즈, 그라인드방식, 수량 선택 후 장바구니 버튼 클릭시 백엔드 서버로 유저 데이터 전송
- 옵션 한개씩만 선택되고 선택된 옵션만 클래스 변경되는 기능 구현
- 상품 후기 펼쳐보기/접기 버튼 기능 및 더 보기 버튼으로 동적인 페이지 구현
4️⃣ Nav, Navslider, Footer 바
- :: 채연님
- 메인 페이지 내 카테고리 선택시 카테고리에 맞는 상품만 filter되는 슬라이더
- 햄버거 메뉴 (Nav 바와 연동되어 각 카테고리 버튼 클릭시 아래에 세부 카테고리 출력)
5️⃣ 제품 리스트 페이지
- :: 기윤님
- 제품이 정해진 레이아웃에 따라 재정렬되어 출력
6️⃣ 장바구니 및 결제
- :: 채연님
- modal 창에서 사이즈, 수량 선택 후 장바구니 담기 클릭시 백엔드 서버로 유저 데이터 전송
- 유저 정보 확인 후 백엔드 서버에 저장된 장바구니 데이터 불러와서 출력
- 삭제 버튼으로 장바구니 상품 삭제 기능
- 장바구니 및 결제창에서 선택한 상품들의 가격 총합계 및 포인트 차감 기능 구현
👉 구현영상
:: 메인페이지
:: 메인페이지_상품필터링
:: 제품 상세 페이지
:: 제품 상세페이지_후기
:: 예약페이지
회고
🥸 잘한 점
-
agile 방식으로 프로젝트 진행하기로 한 것이다. 주간 미팅때 필수 구현 사항부터 일주일 내 완성하기로 계획을 잡고, 추가 구현 사항은 다음 주간 미팅때부터 구현하였다. 구현하고 싶은 기능은 많았지만 처음부터 욕심부리다가 프로젝트를 완성하지 못하는 대참사가 벌어질까봐 agile 방식으로 기획해서 주어진 기한 내에 차질없이 프로젝트를 완성할 수 있었다.
-
상품 브랜딩이다. 클론코딩이지만 우리의 프로젝트에 브랜딩을 좀 더해보고싶어서 닥터마틴의 지속가능성이라는 브랜드 가치와 커피의 지속가능성을 결합해 브랜딩을 진행하였다.
🥹 아쉬운 점
1. Code Convention
첫 미팅때 공통적으로 사용할 component나 css 요소들을 자세히 나눠서 코드 컨벤션을 기획했어야했다!
겹치는 부분이 생길때마다 pr을 올려 공통요소를 추가하다보니 시간이 리팩토링하는 시간이 길어진 부분에서 아쉬다고 느껴졌다.
2. 다른 팀원의 코드 리뷰
다른 팀원들의 코드를 자세히 보지 못했다는 점도 아쉬웠다.
첫주에는 내가 맡은 기능을 구현하는 것에 몰두하다 보니까 다른 팀원분들이 어떤 식으로 코드를 짜는지 볼 정신이 하나도 없었다.
다음부터는 다른 팀원들의 코드도 보면서 나와 다르게 구현한 기능도 참고하고 적용시켜봐야겠다.
3. Trello 사용
우리 팀은 매일 아침 daily 미팅을 진행해서 어제까지 한 작업과 오늘 할 작업에 대해 얘기를 나눴다. 그러다보니 서로 작업 상황에 대해서 잘 알고 있다고 생각했고, trello 사용을 거의 하지 않았다.
구두로 소통하는것이 아니라 시각적으로 trello 티켓을 구체적으로 나눠서 서로 공유했다면 마감 기한에 어느 부분이 부족했는지 더 잘 파악할 수 있었을 것 같다.
레벨업한 순간들
이 프로젝트를 통해 기술적으로 배운 점은 백엔드와 통신을 해봤던 것이다.
지금까지는 페이지별로 코드를 작성했다면 이번 프로젝트를 통해 백엔드와 통신을하고 페이지 간 이동까지 경험해볼 수 있었다.
(여담이지만 백엔드와 통신하기 전까지는 매일 서버주소가 달라진다는 것도 몰랐고 백엔드의 pc가 꺼지면 서버가 꺼지는 것도 몰랐다!!😅)
Get 메소드를 통해서 받아오는 것뿐만 아니라 Post를 통해 서버에 데이터를 전달해주는 것까지 해봤는데 생각보다 어려웠다..! 데이터를 주고 받는게 끝이 아니라 데이터가 잘 들어왔을 때 리팩토링할 경우도 있었다.
이번 프로젝트에서는 우선 데이터들을 상수데이터로 만들고 나중에 fetch를 사용했는데, 다음 프로젝트에서는 Mock데이터를 적극 활용해서 서버 주소만 변경해서 바로 데이터를 받을 수 있도록 활용해봐야겠다!
Reference
이 프로젝트는 닥터마틴 사이트를 참조하여 학습목적으로 만들었습니다. 실무수준의 프로젝트이지만 학습용으로 만들었기 때문에 이 코드를 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제될 수 있습니다. 이 프로젝트에서 사용하고 있는 사진 대부분은 위코드에서 구매한 것이므로 해당 프로젝트 외부인이 사용할 수 없습니다.
