해당 클론 프로젝트는 'Aesop' 사이트의 코드를 베끼지 않은, DB 모델링 설계부터 기능 구현 등 모든 부분을 팀원들과 소통하며 직접 코드를 짠 프로젝트이며 상업적인 이용 목적 또한 없음을 밝힙니다.
우리팀이 만든 최종 결과물 일부 캡쳐
Project Overview
1차 프로젝트로 ✨Aesop 홈페이지✨를 만들게 되었다. 사실 너무 미숙한 상태에서 프로젝트에 들어가게 되어 혹여나 민폐를 끼치진 않을 지 많은 걱정을 하며 시작했다.
1. 우리는 왜 Aesop 사이트를 선정했을까?
우선 너무 복잡하지 않고 깔끔해 보였기 때문에 첫 프로젝트로는 아주 적합하다고 생각했다.
또한 Aesop 사이트에는 고객의 상품 구매 경험에 최적화된 서비스가 많이 구현 되어 있었다.
메인 페이지의 상품 소개부터 검색 필터, 스토어 위치, 장바구니, 로그인, 회원가입, 결제, 주문내역 등 지금껏 우리가 배웠던 부분을 응용하여 적용해보기 적합한 기능이 많았고 배워보지는 않았지만 시간적 여유가 있다면 더 나아가서 구현해볼 수 있는 지도 API 등이 구현 되어 있었기에 선정하게 되었다.
2. 작업 기간
2022.10.31 ~ 2022.11.11 (2주)
3. 기술 스택 / 파트 분담
프론트엔드
HTML
React
SCSS
Javascript
백엔드
Javascript, Express(Node.js), Mysql
dbmate(DB scheme 버전관리)
jsonwebtoken(토큰 발행)
bcryptjs(비밀번호 암호화)
파트 분담
백엔드는 나 포함 총 세명이었으며 다같이 ERD 모델링을 하고 여러차례 수정 뒤에 추합했으며, 각자 파트 1-2개 정도씩을 분담하여 맡기로 했다. 기현님께서 로그인+회원가입, 제품정보조회 API를, 상윤님께서 주문 요청 및 내역 API를, 그리고 내가 장바구니 CRUD API 를 구현하기로 했다.
4. 최종 결과물 (뿌듯^-^)
메인 페이지
카테고리 일부
원래 실제 이솝 사이트는 비회원도 주문이 가능했지만 아무래도 첫 프로젝트이다 보니 덜 복잡하게 하게 위해 회원만 주문이 가능하도록 구현 했으며, 아이템을 담으면 특정 유저의 카트에 아이템이 담기고 수량 변경 및 아이템 삭제도 구현이 가능하도록 만들었다.
- AWS를 사용하여 배포까지 무사히 마쳤다! (이 부분은 조금 어려웠기에 추후에 따로 글을 써야겠다)
5. DB - ERD 모델링
우리 팀이 만든 ERD 모델링
먼저 기능을 구현하기 전에 아주아주 필수적인 데이터 모델링 작업에 들어갔다. 이 작업이 생각보다 시간을 많이 잡아먹었다! 물론 이러한 과정은 그만큼 중요했다. 3~4일 정도 소요 된 것 같다.
백엔드 팀원들 각자 dbdiagram 사이트를 이용하여 모델링 작업을 해본 뒤 여러 회의를 거치고 거쳐 의견이 맞는 부분을 취합하여 완성했다. 작업을 하다 보니 더 필요하겠다 싶은 테이블이 생긴 적도 있었기에 그것은 추후 회의를 통해 삽입했다.
6. 에러 수정
무난하게 잘 되겠지!? 라는 생각과 동시에
FE 기민님 왈 :
"이거 같은 아이템 담으면 수량이 늘어나는게 아니라 같은 아이템이 두개 생기는데요?"
그랬다.. 바보같은 나는 카트 추가하는 함수를 만들 때 같은 아이템이 담긴다면 수량을 +1 해주는 함수를 따로 만들지 않았던 것이었따. 그저 DB에 우왓 값이 아주 잘 들어오네~~~! 하고 안심했었고 그게 전부였다. (쯧) 더 나아가서의 상황을 미처 생각하지 못하고 안일하게 생각했던 내 잘못이었다 🥲
하...이럴때 수량 추가는 어떻게 처리해야 하는 걸까..내가 빨리 에러를 수정해줘야 프론트에서 마저 작업을 할텐데 라는 생각에 초조하게 구글링을 하던 나는 한줄기의 빛처럼 나와 비슷한 상황의 글을 발견하게 되었고 그 글을 참고하여 함수를 완성할 수 있었다!
먼저 같은 아이템이 카트에 담겨 있는지에 대한 여부를 확인하는 함수를 하나 만든 뒤, 존재한다면 plusQuantity 함수를 이용하여 해당 값의 수량을 1 증가하여 반환하는 것이다.
사실 온전히 내 머리로 해낸게 아니라 구글링의 도움을 받은게 커서 많이 아쉽지만 그래도 다음에 이런 일을 처리해야 할 때 처리하는 방식을 배웠으니 후회는 없다. 이렇게 차근차근 배워나가는거지 뭐~!ㅎ
7. 협업 방식
- 트렐로 (Trello)
원래 프로젝트 시작하기 전까지는 다들 노션을 이용했었다. 그런데 첫 프로젝트인만큼 다양한 것을 시도해보고 싶은 마음에 우리 팀은 트렐로를 활용하여 일정 관리를 했다. (보드 끌어다가 다른 보드에 챡. 하고 갖다 놓는거 너무 재밌었다ㅋ.ㅋ)
사진에는 잘 안보이지만, 아래와 같이 보드를 만들었다.
Not started 😴 - 아직 시작 전
In progress 😎 - 진행 중
Pending 🧐 - 잠시 보류 및 고민이 필요한 부분
Done 🥳 - 끝낸 것
Blocked 😫 - 완전 막혀서 도움이 필요한 것 (이건 원래 있었는데 현재는 사라졌다)
그리고 후반에 추가된 응원의메세지로 구성하였고 라벨 기능을 이용하여 파트 및 작성자 구분도 해주었다.
- 디스코드 (Discord)
원래는 슬랙(Slack) 에서 이야기 하거나 줌(Zoom) 또는 구글미팅 에서 회의를 진행했다. 하지만 이건 그때마다 늘 방을 만들어서 링크를 공유하고 참여 승인을 해줘야 한다는 단점이 있어 매우 번거로웠다. 그때 FE 지원님이 디스코드를 추천하시며 서버를 만들어 주셨다. 그때부터 우리는 디스코드에서 활발하게 소통 할 수 있었다! (지원 당신 칭찬해.)
(귀여운 이름이랑 프사. 가끔 이렇게 휴식도 취하며 놀았다. 덕분에 지루하지 않아 좋았다ㅎ^ㅎ)
서버 안에 여러 채널을 만들어서 질문이 있는 사람들끼리는 질문 채널로 갔으며 작업을 진행중인 사람들은 공부 채널에 모여서 작업을 하며 함께 음악을 들었다. 이렇게 소통을 빠르고 쉽게 하다 보니 처음에 어색했던 분위기도 금방 풀렸고 지칠때는 수다도 떨었다. 자칫하면 나태해졌을 수도 있었겠지만 서로 으쌰으쌰 해준 덕분에 정말 재미있게 프로젝트를 진행할 수 있었다.
8. Postman 을 활용한 API 명세서
프론트엔드와 백엔드의 소통을 위해 API 명세서를 작성했다. API 구조가 다양해지고 복잡해질수록 백엔드 입장에서는 이를 프론트에게 효과적으로 전달할 수 있어야 했다. 그래서 포스트맨의 세이브 기능을 활용하여 어떤 양식으로 요청하고, 요청값 반환시에는 무슨 결과값이 나오는지에 대해 언제든지 쉽게 찾아볼 수 있도록 해서 프론트와 백 사이의 소통 효과를 극대화 했다. (아이디어 제시 및 양식 작성하신 상윤님 최고 👻)
9. 마치며 🥲
정말정말 재미있었던 2주였다. 처음 프로젝트 시작할 때는 두려움이 더 컸었다. 아무래도 팀에 민폐가 되지 않을까 하는 걱정 때문이었다. 다들 잘하는데 나만 뒤쳐지면 어쩌나 하는 걱정에 더더욱 노력하려고 애쓴 것 같다. 물론 팀원들이 다 너무 착하고 좋으신 분들이라 질문도 많이 했다! 어쩜 그렇게 다들 잘 아시는건지 우리 팀원이라는게 자랑스럽고 멋있었다 (진짜). 열정 가득해서 꼼꼼하고 완벽하게 해내고자 늘 노력하시던 우리 귀엽고 사랑스러운 아기같은 프론트 분들과 항상 믿음직스럽게 나를 이끌어주던 큐티방구 백엔드 분들 덕분에 많이 성장했다! 으쌰 (2주 너무 짧잔어.....난 아직 추억 속에..갇혀있는데..)
마지막으로 철저하게 PR 확인하시고 섬세하게 코멘트 남겨주신 우리 상윤쿤 박제하기ㅎ 울.상윤쿤..머싯죠.
상윤님 코멘트 보면서 아 이렇게 생각하고 이렇게 적용할 수 있겠구나 하며 많이많이 배워갔답니다...
우리 2차 끝나고 다시 만나..타입스크립트 가보자구.
우리 소듕한 팀원이었던 지원님, 설화님, 기민님, 성아님, 상윤님, 기현님 다들 감사했숩니다^-^)/ 알랍❤️
잘 보구 가요, 울팀 팟팅~!