🥦 Market Kurly / 1차 프로젝트

🥦 프로젝트 소개

한국의 신선 식품 전문 온라인 쇼핑몰인 Market Kurly를 클론 하는 프로젝트를 진행했습니다.
마켓 컬리는 수도권 한정으로 당일 주문 시 다음 날 새벽 배송되는 샛별배송 배달 서비스를 하고 있습니다.
신선한 식재료를 직접 장보러 가지 않아도 바로 받아서 먹을 수 있다는 장점을 가지고 있고 코로나 사태로 인해 이용자들이 많이 늘어난 사이트이기도 합니다.

🥦 프로젝트 참가자 (Front + Back)

🤙 Team BroKurly

• 저희는 어떻게 하다보니 남자분들끼리 모이게 되어서 bro + kurly 라는 이름의 brokurly라는 이름으로 팀명을 정했습니다.

👨‍👨‍👦‍👦 FrontEnd

• 강수명
• 이동훈
• 허덕형
• 김제형

👨‍👦 BackEnd

• 김동현
• 김형욱 (나)

🥦 프로젝트 영상

🥦 프로젝트 기간

2020.10. 19 ~ 2020. 10. 30 약 2주간 진행

🥦 기술 스택

👨‍👨‍👦‍👦 FrontEnd

• HTML / CSS
• JavaScript
• React(CRA 세팅)
• React(Router DOM)
• Sass
• Redux(ReactRedux, Persist, logger)
• SweatAlert
• IMport

👨‍👨‍ BackEnd

• Python
• Django
• CORS Header
• Bcrypt
• PyJWT
• MySQL
• REST API
• Twilio (문자 인증 SMS 서비스)
• AqeuryTool (데이터베이스 모델링)
• AWS EC2 서버에 RDS 인스턴스를 연결하여 배포

🤼‍♂️ 협업 도구

• Slack
• Git + GitHub
• Trello를 이용해 일정관리 및 작업 현황 확인
• Postman (API 관리)

🥦 구현한 기능(BackEnd)

🤸‍♂️ 표시는 제가 구현한 내용입니다.

메인페이지

• Setion 별 상품 리스트 API
• MD의 추천 카테고리별 필터링 API

카테고리별 상품리스트

• 카테고리 별 상품 필터링 및 검색 API

신상품 & 베스트 페이지

• 현재 날짜 기준 한 달안에 올라온 상품들만 올려주는 신상품 페이지 API
• 조회수 기준으로 필터링한 상품만 보여주는 베스트 페이지 API

알뜰쇼핑 페이지

• 할인되는 상품들만 보여주는 알뜰쇼핑 페이지 API

Navbar

• 상품 카테고리 API
• 🤸‍♂️ 로그인을 하게 되면 유저의 이름과 회원 등급이 표시됩니다.
• 🤸‍♂️ 장바구니에 상품을 담았다면 상품의 갯수가 장바구니 아이콘 위에 표시

회원가입 & 로그인 (SignUp & SignIn)

• 🤸‍♂️ 회원가입 시 TWILIO 라이브러리를 이용한 휴대폰 인증 (살짝 미흡만 부분이지만,,,ㅎㅎ)
• 🤸‍♂️ bcrypt를 사용한 암호화
• 🤸‍♂️ JWT 로그인 구현 및 @decorator를 이용해서 토큰 인증

장바구니

• 🤸‍♂️ 상품의 장바구니 등록 (개수 포함)
• 🤸‍♂️ 장바구니 내역 조회
• 🤸‍♂️ 장바구니 상품 수량 변경 및 목록 삭제

마이페이지 (마이컬리)

• 🤸‍♂️ 늘 사는 것 (찜목록)
• 🤸‍♂️ 주문 내역

주문서

• 🤸‍♂️ 주문하기 할 때 유저정보 가져오기
• 🤸‍♂️ 주문하면 장바구니에 있는 상품들을 주문내역으로

🥦 프로젝트 진행과정

Trello를 이용해서 각자 처음 구현할 기능들을 Backlog에
필요한 이미지들은 Design에
이번주 까지 할 일은 To Do (This Week)
현재 하고 있는 작업들은 Doing
그리고 Front와 Back간의 테스트 중인 부분은 Testing
위의 작업들이 완료되면 Done에 티켓을 작성해서 분류하였습니다.

• 프로젝트가 끝난 시점에서의 Trello
• backlog에는 추가구현으로 구현하지 못한 기능도 남아있습니다. (아쉽...)

월요일에 시작해서 다음주 금요일에 발표였는데 우리팀은 최대한 수요일까지 완료해서 나머지 시간은 코드를 정리하고 미흡한 부분을 메꾸고 시간이 되면 추가구현 기능을 만들기로 계획했습니다.

처음 팀원들이 구성되었을 때부터 서로서로 코드(컴퓨터 코드가 아닌)도 잘 맞고 단합이 잘 되었던 것 같습니다. 각자가 열정도 넘치고 구현하고 싶은 기능들도 많았기 때문에 정말 마켓컬리와 비슷한 사이트를 만들어보자고 얘기하고 시작했었습니다.

