📲 팀 프로젝트

10월 중순부터 시작된 위코드 풀스택 부트캠프, 그간 JavaScript, HTML, CSS를 통해 기초를 다지며, 프론트엔드에서는 더 나아가 React, SASS 백엔드에서는 Node.js, Express, MySQL과 MVC Pattern을 적용한 Layered pattern, 서버와 통신 과정 등을 학습하며, 그간의 학습 과정을 다지기 위한 팀 프로젝트를 시작하게 되었습니다.
한 팀당 4~5명의 구성원을 이뤄 평소 팀원들이 구현해보고 싶었던 웹사이트를 클론 코딩하며, 그간 배운 프론트엔드와 백엔드 기술들을 적용해보며 부족한 부분을 점검하고, 공부했던 부분을 복습하며, 프로젝트에서 필요한 기술들을 더 배우고 성장할 수 있는, 여러모로 장점이 많은 프로젝트였다는 생각이 듭니다.

---

⭐️ Team : Wepleshop

우리 팀은 Marple Shop 홈페이지를 클론 코딩하기로 정하였습니다. 홈페이지는 큰 범주로 메인 페이지, 리스트 페이지, 상세 페이지, 로그인/회원가입 페이지 로 나뉘어졌으며, 팀원이 5명이었던 우리 팀은 메인 페이지에서 프로젝트의 비중이 클 것이라고 생각한, 슬라이드 기능을 구현하는 역할을 메인 페이지에서 분리하여, 홈페이지의 4개의 범주, 그리고 슬라이드 기능을 포함하여 총 5가지의 역할을 프론트엔드와 백엔드에서 각자 1개씩 역할을 맡아 팀프로젝트를 진행하였습니다.
팀 프로젝트에서 제 역할은 프론트엔드에서는 디테일 페이지 / 백엔드에서는 로그인 / 회원가입 을 맡게 되었으며, 이후 추가 기능 구현 사항에서 좋아요 기능 과 장바구니 추가, 삭제, 수정 기능을 추가적으로 구현하였습니다.

---

⭐️ 프로젝트 구현 영상

(하단 이미지 클릭시, Youtube 링크로 전환됩니다!)

---

🎱 구현 기능

Back-end

• MySQL을 이용해 데이터베이스 관리 (공통)

• 로그인, 회원가입 API (나의 역할)

  • 유효성 검증 기능
  • JWT을 활용한 토큰 발행
  • Bcrypt를 활용한 비밀번호 암호화
  • 로그인시 token을 이용하여 사용자 이름 호출 구현

• 카테고리 API

  • 1차 카테고리, 2차 카테고리 리스트

• 상품 리스트 & 필터링 & 정렬 API

  • 쿼리파라미터를 이용한 상품 리스트 필터링 구현

• 상품 상세 API

  • 특정 상품의 재고, 색상, 사이즈, 이미지 호출

• Carousel API

  • 슬라이드 이미지, 타이틀, 디스크립션 호출

• 애니메이션 슬라이드 API

  • 이미지, alt값 호출

• 장바구니 API (나의 역할)

  • 디테일 페이지에서 제품 정보를 받아 장바구니에 추가
  • 중복되는 제품 장바구니 추가시 수량을 추가
  • 장바구니 내 제품의 삭제 및 수량 변경 기능 구현

• 좋아요 API (나의 역할)

  • 유저 정보와 제품 정보에 따른 좋아요 기능 구현

Front-end

공통

• 회원가입 / 로그인 / 마이페이지

  • 아이디 패스워드 유효성 검증 기능 및 실패시 모달창 생성
  • 로그인시 백엔드 API를 이용해 토큰 발행

• Top / Footer / Nav

  • 각 부분 컴포넌트화하여 재사용 가능하도록 구현

메인 페이지

• 상품 리스트 API 호출하여 UI 구현

  • 상품 좋아요 기능
  • 재고 10개 미만일 때 재고 고지 및 품절시 품절 고지
  • 상품 필터링기능

• Carousel UI 구현

  • 외부 라이브러리 없이 자체 구현
  • 오른쪽 버튼, 왼쪽 버튼 상관없이 제대로 작동

• 애니메이션 슬라이드 UI구현

  • 좌우로 무한히 이동하는 슬라이드

상세 페이지 (나의 역할)

• 제품별 색상, 사이즈, 가격 적용 및 선택 기능 구현
  • 선택된 데이터 장바구니에 추가
• 제품 이미지 슬라이드 / 좋아요 기능 구현

장바구니 페이지

• 상세 페이지에서 불러온 데이터를 UI로 구현
• 로그인시 부여된 토큰을 이용해 장바구니 추가 및 삭제 기능 구현
• 장바구니에 담긴 상품의 계산 기능

---

🌈 My work (Back-end)

