>wecode 27th 2팀 'Dr.Tart'

개발기간

2021/11/29~2021/12/10

팀원

Frontend : 길도연 홍유진 김상훈

Backend : 성주호 박정현 유민혁

서비스 소개

• 일상에 지친 당신을 위한 디저트 솔루션 ! 닥터타르트는 당신에게 딱 맞는 디저트를 처방해드립니다.
• 글로벌 코스메틱 기업의 포털 사이트 닥터자르트를 클로닝한 프로젝트 Dr.Tart 입니다!
• 짧은 프로젝트 기간동안 개발에 집중해야 하므로 디자인/기획 부분만 클론했습니다.
• 개발은 초기 세팅부터 전부 직접 구현했습니다.

기술 스택

Front-End : JavaScript, React.js, sass, React-router-dom

Back-End : Python, Django, MySQL, Miniconda

협업 툴

Common : Git, Github, Slack, Trello, Notion

구현 기능

User

• 이메일 유효성 검사 및 비밀번호 조건부여 회원가입
• bcrypt 비밀번호 암호화
• 로그인시 JWT 토큰 발행 및 토큰 검사
• 회원가입시 계정 중복 확인

Product

• 제품 목록 조회
• 제품 상세 정보
• 제품 정렬 (top5,찜하기 많은 순)
• 제품 찜하기

Order

• 장바구니 추가,삭제 기능
• 결제 진행 페이지 구현(제품 상세페이지에서 즉시 구매, 장바구니 아이템 구매)
• 주문 생성 후 주문 내역 페이지 구현
• 주문 취소 후 주문 상태 업데이트 구현

Full Demo

Resource

1. 홈페이지 - 배포 전
2. Frontend Github
3. Backend Github
4. Trello
5. Notion
6. 백엔드 API 명세서

---

Reference 이 프로젝트는 닥터자르트 사이트를 참조하여 학습목적으로 만들었습니다.
실무수준의 프로젝트이지만 학습용으로 만들었기 때문에 이 코드를 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제될 수 있습니다.
이 프로젝트에서 사용하고 있는 사진 대부분은 직접 촬영한 것이므로 해당 프로젝트 외부인이 사용할 수 없습니다.

로그인

회원가입

제품 리스트 페이지

제품 상세 페이지

장바구니

결제 진행

구현사항

<필수 구현>
1. 회원가입 & 로그인
2. 제품 상세페이지 & 제품 전체 페이지
3. 장바구니
4. 주문 & 결제

<추가 구현> : 시간 부족으로 미진행
1. 상품 검색 페이지
2. 마이페이지 (고객 정보 관리, 주문 조회, 위시리스트, 1:1 문의내역 확인)
3. 제품 페이지 내 리뷰 게시판 (평점, 댓글 가능)
4. 반응형 웹 한 페이지라도 해보면 좋긴할듯 (우선순위는 아님)

🍩 좋았던 것

적절한 협업 툴의 사용

• Trello를 통해 프론트/백 간의 진행상황을 한 눈에 체크할 수 있어서 일의 진행이 보다 수월했던 것 같다.
• Notion에서 팀 전체 또는 프/백 끼리의 미팅로그를 정리해서 내용을 확인할 수 있게 했고, 미팅 전에 사전 미팅 로그를 작성해서 팀원들이 미팅 내용을 확인하고 참석하여 미팅 시 놓치는 내용이 없도록 했다.
• 필요한 자료들과 공유할 자료들이 모두 Notion에 정리되어 있어서 Slack 대화내용에서 하나하나 찾을 필요가 없어 좋았다.

소통을 위한 노력