🥦 기억하고 싶은 코드

장바구니 수량 변경

수량 변경을 할 때 + 버튼을 누르면 수량을 1증가시키고 - 버튼을 누르면 1 감소시키는 로직이였는데 처음에는 단순하게 if else를 이용해서 value 값에 따라 plus, minus를 구분하고 만들었습니다.

어려운 내용은 아니었기에 작동하는데는 문제가 없었습니다. 그런데 멘토님이 보시고는 if 문을 너무 많이 쓰는 것보다 dictionary를 이용해서 먼저 필터를 만들어놓고 로직을 작성하면 좀 더 간결해지는 코드를 만들 수 있을거라 말씀해주셔서 위와 같이 작성했습니다.

제가 보기에도 깔끔해진 기분이 듭니다. 또한 Python에는 Switch문이 없어서 다음 번에도 여러 개의 조건이 필요한 로직을 만들어야 한다라고 하면 저렇게 필터를 만들어서 적용하는 방법이 좋아보입니다.

해당 상품의 전체 리뷰 조회

쇼핑몰 등의 사이트에서 볼 수 있는 상품의 리뷰들을 게시판 형태로 보여주는 기능입니다.
리뷰의 개수가 많기 때문에 프론트에서 페이지네이션을 하는 것으로 진행했고 각 페이지 마다 10개씩 보여주기 위해서 query string을 이용해서 offset ~ limit까지의 데이터를 보내주는 방법으로 코드를 작성했습니다.

덕분에 query string과 path parmeter에 대한 부분도 공부할 수 있었습니다. 원래는 해당 상품 리뷰의 데이터를 찾을 때도 ORM으로 db select를 계속해서 타고 타고 들어갔었는데 이 부분도 너무 비효율적이고 성능적으로도 좋지 못하다고 느껴서 select_related를 이용하는 방법으로 바꿨습니다. 또한 프론트에서 리뷰 전체의 개수를 보내달라고 요청을 했기때문에 select를 한번 더 하는 코드였는데 select_related를 이용해서 최대한으로 줄였습니다.

그리고 처음에는 사용할 거라고 생각하지 못했던 리스트 컴프리헨션을 이용해서 작성하고 나니 코드가 간결하고 보기에도 깔끔해진거같고 성능적으로도 좋아진 코드가 된거 같아 기뻤습니다.

그 이외의 API들은 POST 메소드나 PATCH 메소드로 create 하거나 update하는 부분이라서 리스트 컴프리헨션이나 select_related를 잘 사용할 기회가 없었는데 이 부분을 맡아서 하게되면서 좀 더 공부하게 되어서 좋았습니다.

🥦 프로젝트를 마치며,,,

욕심이 Too Much,,,

처음부터 열정이 넘쳐서 풀악셀로 달린 우리 브로콜리 팀이었습니다.
물론 다들 실력도 좋고 체력도 넘쳐서 정말 많은 기능을 담아냈고 생각했던 기능들을 100% 구현한건 아니지만 필요한 기능들은 다 만들었던것 같습니다.

그리고 마지막에는 결제기능, 문자인증기능 등도 만들어내면서 진짜 사이트처럼 보이게끔 했습니다. 그런데 프로젝트를 마치고 나니까 너무 기능구현에만 앞섰던것이 아닌가라는 생각도 들었습니다.

처음 계획했던 모델링에는 보다 많은 테이블이 있기도 했지만 프론트엔드 분들과의 소통이 조금 부족했던 결과, 만들어놓고 쓰지 못한 데이터들도 있었고 서로서로 만든 부분이 달라서 결국 모델링을 수정하게 된 경우도 존재했습니다.

그래서 나중에 서로 가장 많이 얘기했던 부분이 바로 '프론트엔드와 백엔드와의 소통이 정말 중요하구나' 라고 느꼈습니다. 또한 기능구현에만 앞서지 말고 어떻게 하면 좀 더 깔끔하고 효율이 좋은 코드를 작성할 수 있을까? 에 대한 고민을 더 많이 해야하고 그렇게 해야만 정말 개발자답게 코딩할 수 있다는 부분도 느꼈습니다.

하지만

AM 2:43

( 한 사람도 먼저 가지 않고 다같이 남아서 새벽 라이브코딩하는 Bros )

그 누구보다도 열심히 새벽까지 불코딩한 우리 팀들이 너무 고맙기도했고 코피까지 흘려가면서 하시는 모습을 보고 존경스럽기까지 했습니다.

대학교, 회사를 다니면서 나름 코딩을 했었지만 이번 프로젝트 만큼 재밌게 그리고 스스로에게 후회스럽지 않게 했던 적이 있었나 싶을 정도로 저 또한 보람차고 뿌듯한 프로젝트였습니다.

팀원들 전부 다 다음 프로젝트때도 같이 하고 싶다고 말했을 정도로 팀웍이 좋아서 그만큼 좋은 결과물이 나올수 있었다고 생각합니다.

🥦 BroKurly 화이팅!