1차 팀 프로젝트 (화장품 쇼핑몰 개발)

결과물   http://3.38.108.151:3000/

깃허브  https://github.com/wecode-bootcamp-korea/justcode-7-1st-Jsop-back

 

# 해당 프로젝트는 설계부터 구현까지 모두 팀원들과 직접 제작하였습니다.

1. 클론 프로젝트 목적

---

저는 '저스트코드'라는 프로그래밍 부트캠프에서 백엔드 과정 공부를 하고 있습니다.

이론 중심으로 백엔드 공부를 약 한달간 진행하였으며, 공부한 백엔드 내용들이 실제로 어떻게 적용될 수 있는 지 알아보고자 하였습니다.

2. 이솝 사이트 선정 계기

---

이솝 사이트는 화장품을 파는 쇼핑몰 사이트로서

기본적인 쇼핑몰의 기능인 카드 담기, 구매 신청등을 담고 있기에 2주의 기한 내에 만들어보기에 적합할 것으로 판단하여 제작하였습니다.

 

3. 팀원 구성

---

팀원 구성

- 프론트 (4명): 기민님, 지원님, 설화님, 성아님

- 백엔드 (3명): 우령님, 기현님, 상윤 (본인)

 

백엔드 역할:

- 공통:

 - ERD 모델링

- 이상윤 (본인)

  - 화장품 Mock Data 생성 API

  - 주문 요청 API, 주문 내역 API

- 우령님

  - 장바구니 CRUD API

- 기현님

  - 로그인, 회원가입 API

  - 제품 정보 조회 API

 

4. 사용 기술 스택

---

백엔드

 - Javascript, Express(Node.js), Mysql

 - 그 외

   -  dbmate(DB scheme 버전관리)

   -  jsonwebtoken(토큰 발행)

   -  bcryptjs(비밀번호 암호화)

 

프론트엔드

- React(use Javcript), SCSS, HTML

5. 프로젝트 결과물 (링크)

 

6. 업무 진행 방식

---

초기에는 사이트를 만들기 위해서 필요한 업무들을 나열하였고

프론트엔드의 경우 Layout 별로 기능을 분배하여 신속히 업무를 진행하였으며

백엔드의 경우 DB scheme 정의 업무를 공동으로 진행하였고 그 이후에는 총 3가지 기능(상품 필터, 상품 정보, 장바구니)을 분배하며 시작하였습니다.

 

업무 회의의 경우 매일 오전 10시에 만나 약 30분간 금일 업무와 지연이 예상되는 업무등을 공유하여 해당 상황에 대해 의견을 나누고 해결책을 모색하였습니다.

 

업무 상황 관리

아래와 같이 티켓팅을 활용하여 진행하였습니다. (링크)

업무 관리 툴(트렐로)을 활용하여 업무의 진행상황을 깔끔히 볼 수 있었다!

 

API 문서 공유

Postman을 통해 API 문서(링크)를 공유하였습니다.

 - API 의 input, output 명시하여 프론트엔드에서 API 호출하였을 때에 기대값을 알 수 있도록 하였습니다.

장바구니에 아이템을 추가할 때에 필요한 input 과 output을 확인할 수 있다.

실시간 소통

디스코드를 통해 공유하고 싶은 내용을 실시간으로 공유하였습니다.

프로젝트가 끝난 현재 시점, 닉네임은 굉장히 다채로워졌다.

 

소스 버전 관리 (프로젝트 PR 목록 링크)

github을 활용하여 관리하였으며  서로의 코드를 리뷰하고 납득이 될 경우 PR을 Merge하는 방식을 취했습니다.

나의 정없는 코멘트에도 불구하고 고맙게도 우령님께서는 스스로를 쇄신하며 앞으로 나아갔다. (우령사마님에게 많이 배워감)

 

7. 백엔드 주요 내용 공유

---

DB 스키마 모델링

사용한 DB 모델링 툴 (dbdiagram.io)

- 해당 툴 채택 사유

     - 실시간으로 테이블 변경상태를 팀원이 확인 가능함.

     - DBML(링크) 을 통해 스키마를 text만으로 작성할 수 있어 DB 버전관리를 github에 추가하기 용이함.

 

스키마 제작 흐름

우선 팀원들 각자 스키마를 만들어본 뒤 각자 만든 스키마들에 대해 예상되는 장단점들을 서로 공유하며 수정하는 과정을 거쳤습니다.

이후에는 프로젝트 제작과정에서 스키마 변경이 필요하다고 판단되는 경우, 변경 필요 사유를 정리하여 다음날 오전 백엔드 회의에서 공유하면서 스키마를 개선하였습니다. (DB 스키마 모델링 결과 링크)

최종 DB 스키마(처음 짜본 것 치고 나름 나쁘지 않은 듯...?!)

 

