Team Project - Nike Clone Coding (1)

Wook·2022년 2월 5일
0
post-thumbnail

📲 팀 프로젝트

저번 Wepleshop 1차 프로젝트를 수행 후 두번째 팀 프로젝트입니다. 1차 프로젝트에서의부족한 점과 더 배우고 싶었던 점을 깨달았고, 이를 보완하는 방향으로 프로젝트를 진행해보자 하는 생각으로 이번 프로젝트를 진행하였습니다.
이번 클론 코딩 프로젝트의 주제는 Nike 웹사이트 입니다.
나이키는 스포츠웨어계에서 가장 유명한 브랜드라고 해도 과언이 아닐 브랜드입니다. 평소 나이키를 좋아하는 저와 희윤님에 의해 Nike 가 채택되었고, 저번 마플샵 클론코딩과 마찬가지로 웹 쇼핑몰이기에 진행 방향은 비슷했습니다. 차이점은 리스트 페이지 내에서의 다양한 필터링 SNKRS 페이지에서의 응모 및 추첨 기능이었으며, 백엔드를 구현할 저와 준혁님은 각자 이러한 메인 기능을 한 가지씩 분담하여 프로젝트를 진행하였습니다.


⭐️ Team : 역할 분담

백엔드 : 이준혁 김영욱
프론트 엔드 : 황희윤, 이진웅

적용 기술

  • Front-End : React.js, Sass
  • Back-End : Node.js, Express, Prisma, nodemon, JWT, Bcrypt, My SQL, CORS
  • Common : RESTful API
  • Community Tools : Slack, Zoom, Notion

저번 프로젝트는 프론트엔드백엔드를 개인이 모두 한가지 이상을 구현하며 Fullstack으로 프로젝트를 진행하였습니다.
1차 프로젝트를 통해 프론트 엔드백엔드 중 어떤 것이 각자 자신에게 적합한지를 파악 가능했으며, 이번 2차 프로젝트는 프론트 엔드백엔드의 역할을 명확히 나누어, 프로젝트를 진행하였습니다.

백엔드 외의 역할이 있었다면, 프론트 엔드단에서 사용할 이미지(제품 이미지)는 순조로운 작업을 위해 백엔드인 저와 준혁님이 자료 수집을 진행하였습니다.
그 외엔 프론트 엔드와 백엔드의 작업들이 모두 역할 분담을 통해 이루어졌습니다.


🐳 Nike Web Page

나이키 공식 홈페이지입니다. 해당 페이지의 큰 범주인 메인 페이지, 리스트 페이지 및 필터 기능, 디테일 페이지 입니다.

(나이키 디테일 페이지 / 출처 : 나이키 공식 홈페이지)


(나이키 리스트 페이지 / 출처 : 나이키 공식 홈페이지)


(나이키 리스트 페이지 - 필터링 (1) / 출처 : 나이키 공식 홈페이지)


(나이키 리스트 페이지 - 필터링 (2) / 출처 : 나이키 공식 홈페이지)


(나이키 디테일 페이지 / 출처 : 나이키 공식 홈페이지)


🐳 Backend

준혁님과 호흡을 맞췄던 백엔드 작업입니다. 초기 모델링, 프로젝트 초기 세팅, 데이터 생성 및 활용, 미들웨어 및 API 생성 등의 작업들을 진행하였습니다. 협업을 하면서 서로 부족한 점에 있어서 서로 도울 수 있었던 점이 매우 좋았으며, 처음 같이 작업을 진행하였지만, 합이 꽤나 잘 맞아서 재밌고 즐겁게 프로젝트를 진행할 수 있었습니다.


📲 Modeling

저번 프로젝트와 같은 쇼핑몰 클론 코딩이었기 때문에 비슷하게 접근을 시도하였습니다. 차이점이 있다면, 세 개의 큰 범주(신발, 의류, 용품)가 나누어져 있다는 것, 그리고 SNKRS(추첨 및 응모 기능)의 추가 구현, 카카오 로그인 연동으로 인한 Users 테이블의 고려와 다양한 필터링 기능 구현에서 추가되는 많은 기능들이 있다는 것이었습니다.

(초기 모델링)

프로젝트 초기 단계에서 가장 처음 구축한 모델링입니다. products 테이블을 통해 모든 제품을 관리하는 것이 아닌, 처음부터 네 개의 큰 카테고리(shoes, clothes, accessories, SNKRS)를 테이블 자체로 분할하여 관리하도록 해주었고, 해당 제품군과 유저 사이의 중간 테이블을 통해 장바구니와 리뷰등을 구현하도록 하였습니다. 왼쪽의 다양한 테이블들은 제품의 정보(색상, 사이즈, 이미지 등)와 다양한 필터의 기능을 위한 sub_filter 테이블들을 따로 구현해주었습니다.
문제점은 장바구니 기능 구현시에, products 테이블로 관리하는 게 아닌 3개의 제품군의 테이블을 모두 순회해야 한다는 것이었고, 확장성을 고려해보았을 때도 이러한 테이블 구성은 원할하지 못한 확장성을 야기할 수 있다는 것이었습니다. 즉, 모델링의 수정이 필요했습니다.


(수정된 모델링)

이전 모델링에서의 문제점을 해결하기 위해 3개의 테이블 (shoes, clothes, accessories) 테이블을 하나의 테이블 (products)로 통합시켜주었으며, 하위 속성들의 테이블 (색상, 사이즈 등)도 모두 단일적으로 통합시켜주어 그 전보다 적은 테이블 수를 가지는 보다 간결한 모델링을 구축하였습니다. 이를 통해 확장성을 고려할 수 있게 되었고, 장바구니 기능 구현시에도 문제가 존재하지 않도록 해주었습니다.


Team Project - Nike Clone Coding (2) 에서 다음 포스팅이 이어집니다. 감사합니다 🥰

profile
지속적으로 성장하고 발전하는 진취적인 태도를 가진 개발자의 삶을 추구합니다.

0개의 댓글