프로젝트 소개

프로젝트 명 : Dr. TART 🩺 🥧

• 화장품 브랜드 Dr.Jart 클론코딩
• 일상에 지친 사람들을 위한 디저트 솔루션 디저트 판매 사이트
• 데모 영상

1. 개발인원 및 기간

• 개발 기간 : 2021/11/29 ~ 2021/12/10
• 개발 인원 : 프론트엔드 3명, 백엔드 3명
• Frontend Github: https://github.com/wecode-bootcamp-korea/27-1st-DrTart-frontend
• Backend Github: https://github.com/wecode-bootcamp-korea/27-1st-DrTart-backend/pulls

2. 사용 기술, 툴

기술스택 : JavaScript, React, Sass, React-router-dom
협업 툴 : Git, Github, Slack, Notion, Trello

3. 구현사항

✅ 필수 구현사항

1. 회원가입 & 로그인
2. 상품 메인페이지 & 상세페이지
3. 장바구니
4. 주문 & 결제

🔶 추가 구현사항

1. 상품 검색 페이지
2. 마이페이지 (고객 정보관리, 주문 조회, 위시리스트)
3. 상세페이지 내 리뷰 게시판(평점, 댓글 기능)
4. 반응형 웹 페이지로 구현
   
   

🔷 내가 구현한 기능

1. 회원가입 페이지

• 약관동의 체크박스 기능 구현
• 정규식을 적용한 이메일 패스워드 유효성 검사
• 데이터 통신하여 이메일 중복 검사
• 필수 체크 박스와 모든 유효성, 중복검사 조건 완료시 가입 완료
• 체크 박스 부분 컴포넌트화, 상수데이터 fetch, 커스텀 체크박스 디자인
• 회원정보 입력 input 컴포넌트화시켜 각 부분에 적절한 props 전달
• 유효성 조건 불충분시 onBlur를 통한 각 input 하단에 조건부 렌더링
• 가입하기 버튼 클릭시 경우에 따라 alert 알림, 모든 조건 만족시 데이터 전송후 가입 완료 페이지로 navigate

2. 디저트 상세 페이지

• 상품별 동적 라우팅을 통해 useParams()로 상품에 대한 아이디 값을 받아와 백엔드 데이터 요청

1) 이미지 슬라이드

• 배열 형식의 이미지 데이터를 filter, map 메소드를 사용하여 썸네일이미지 클릭시 각 인덱스에 값에 맞는 이미지를 출력
• setInterval로 4초마다 다음 이미지 슬라이드를 출력

2) 상품 정보 박스 컴포넌트

• 상품 정보 박스 컴포넌트화
• 상세페이지에서 props로 내려받은 데이터 활용
• 토큰 여부에 따른 구매, 장바구니 버튼 클릭 제한 alert후 로그인페이지로 이동
• 바로구매 클릭시 결제페이지로 <Link> 링크 내에 state로 값을 전달
• 장바구니 버튼 클릭시 백엔드 데이터 전송 후 장바구니 페이지 이동

3) 리뷰 추가 기능

• 추가 기능 구현 사항
• 현재 목데이터를 받아와서 map메소드로 리스트를 보여줌
• textarea 입력값을 상태에 저장하여 리뷰리스트 배열과 concat하여 리뷰 리스트에 추가

3. 로그인시 토큰 부여

• 로그인 완료시 백엔드로부터 받아온 토큰을 localStorage에 저장

---

프로젝트 회고...

2주의 기간을 가지고 어제 프로젝트 발표를 통해 1차 프로젝트가 끝이 났다.
처음엔 회고라는 것을 왜 할까 하는 생각을 가졌었는데 프로젝트를 진행하며 중간회고, 마무리 회고 미팅을 하며 많은 생각이 달라졌다.
회고를 통해 잘한 점, 아쉬웠던 점, 앞으로의 개선할 점을 팀원들과 소통하니까 프로젝트의 방향성이 확실해지고 주의할 점도 명확해지는 것 같았다.

처음 프로젝트 시작 전엔 설렘보단 걱정이 앞섰다. 일주일 배운 기술을 가지고 팀 내에서 민폐를 끼치지 않고 주어진 내 역할을 잘 해낼 수 있을까 하는 걱정이 많았다. 하지만 이런 걱정은 우리 팀 뿐만 아니라 여러 사람과 이야기했을 때 각 개개인의 1인분이란 단어보단 팀이 모여 하나를 만든다고 생각하자는 말에 부담이 좀 덜어졌다.

대학 다닐 때 프로젝트나 과제를 팀으로 진행할 때는 소통보단 결과물만 생각하고 진행하였는데 이번 프로젝트에서는 실제 실무에서 진행하는 스크럼 방식의 회의를 통해 1차와 2차 스프린트를 나누어 진행하였는데 확실히 작업의 진행도나 팀원들과 정해진 소통 부분에 있어서 수월했다. 또한 트렐로와 노션을 활용하여 시각적으로 소통할 부분이나 진행도를 한 번 더 확인할 수 있어서 계획적으로 진행되었던 것 같다. 매일 아침 스탠드업 미팅을 통해 각자의 어제 한 일, 오늘 할 일, blocker(방해요소)를 공유함으로써 소통이 원활해지고 블로커에 대한 부분을 빠르게 처리하면서 일을 진행할 수 있었다.

하지만 위의 내용을 완벽하게 해내지는 못하고 아쉬웠던 점이 많았다. 각 프론트 백엔드 끼리는 소통이 잘됐지만 프론트와 백 사이에서 소통이 원활하지 못하여 각자의 시선으로만 기능 구현을 한 것이다. 서로의 데이터 전송 필드가 다른 경우도 있었고, API 정의 문서를 확인하지 않고 Key, value 값이 다른 경우도 있었다. 이런 부분에서 프론트와 백 사이에도 끊임없는 소통이 이루어져야 한다고 깨달았고 또한 서로의 지식이 없을 수도 있으니 이해하기 쉽도록 단어와 흐름을 잘 설명하는 것도 좋은 소통의 방법이라고도 느꼈다.

기간은 2주였지만 사실상 코드를 칠 수 있는 시간은 10일 정도 뿐이었다. 처음 프로젝트 컨셉과 개발 초기 설정하는데도 시간을 많이 쓰고 하다 보니 기능구현 코드를 치는데 마음이 조급했다. 한가지 기능을 구현하는데 잘 되지도 않고 코드가 클린하지 못해서 시간을 많이 허비했다. 이런 부분에서 프로젝트 자체가 애자일하게 돌아가지 못한 점도 너무 아쉬웠다. 작업의 데드라인을 정해두고 시간을 잘 안배하여 애자일하게 흘러갔다면 계획했던 추가기능 구현도 해냈을 수도 있을 것 같았다.

이번 프로젝트를 진행할 때 좋은 결과물을 도출해내는 것도 목표였지만 내 목적은 학습적인 것과 제일 중요한 협업하는 방법이었다. 학습적인 목표는 70% 정도 달성한 것 같고 가장 크게 얻은 것은 협업이었다. 실무에서 하는 협업 방법을 처음 해보는 것이었고 어느 정도의 흐름을 알았기에 앞으로 더 소통도 잘하고 작업의 효율성이 올라갈 것 같다.

앞으로도 계속해서 개인 공부를 통해 개인역량을 더 키우고 개발을 할 때도 최대한 클린 코드로 작성을 하며 적극적인 소통을 하여 프로젝트에 임해야겠다.