아키텍쳐 (layered Pattern)  (GitHub 프로젝트 링크)

아키텍쳐는 Layered Pattern을 가져왔습니다. 보편적으로 사용되는 패턴으로,

개발자가 이해하기 쉬운 구조를 가지고 있고 컴포넌트 별로 관리가 가능하여 컴포넌트별 업무 분담할 때 용이하였습니다. 

 

* 배포 과정을 진행하였으나 배포 과정 설명의 경우 비교적 Minor할 것으로 판단되어 결과물 링크로 대체하려 합니다.

 

8. 최종 프로젝트 결과 (사이트 링크)

---

백엔드에서 기본적으로 목표로 잡았던 기능들을 모두 완료하였습니다.

- 회원가입, 로그인, 개인 정보 표시 완료

- 장바구니 CRUD 기능 완료

- 주문 CRUD  기능 완료

 

회원가입을 하고 로그인을 한 상태의 메인 페이지

장바구니 CRUD 가 가능하다.

주문완료를 진행하면 주문 내역을 확인할 수 있다.

 

9. 공유하고 싶은 코드

---

공유하고 싶은 코드는 다름 아닌 API 요청 결과를 로그로 확인하는 코드입니다 (보통은 실 프로젝트와 관련이 깊은 소스일 것이다!).

선택한 이유는 디버깅 로그가 그만큼 중요하다고 생각이 되었기 때문입니다.

프로젝트 진행과정에서 프론트엔드 담당자분들과 같이 API 송수신을 테스트해볼 일이 종종 있었습니다.

그래서 송수신에 문제가 없었는 지 확인하는 로그를 작성하여야 했는데 기존 로그의 경우 한줄로 표시되고 req.body값이 표시되지 않아 어느 부분이 잘못되었는 지 판단하기에 어려움이 있었습니다.

따라서 아래의 사진과 같이 변경하였고 로그 디버깅에 많은 도움이 되었습니다.

 

기존 API 요청 상태 로그 (가독성이 떨어지고 req.body가 표시되지 않아 이슈 발생 시 원인파악이 어렵다.)

변경한 로그 (가독성이 향상되고 req.body가 표시되어 디버깅에 용이한 것을 확인할 수 있다.)

 

10. 다음 프로젝트에 추가해보고 싶은 기능

---

OAuth

요즘 유저(나를 포함한)들은 회원가입하라고 하면 사이트를 나가버리곤 한다. 아이디를 외우기 귀찮고 보안이 신경쓰이기 때문일 것이다. 그렇기에 OAuth를 통해 사용자가 회원가입을 하지 않아도 되도록 하는 소셜 로그인 기능을 추가해보고 싶다...!!

 

사진 업로드

사람들과 이미지를 공유할 일은 정말 많다 (현재 블로그에도...). 그래서 꼭 해보고 싶다.

 

 

11. 프로젝트를 되돌아 보며

---

좋은 사람들과 함께해서 많이 좋았다.

같이 만드니 더 재미있었던 것 같다. 나는 혼자서 토이프로젝트를 두번정도 해봤었는데 보통, '포트폴리오를 만든다는 의무감'과 '만드는 것 자체의 재미' 중간선상에 놓이는 경우가 많았다 (그만큼 안 재밌을 때도 있음). 그런데 이번 프로젝트는 서로 마음도 잘 통해서 그런지 내가 '포트폴리오를 만들고 있다'는 생각은 잘 안들고 '프로젝트 완성에 같이 향해가고 있구나' 라는 생각이 많이 들었다. 또 코딩을 하는 것도 재미있었지만 서로 의견을 공유하는 과정에서 다른 사람의 생각을 듣는 것도 재미가 있었다 (나는 남들의 생각을 읽는 걸 좋아하는 편인 것 같다. 생각이 코딩으로 표현되니 보는 재미도 나름 있다).  또한 코딩하느라 피곤할 때는 잡답도 했는데 지칠 때 도움이 되었다.

 

팀원들과의 소통이 잘 되었다.

소통의 중요성에 대한 예시는 설명하지 않아도 알 것이다. 경험상 단방향적인 대화는 듣는 사람 입장에서 너무나 다양한 생각을 가질 수 있기 때문에, 한 사람만 이야기하고 회의가 마무리될 경우 오해를 낳는 경우가 많았다.

그러나 우리 팀원들은 모두 자신의 의견을 피력할 수 있었고 서스럼없이 상대방과 소통 시 기분상하지 않게 이야기할 수 있는 자질을 갖추고 있었다. 좋은 팀원분들과 함께 프로젝트를 할 수 있어 잊지 못할 추억이 될 것 같다. (우리 팀원 모두 잘되서 좋은 일만 있었으면 좋겠다)

 

 

 

 

매우 유명한 사진 (소통이 안되면 안해도 될 일을 만들어서 하게 된다.)