• 프론트 & 백 서로 대화를 많이 하려고 노력했던 점이 좋았다.
• 프론트 & 백 통신 때 통신이 잘 안되는 상황에서도 서로 누구의 탓을 하지 않고 자신의 로직을 계속 점검해보고 차근차근히 점검할 수 있도록 서로를 기다려주는 것이 좋았다.
• 프론트에서는 백이 정한 변수명과 백이 보내주는 데이터 형식에 맞추겠다고 하고, 원하는 대로 데이터를 보내주면 된다고 하셔서 너무 든든하고 좋았다. 나도 백에서 그렇게 말할 수 있는 개발자가 되고 싶다고 생각했다.
• 내가 코드가 마음대로 잘 안되는 것 때문에 힘들어할 때 팀원들이 격려해줘서 할 수 있었다.
• 프로젝트가 끝난 후 다같이 회고 미팅을 진행했다. 우리가 부족하다고 생각하는 부분은 다음 프로젝트에, 그리고 리팩토링 때 개선하여 반영하기로 했다.

업무분담과 애자일한 업무 방식

• 혼자 다 했으면 시간이 절대 부족해서 절대 못 끝냈을 것 같음. 업무 분담을 해보니 좋았다.
• 한 가지를 깊게 파고 다음 부분으로 넘어간 것이 아니고, 여러 부분을 빨리 끝내고 넘어간 후에 수정하고, 수정하는 애자일한 방식으로 진행하려고 노력했고, 어느 정도 적용이 된 것 같아 좋았다.

🍩 아쉬운 것

구체적이지 못한 일정 계획

• 시간 부족으로 결국 추가구현을 못하게 되어 아쉽다.
• 매 스프린트마다 목표는 있었으나, 한 스프린트 안에서 그 목표를 구현하기 위해 언제까지 뭘 할 지 등의 구체적이고 세분화된 일정 계획이 없었던 것이 아쉽다.
  → 두번째 스프린트 때 어느 정도 반영

<두번째 스프린트 때 계획한 세부 일정>

완벽할 수 없었던 프/백 간의 소통

• 가장 아쉬운 점은 프/백 간의 소통 - 대화를 많이 하려고 노력을 많이 했는데 아무래도 우리의 첫번째 개발 프로젝트이다보니 미숙한 점이 많았던 것 같음.

• 원활하지 못했던 소통의 예)

1) 주호님 파트:
회원가입시 프론트에서는 이름 입력칸이 없고 백에서는 이름이 모델링 되어있었음. → 프론트에서 이름 추가.
로그인 중복체크 칸을 프론트에서는 만들고 백에서는 만들지 않았음 -> 백에서 API 추가. 사전 협의 필요했음.

2) 민혁님 파트:
장바구니 로직에서 POST랑 PATCH의 로직이 똑같아서 하나로 통합하려고 했는데 그건 백엔드만의 생각이었고, payload값이 POST일때랑 PATCH일때 프론트에서 원하는 값이 달라진다는 것을 통신하면서 발견

3) 내 파트 :

• 주문내역 구현 시, 바로결제와 장바구니에서의 이동이 엔드포인트가 같다는 점을 명확하게 설명해주지 못하였음. 그래서 두시간 동안 프론트랑 이 얘기만 함.
• 둘이 같은 페이지를 보면서 계획을 짜고 그것을 바탕으로 로직을 짜고 코딩을 했어야 하는데, 그 페이지를 각자 보면서 이해하고 구현한 것을 바탕으로 맞춰보려고 했던 게 문제였음.
• 내가 만든 API를 프론트한테 설명하는 것이 처음이라서 미숙했던 것도 있었고,
• RESTful API (query parameter & path parameter)에 대한 개념을 중간에 배워서 미리 로직짜기 전단계에서 엔드포인트 어떻게 처리할 지 몰랐던 것도 있음

🍩 힘들었던 것

모두가 이해하고 넘어가야한다는 것과 시간 안에 기능구현을 해야한다는 것의 조율이 힘들었다.
성향이 달랐던 것도 힘들었는데, 이건 대화를 통해서 많이 극복할 수 있었던 것 같다.

---

우리의 코드는 완벽하게 설명할 수 있도록 발표 이후에도 같이 공부할 예정

남은 추가구현 과제는 앞으로도 리팩토링과 함께 진행할 예정.