서론
프로젝트를 마치며
드디어 2주 동안에 걸친 위플샵 팀프로젝트가 마무리되었다..
학교 다닐 때 팀프로젝트를 어느정도 해봤었지만, 장기간으로 팀플래닝부터 데이터베이스 모델링, 백엔드 API 구현, 프론트 구현, 백엔드와 프론트 연결, 배포까지 모든 과정을 함께한 적은 처음이였다.
그래서 더욱더 실력을 끌어올릴 수 있는 계기가 되었지 않나 싶고, 빨리 2차 프로젝트에서 내 실력을 발휘하고 싶다는 생각이 들었다!
참고 웹사이트 선정
마플샵 webpage: : https://marpple.shop/
이번에 우리 팀이 참고하게 된 웹사이트는 마플샵이었는데, 웹사이트의 정석이 이커머스이기도 하고 이때까지 배운 내용들을 충분히 적용할 수 있을 거 같아서 괜찮은 참고 대상이 될 것 같았다!
개발 기간
2021/12/27 ~ 2022/01/07 (2주)
적용 기술
Frontend: React, Javascript, Sass
Backend: Node.js, Express, MySQL, Prisma
Common: RESTful API
Development Tools: VScode, Github, Workbench, Postman
Community Tools: Slack, Zoom, Notion
본론
내가 담당한 기능
[Frontend]
- Top & Nav & Footer UI - 각 부분 컴포넌트화하여 모든 페이지에 재사용 가능하도록 구현
- 추가 기능 - 상품 리스트에서 상품 클릭시 상세 페이지로 해당 상품 데이터만 불러오는 기능 구현
[Backend]
- 상품 리스트 & 필터링 & 정렬 API - 쿼리파라미터를 이용한 상품 리스트 필터링 기능 구현
- 데이터베이스 관리 - 모델링을 기반한 데이터베이스 구축, 필요시마다 테이블 구조 수정
- 백엔드 초기세팅 - 필요한 노드 모듈 설치, 기본 폴더 생성, 서버 체크, 깃허브 연동
- 추가 기능 - 상품 좋아요 기능 구현, 유저 인증을 통한 장바구니 호출 API 구현
업무 분담
팀 Convention
프로젝트 진행 Timeline
모델링 최종안
최종 결과물
main page
list page
detail page
cart page
signup page
signin page
결론
잘한 점
[깔끔한 모듈화]
- Frontend: 페이지별로 코드를 분리하였고 top,nav,footer 부분은 재사용을 위해 컴포넌트 폴더에 따로 두고 모든 페이지에 재사용을 하여 효율성을 높였다!
- Backend: Layered Pattern을 적용하여, 각각의 레이어가 하는 역할이 명확하기에 코드 수정 및 에러 처리가 훨씬 쉬워졌으며, 다른 팀원과 역할 분배도 쉬워지게 되었다!
[체계적인 데이터 관리]
데이터 추가, 삭제, 접근시 효율성 극대화
아쉬운 점
- 배포 전과 후의 결과물 차이 발생: 분명히 AWS를 통해 배포하기 전까지만 해도 모든 기능들이 잘 작동되었는데 배포 후에 테스트를 하니 일부 필터링 기능이 작동이 안되고 일부 UI가 깨지게 되었다ㅠㅠ
- 구현 외적인 부분에 많은 시간 소모: 첫 프로젝트이다보니 git 커밋과 브랜치 머지 과정에서 실수가 종종 발생하였는데, 익숙치 않다보니 많은 시간 소모가 발생하여 다른 기능 구현 간 시간 부족이 발생하였다..
배운 점
[에러 해결 방식]
어떤 에러가 발생했을 때 침착하게 나만의 절차대로 대응할 수 있는 능력을 향상시키게 되었다.
나만의 에러 해결 절차: [1] 적재적소에 console.log()를 넣어 콘솔창에 출력해보며 에러 위치 및 원인 파악해보기 [2] 에러 위치 발견 후 원인 파악시 개인적인 분석과 구글링 그리고 팀원들의 조언을 얻어보기 [3] 그래도 안된다면 멘토님 조언받기. 이 3단계를 거쳤을 때 시간이 허락한다면 해결되지 않은 문제는 없었다
[Prisma 기능]
상품 리스트/필터링/정렬 API 구현간 중복되는 query문이 많이 생겨 고민이었는데 재준님의 멘토링을 바탕으로 PrismaClient에서 raw 라는 기능을 가져와 service란에서 Dao란으로 mySQL raw string query문을 받아오게 되어 코드가 훨씬 간결해졌다
깨달은 점
[커뮤니케이션의 중요성]
3주동안 매일 팀원들과 밑에 언급되는 모든 요소에 대해 같이 커뮤니케이션 툴을 이용하여 소통하고 의사 결정을 내리면서 팀 프로젝트시 커뮤니케이션의 중요성을 많이 느끼게 되었다
목록: 팀 컨벤션 정하기(git commit message, 네이밍 컨벤션, 정확한 프로젝트 스케줄 및 기능 분담, 팀레포 Pull Request시 코드리뷰, git brach Merge, 매일 아침회의로 각자 진행상황 체크, 각 팀원이 맡은 기능 구현간 문제 해결이 힘들면 같이 화면 공유해서 조언 및 해결
[나의 개발 성향]
이번 프로젝트에서 주로 백엔드를 담당하게 되면서 나는 확실히 로직 구현을 좋아해서인지 API를 만들때 가장 큰 흥미를 느꼈고, 프론트에서도 1차로 API를 통해 전달받은 데이터들을 정제하여 원하는 데이터만 보여지게끔 해주는 기능 구현에도 흥미를 느낄 수 있었다. 이를 통해 2차 프로젝트에는 완전히 백엔드를 담당하고 싶다고 마음 먹게된 것 같다
프로젝트 관련 링크
- Frontend Github Repository: https://github.com/wecode-bootcamp-korea/fullstack3-1st-wepleshop-frontend
- Backend Github Repository: https://github.com/wecode-bootcamp-korea/fullstack3-1st-wepleshop-backend
- wepleshop 영상 URL: https://youtu.be/ajVi4Gv-ouk