백엔드에서는 로그인 회원가입 API, 장바구니 API, 좋아요 API 를 구현하였습니다.
본래는 로그인 회원가입 API 만이 저의 역할이었지만, 프론트엔드에서의 디테일 페이지 작업을 하면서, 가공되지 않은 데이터들을 디테일 페이지에 적합하게 가공하는 작업을 거치면서, 해당 데이터들을 장바구니에 이용하는게 편리하다고 생각하였으며 (확장성을 고려했을 때 적합하지 않은 방법이었습기에, 2차 프로젝트에서는 확장성을 고려한 방향을 채택할 수 있었습니다.) 좋아요 기능 구현도 CRUD의 CD를 활용한다면 쉽게 구현 가능할 것이라고 생각되어 기능 구현을 맡았습니다.

⛳️ 기능 구현

로그인 회원가입

(회원가입 과정)

(로그인 과정)

userServices.js (MVC Pattern을 적용한 Service단, bcrypt 활용)

const { userDao, productCartDao } = require('../models/');
const bcrypt = require('bcrypt');
const token = require('../utils/token');

const signIn = async (email, password) => {
  const user = await userDao.getUserByEmail(email);

  const isSame = bcrypt.compareSync(password, user.password);

  if (!user) {
    const error = new Error('INVALID_USER');
    error.statusCode = 400;

    throw error;
  }

  if (!isSame) {
    const error = new Error('INVALID_USER');
    error.statusCode = 400;

    throw error;
  }
  const signToken = token.signToken(user.email);
  return signToken;
};

const signUp = async (name, email, password) => {
  const userData = await userDao.getUserByEmail(email);

  if (userData) {
    const error = new Error('EMAIL IS DUPLICATED');
    error.statusCode = 400;

    throw error;
  }

  const hashedPassword = bcrypt.hashSync(password, 10);
  return await userDao.createUser(name, email, hashedPassword);
};

utils/token.js (JWT 복호화 과정)

const jwt = require('jsonwebtoken');

const salt = 'SALTSALTSALT';

const signToken = (email) => {
  return jwt.sign({ id: email }, salt, { expiresIn: '30m' });
};

const verifyToken = (token) => {
  try {
    return jwt.verify(token, salt);
  } catch (err) {
    return null;
  }
};

module.exports = { signToken, verifyToken };

JWT, Bcrypt 라이브러리를 활용하여, 비밀번호를 암호화시켜 저장해주도록 해주고, userDao에서 받아온 user의 email을 JWT를 통해 토큰으로 발행해주도록 하였습니다.

---

디테일 페이지, 장바구니 API (프론트엔드 & 백엔드)

프론트 엔드에서 제 역할은 디테일 페이지 구현입니다. HTML, CSS, React 를 활용하여 모든 레이아웃을 구현하였으며, 디테일 페이지 API의 데이터들을 통해 제품 이미지, 사이즈 색상 선택창과 가격을 React의 useState()를 통해 설정해주었습니다.
또한 사이즈 혹은 색상이 선택되지 않고 장바구니 담기를 누를 경우엔 해당 경우에 따른alert()창을 구현해주었습니다.

백엔드에서 구현한 장바구니 추가 기능입니다. 디테일 페이지의 제품 정보와 유저가 선택한 사이즈, 색상, 수량 등의 정보를 통해 데이터베이스의 carts 테이블에 해당 데이터를 추가해주도록 하였습니다.

CRUD의 Delete 를 통해 장바구니의 삭제 기능을 구현하였습니다. 데이터베이스의 carts 테이블에서 해당 장바구니 항목을 삭제해주도록 처리하였습니다.

🎱 회고

현재 이 글을 쓰는 시점은 2차 프로젝트인 나이키 클론코딩 프로젝트까지 모두 완료된 상황에서 작성하는 포스트입니다. 1차 프로젝트인만큼 부족한 점이 많았으며, 저의 부족한 점을 1차 프로젝트에서 깨달았기에 2차 프로젝트에서 해당 부분들을 개선하고 보완할 수 있었기에 큰 의미가 있던 프로젝트라고 생각합니다.
무엇보다 팀과의 협업에서의 어떤 포지션에 집중을 해야 하며, Git 협업에 대한 태도와 기술 등을 부딪히며 배울 수 있었기에, 팀 프로젝트에서 갖춰야할 자세를 배웠다고 생각합니다.
MVC Pattern, REST API 의 적용 등도 익숙해질 수 있었으며, 해당 기술들의 필요성을 더욱 절실히 느꼈습니다.
초기 Modeling 과정의 중요성, 쿼리에 대한 이해와 활용 역시 백엔드 개발자로써 능숙하게 다뤄야할 점이라고 생각했으며, 저는 이 부분에서 재미있고, 흥미를 느끼며 시간 가는줄 몰랐던 제 모습을 봤으며, 프론트 엔드도 좋지만 백엔드쪽으로 마음을 굳히게 되었습니다.
2차 프로젝트마저 끝난 현 시점으로 아직도 배워야 하고 공부해야할 산들이 많습니다.
부딪히고 넘어져도, 계속해서 다시 일어나며 앞으로 나아가는 개발자가 되고 싶다는 포부가 생기는 프로젝트였습니다. 긴 글 읽어주셔서 감사합니다!