intro

1. project 소개

   세계 최대 스포츠 브랜드 쇼핑몰인 나이키의 한국 온라인 사이트(nike.co.kr)를 모티브하여 진행한 프로젝트. 평소에도 자주 이용하고 관심이 깊어 사이트 이용 플로우 이해하기 어렵지 않았지만 커머스 사이트의 플로우를 좀 더 깊이있게 학습할 수 있었다. 2주라는 짧은 기간동안 첫 프로젝트를 무사히 마칠 수 있게 도와준 팀원들에게 감사할 따름이다.

2. 개발 인원
   프론트엔드 : 4명
   백엔드 : 3명

3. 기술스택
   Front-End : React.js, SCSS
   Back-End : Node.js, Express, JSON WEB TOKEN, Bcrypt, Mysql, AWS(RDS)
   공통 : RestFul API

4. 관련링크 :
   [시연연상]
   [Github]
   [Trello]
   위 영상은 실제 백엔드의 rds와 통신하며 구현된 영상입니다.

feature

1. DB modeling
   product_options로 제품 별, 사이즈 당 재고 관리 수월
   

2. api 분기
   db modeling과 동시에 api 분기를 진행하여 시너지효과를 높였으며, 아래 작성된 분기표를 가지고 협업 및 분업을 수월하게 했다.
   

3. 백엔드 기능 구현 리스트

• 메인 & 제품 리스트 페이지에서 가격순, 릴리즈순, 할인순, 리뷰 순으로 정렬 / 사이즈, 컬러, 브랜드 별로 필터
• 회원가입 & 로그인 (회원가입 : 정규표현식에 따른 예외핸들링, 14세 이상만 회원가입 가능 / 로그인 : bcrypt(compare), jwt 발급)
• 상세페이지 (로그인, 비로그인에 따른 위시리스트 노출, 리뷰와 함께 노출)
• 위시리스트 (CRD)
• 장바구니 (CRUD) & 옵션변경에서 상세페이지 (R, API)
• 구매하기 (orders 테이블 부재로 재고 관리만, 장바구니 구매시 카트 삭제(transaction))

4. 내가 구현한 기능 리스트

• 로그인 : 로그인시 bcrypt compare를 통해 해시값을 디코딩하여 비교후 토큰 발급
• 토큰 검증 : 토큰 검증 과정(jwt.verify)을 사용시마다 route에서 미들웨어 함수로 호출하여 사용
• 장바구니 :
  장바구니 CRUD + 장바구니 옵션변경 상세페이지
  나이키 사이트의 플로우대로 재고를 실시간 반영하여 카트에 담을 수 있게 하였으며,
  같은 제품을 새로 담았을 경우 (수량만 변경할 경우) update 쿼리문으로 처리
  장바구니에서 옵션 변경시 프론트와 협의 후 새 get API 호출
• 구매하기 :
  상세페이지에서 구매, 카트에서의 구매로 2개의 API 구성
  재고를 실시간으로 체크하여 구매 성공시 stock이 차감되도록 함
  카트에서 구매시 재고가 차감되고, 해당 유저의 카트 테이블 로우가 삭제될 수 있도록 transaction 처리
  

communication skill

1.프론트와 변수명 통일을 초기에 세팅하여 통신 테스트하는데 있어서 시간을 확 줄일 수 있었다. 변수명을 통일하는 라이브러리가 있다고 하니 2차 프로젝트때는 해당 라이브러리를 찾아 이용하면 좋을 것 같다.

2.통신을 수월하게 할 수 있도록 담당 파트의 req, res를 공유
이미지엔 담을 수 없지만 에러핸들링에 관한 에러메시지도 같이 공유했으나 시간 관계상 모든 에러에 대해서 프론트와 합을 맞출 순 없었다.

3. 트렐로
   스프린트 미팅이나 데일리 스크럼미팅에서 트렐로를 기준으로 서로의 진행 상황을 파악할 수 있었고 중간 목표나 최종 목표까지 달성하는데 시간을 효율적으로 관리할 수 있었다.
   

code review

재고를 체크해야 하는 순간이 많아 해당 함수를 미들웨어로 빼두고 필요할 때 마다 require해서 사용했다. 발표 전까지는 해당 내용에 대해 뿌듯했지만 지금 이 글을 쓰는 순간에는 실시간 재고 체크하는 과정 조차 model단에서 한번에 처리했으면 좋았을 것이라는 생각이 든다. 다음 프로젝트때는 최대한 쿼리문을 덜 사용하여 서버 부하를 줄일 수 있는 방향으로 개발을 할 생각이다.

const { cartDao } = require('../models');

const checkStock = async (productOptionId, quantity) => {
  const productOption = await cartDao.getStock(productOptionId);

  if (productOption.stock === 0) {
    const error = new Error('OUT_OF_STOCK');
    error.statusCode = 400;

    throw error;
  }

  if (productOption.stock < quantity) {
    const error = new Error('REQUEST_QUANTITY_MORE_THAN_STOCK');
    error.statusCode = 400;

    throw error;
  }
};

module.exports = {
  checkStock,
};

프로젝트 회고

개발자 전직 결심 이후 첫 프로젝트였다. 처음이라 그런지 간단한 작업도 서툴렀고 커뮤니케이션도 서툴렀다. 부트캠프에서 2개월 동안 배운것들을 바탕으로 코드를 작성하고 팀원들과 협업하는 과정에서 처음인 만큼 부족한 점도 많았지만 배울 수 있던 점이 많았던 프로젝트여서 만족스럽다. 특히 아직까지는 튜토리얼 없이 코드를 작성해가는 실력을 키워야겠다 라는 점과 커뮤니케이션의 중요성을 다시 한번 깨달았다. 다음 프로젝트에서는 이 과정을 중점으로 두고 더 노력해봐야겠다.