프로젝트 소개
GETTT(https://www.gettt.com/)는 패션, 생활용품, 가구 등을 판매하고 장, 단기 렌탈 서비스를 제공하는 비즈니스이다. BAGETTT라는 프로젝트명으로 전국의 유명한 베이커리의 빵을 담은 패키지를 구성하여 주 1회 정기배송하는 빵구독 서비스로 기획하였다. 프로젝트 예정기간은 총 2주로 잡았으며 첫 프로젝트인 만큼 여러 많은 기능 구현들이나 css의 요소보다 로그인,회원가입, 제품리스트페이지, 상세페이지,장바구니,주문완료 페이지 기능 구현을 목표로 잡았다. 팀원의 경우에는 총 5명으로 프론트엔드 3명 백엔드 2명으로 구성돼있다.
개발 인원 및 기간
- 개발 기간 : 2021/11/29 - 2021/12/10
- 프론트엔드 : 강인웅, 김재호, 원소연
- 백엔드 : 김은혜, 이재문
구현 기능
-
회원가입 / 로그인 (김재호/이재문)
Crypt를 이용한 암호화
정규표현식을 이용한 이메일, 패스워드 유효성 검사
로그인 시 jwt 토큰 발급 -
제품 리스트 (강인웅/김은혜)
제품리스트 컴포넌트화 하여 나열
브랜드별, 가격순으로 정렬 필터링 기능 구현 (중복 체크도 가능)
필터링 초기화 기능 구현 -
제품 상세 (원소연/김은혜)
제품 소개 페이지를 컴포넌트화 하여 빵 패키지 마다 다른 소개
-
장바구니 (강인웅/김은혜/이재문)
전체, 부분체크박스 구현
체크박스로 품목 관리 및 체크된 품목들 총 가격 표시
개별,부분,전체 삭제/결제 기능 구현 -
주문 상세 (원소연/이재문)
주문 완료된 제품 및 배송정보 출력
(장바구니와 완료 제품 사이의 ACID 수행을 위한 transaction 사용)
사용된 기술
FRONT_END
React
SCSS
Prettier
ESlint
BACK_END
Python
Django frame work
COMMON
Notion
Trello
Slack
Git, Github
잘한 점
- 프로젝트의 기획 단계에서부터 백엔드 분들과의 잦은 소통이 계획했던 목표를 달성하는데 크게 일조했던 것 같다. 특히 장바구니와 리스트페이지에서 백엔드와 통신할 일이 많았는데 어떤 식으로 통신할 것인지 body에는 데이터를 어떤 타입으로 실어줄 것이며 어떤 형식으로 응답값을 보내줄 것인지 계속해서 소통했으며 그 소통을 기반으로 목데이터를 만들어 개발을 진행하였디. 그래서 실제로 api가 만들어지고 붙여봤을 때 큰 어려움 없이 통신하여 화면에 렌더링할 수 있었다.
- config.js 파일을 만들어 여러 API주소들을 관리 했던 덕분에 나중에 백엔드와 통신할 때 여러 API들을 큰 수정없이 아주 수월하게 했다.
아쉬운 점
- 프로젝트 마감 기한이 다가왔을 때쯤 백엔드 개발자분께서 주신 API의 응답 결과가 기존에 얘기를 나눴던 구조와 달라 목데이터를 가지고 진행했던 코드들을 수정해야 했던일이 있었다. 빠르게 인터넷 서칭을 하여 해결방법을 찾아 문제는 해결했지만 많이 당황을 했었다. 이후 다음 프로젝트에서는 이 일을 반면교사 삼아 API 명세서를 만들 때 같이 참여해 사전에 방지해야겠다고 생각을 했다.
해결과정
https://velog.io/@wong0220/TILuseNavigate로-porps를-넘겨주는-법
- 공통 컴포넌트화를 초기에 잘 계획하지 못했던 점이 아쉬웠다. 공통적으로 쓰이는 컴포넌트 들이 NAV나 FOOTER 말고도 버튼,모달 등등이 있었는데 초기부터 이런 컴포넌트 계획들을 잘 세우고 사용했으면 개발도 더 빠르게 했을 뿐만 아니라 클린코드 유지보수 등 리액트의 장점을 더 활용할 수 있었던 것이기에 아쉬움으로 남아 다음 프로젝트에서는 이런 컴포넌트들 관리와 활용에 크게 신경을 써보려고 한다.
이번 프로젝트에서 적용해본 기능
Developer