[book-store] 프로젝트 회고

yujin·2023년 3월 17일
프로젝트

프로젝트

목록 보기
7/26

1차 팀프로젝트

[ 담당 페이지 ]
- 주문 관련 페이지 (회원/ 비회원 주문, 완료)
- 관리자 페이지 ( 유저관리, 주문관리 )
- 마이 페이지 ( 회원 정보 조회/수정, 비밀번호 수정, 주문내역 조회/수정 )
- 도서 상세 페이지

우리의 목표

저희 팀의 목표는 먼저, 쇼핑몰로써의 기본적인 기능들을 모두 구현해내는 것이었습니다. 팀원 모두 이제 막 배우기 시작한 단계였고, 3주라는 시간 안에 쇼핑몰 페이지를 구현해야 했기 때문에 우선 기본적인 기능 구현을 통해 실력을 향상시키는 것을 목표로 했습니다.

기술 스택 선정

아직 배우는 단계인 만큼 기본기를 다지는 것을 목표했고, 이에 따라 저희가 엘리스에서 배운 기술들로 개발하며 기본 실력을 다지기 위해 다음과 같은 기술 스택을 선정하였습니다.

[Programming(FE)]
- REACT
- JAVASCRIPT
- styled-components

[Programming(BE)]
- NODE.JS
- EXPRESS
- MONGODB

[Library]
- REACT-ROUTER V6
- AXIOS

프로젝트 구조 및 코드 컨벤션 정의

[ 프로젝트 구조 ]

처음 프로젝트 진행 시 코치님께서 폴더 구조를 통일해야 merge할 때 에러가 많이 나지 않을거라고 조언을 해주셨습니다. 따라서 저희 팀은 프로젝트 개발을 시작하기 전, 전체적인 코드 구조를 정했습니다. 이 과정 덕분에 merge 시 충돌이 덜 나는 장점도 있었고, 코드를 병합하는 과정에서 다른 팀원의 코드를 볼 때 어디에 있는지 쉽게 알 수 있었던 장점도 있었던 것 같습니다.

자세한 폴더 구조 통일 과정은 아래의 블로그 링크에서 볼 수 있습니다.

https://velog.io/@yujin02371/book-store-폴더-구조-통일-및-페이지-UI-구현

[ 코드 컨벤션 ]

먼저, 팀원마다 사용하는 문법이 다르면 git에서 변경점으로 인식할 수 있기 때문에 이런 불필요한 인식들을 없애기 위해 그리고 코드의 통일성을 위해 eslint와 prettier를 사용했습니다.

또, 팀 회의를 통해 코드 컨벤션을 정하고, 어떤 방식으로 정리하면 좋을지 코치님께 조언을 구해 팀 노션 페이지에 다음과 같이 정리했습니다.

프로젝트 내용

다음은 저희 프로젝트에서 구현이 완료된 기능이자, 엘리스에서 제시한 기본 요구 기능을 정리한 내용입니다.


[ 사용자 관련 기능 ]

  1. 회원가입
  • 폼의 입력 값이 조건에 맞지 않을 경우 이를 사용자에게 알려줍니다.
  • 조건에 맞게 입력 후 제출 버튼을 누를 시, 백엔드 서버와 연결되어 회원가입 정보가 db에 저장됩니다.
  1. 로그인 및 로그아웃
  • 폼의 입력 값이 조건에 맞지 않을 경우 이를 사용자에게 알려줍니다.
  • db에 저장된 정보로 로그인 성공 시, JWT 토큰이 프론트 단에 저장되고, 다른 페이지(랜딩페이지, 상품페이지 등)로 이동합니다.
  • 로그아웃 시, 프론트 단에 저장되어 있던 JWT토큰이 제거됩니다.
  1. 마이페이지
  • 사용자는 개인 페이지에서 자신의 회원 정보를 조회, 수정, 삭제(탈퇴)할 수 있습니다.
  1. 관리자
  • 관리자 계정이 존재하며, 일반 사용자 계정과 구분됩니다.

[ 상품 (제품) 관련 기능 ]

  1. 카테고리
  • 사용자가 카테고리 목록을 화면에서 확인할 수 있습니다.
  • 관리자 페이지에서 카테고리를 추가, 수정, 삭제할 수 있습니다.
  1. 상품
  • 사용자가 특정 카테고리를 선택할 시, 해당 카테고리에 속한 상품 목록이 화면에 나타납니다.
  • 사용자가 특정 상품을 선택할 시, 해당 상품의 상세 정보가 화면에 나타납니다.
  • 관리자 페이지에서 상품을 추가, 수정, 삭제할 수 있습니다.

[ 장바구니 관련 기능 ]

  • 장바구니 관련 데이터는 백엔드 데이터베이스가 아닌, 프론트단(localStorage, sessionStorage, indexedDB 등)에서 관리됩니다.
  • 프론트 단에 장바구니에 속한 상품 관련 데이터가 저장되어서, 페이지를 새로고침해도 장바구니에 상품들이 그대로 남아 있습니다.
  • 사용자는 상품을 장바구니에 추가할 수 있습니다.
  • 사용자는 장바구니에 속한 상품의 수량을 수정할 수 있습니다.
  • 사용자는 버튼 1번의 클릭으로 장바구니 상의 전체 상품을 제거할 수 있습니다.
  • 사용자는 장바구니에서 일부 상품을 골라서 제거할 수 있습니다.
  • 사용자는 장바구니에 담긴 상품들의 총 가격을 확인할 수 있습니다.

[ 주문 관련 기능 ]

  • 사용자는 장바구니에 속한 상품들로 주문을 추가(진행)할 수 있습니다.
  • 사용자는 주문 완료 후 배송이 시작되기 전까지 주문 정보를 수정할 수 있습니다.
    • 저희 프로젝트에서 나눈 주문의 상태는 다음과 같습니다.
    • 주문확인중/배송 준비중/배송 중/배송 완료/취소
    • 주문 상태가 배송 중/배송 완료/취소일 경우 사용자는 주문 정보를 수정할 수 없습니다.
  • 주문 완료 시, 주문 완료 페이지로 이동합니다.
  • 사용자는 개인 페이지에서 자신의 주문 내역을 조회, 취소할 수 있습니다.
  • 관리자 페이지에서 사용자의 주문 내역에서 배송 상태를 수정할 수 있습니다.
  • 관리자 페이지에서 사용자들의 주문 내역을 조회, 삭제할 수 있습니다.

프로젝트 회고 (어려움 및 느낀점)

우선 저희가 목표했던, 엘리스의 기본 요구 기능들은 모두 구현했습니다!
하지만 프로젝트를 진행하며 어려웠던 점도 있었는데요, 이에 대해 기록해보겠습니다.

[ 첫번째 어려움 - 진행 상황 체크]

프로젝트 기간의 절반인 시점에서, 코치님들과 함께 각자의 진행상황을 체크했습니다. 제 블로그 기록에서 알 수 있듯이, 첫째주는 거의 figma, flow-chart, emd, 폴더 구조 통일, 컨벤션 통일 등만 진행했습니다. 그러다보니 이 시점에서 저희 팀의 진행 상황은 다음과 같았습니다.

통신까지 완료된 페이지

장바구니 페이지, 도서 상세 페이지

UI까지는 완료된 페이지

주문 관련 페이지, 로그인 페이지

UI 구현 못했고, 아직 진행 중인 페이지

메인(카테고리)페이지

아직 시작 못한 페이지

관리자 페이지 (유저, 도서, 주문, 카테고리), 마이페이지, 회원가입 페이지

이제 거의 1주 반이 남은 상황이었는데요, 프론트엔드 팀원들끼리 해결이 잘 안되는 부분은 서로 이야기를 했지만, 따로 진행 상황을 공유하지는 않았습니다. 코치님들 덕분에 서로 어느 정도 진행 되었는지 공유했고, 저희 팀은 배포를 위한 시간도 남겨야 했기 때문에 시간이 촉박할 수도 있겠다고 느꼈습니다. 속도가 더디다는 것을 알게 된 저희는 원래 정했던 개발 시간인 10시~18시 이외의 시간에도 서로 소통하며 개발했고, 추가로 주말까지도 페이지 구현에 집중했습니다. 그 결과 다행히 배포까지 제 시간 안에 마칠 수 있었습니다.

[ 두번째 어려움 - BE와의 소통 ]

두 번째 어려움은 저와 백엔드 팀원과의 소통 부족 문제로 인해 발생했었습니다. 제가 주문 관련 페이지를 모두 구현했을 당시, 회원 / 비회원 모두 주문에 관련된 모든 기능이 잘 동작하는 것을 확인했었습니다. 하지만 발표 2일전, 기능 테스트를 하는데 갑자기 모든 주문 관련 동작이 제대로 되지 않았습니다. 이를 알게된 후 바로 백엔드 팀원분께 이야기하여 같이 원인을 찾고자 했고, 알고보니 며칠 전 BE쪽에서 API를 전부 바꿨는데 이 부분이 저에게 전달이 되지 않았던 것이었습니다.

발표가 얼마 남지 않은 상황에서 갑자기 생긴 일이었기 때문에 조급했고, RESPONSE 값의 형식까지 달라져서 더 어렵게 느껴졌습니다. 이 부분은 백엔드 담당 팀원 분과 계속 이야기를 하며 FE에서 빠른 시간 내에 고칠 수 있는 부분은 FE에서 수정하고, 대부분의 코드를 수정해야 할 경우는 BE에서 RESPONSE 형식을 원래대로 수정해주는 방식으로 진행했습니다. (원래 배열의 형식으로 넘어와서 map을 사용했는데, 수정 후 객체 형태로 넘어와서 대부분의 코드를 수정해야하는 등의 상황의 경우, BE에서 처리해 주었습니다.) 다행히 BE 담당 팀원 분과 새벽까지 함께 수정한 결과, 발표 하루 전 모든 문제를 해결할 수 있었고, 다시 한번 모든 테스트까지 해볼 수 있었습니다.

[ 느낀점 ]

우선, 프로젝트에서 의사소통이 정말 중요하다는 것을 배울 수 있었습니다. 백엔드와의 소통 뿐만 아니라, 같은 프론트엔드 팀원 분들과도 자주 소통을 해야한다는 것을 느꼈습니다. 또한 매일매일 팀원 간 진행 상황을 공유하는 것이 정말 중요하다는 것을 느꼈고, 다음 프로젝트에서는 이를 적용해볼 예정입니다.

또, 구현 완료 후 기능이 제대로 동작한다고 계속 안심하지 않고, 자주 테스트를 해봐야겠다고 생각했습니다. 물론 원활한 의사소통이 우선이겠지만, 혹시 모를 상황에 대비해 기능 테스트를 자주 하면 문제가 생겼을 때 빨리 대응할 수 있을 것 같습니다. (발표가 얼마 남지 않은 시점에 제가 담당한 부분에서 문제가 발생되니 부담감이 꽤 있었습니다..ㅠ)

전체적으로 이번 프로젝트를 통해 많이 성장할 수 있었던 것같습니다. 회의를 통해 폴더 구조 및 규칙 등을 정하며 협업을 경험할 수 있었습니다. 또 처음에는 어떻게 시작해야할 지 몰라서 한 페이지를 만드는 데에 며칠이 걸렸지만, 마지막 쯤에는 하루도 안 걸려서 마이페이지의 UI뿐만 아니라 기능까지 완성할 수 있었습니다. 어려운 점도 있었지만, 이를 통해 얻은 점도 많은 프로젝트인 것 같습니다.


리팩토링 하고 싶은 부분

1. 주문 정보 입력 폼 - 비제어 사용

현재 주문 정보는 state로 관리하고 있습니다. 따라서, 사용자가 입력한 값과 저장되는 값이 실시간으로 동기화되어, 새로운 입력 값이 생길때마다 상태가 갱신됩니다. 이는 불필요한 리렌더링, 불필요한 api요청으로 인한 자원 낭비 문제로도 연결 될 수 있습니다.
비제어 컴포넌트를 이용하면 버튼 클릭 시에만 동기화하도록 할 수 있습니다.

이와 관련된, 리팩토링 시 참고할 예정인 블로그입니다.
https://velog.io/@yukyung/React-제어-컴포넌트와-비제어-컴포넌트의-차이점-톺아보기


2. alter 사용한 부분 - 모달로 변경

이 부분은 코치님께 피드백 받은 부분입니다. alter 사용 시 자바스크립트가 블러킹이 되기 때문에 요즘은 alter를 많이 사용하지 않는다고 합니다. 또한 요즘은 모바일을 많이 사용하는데요, 웹브라우저 사용자가 기본적으로 alert를 막을 수 있다고 합니다. 그러면 이를 오작동으로 받아들일 수 있기 때문에 보통 모달로 처리한다고 합니다.


3. 주문 폼의 이메일, 전화번호 등 형식 확인 - input칸 아래에 글씨로 표현

이 부분은 구현 시부터 리팩토링을 해야겠다고 생각한 부분입니다. 프로젝트 기간 마지막 쯤에 주문 폼에서 이메일, 전화번호 등 형식을 확인하는 기능을 추가하고 싶었는데, 시간이 부족해서 기능만 추가하고 alter로 사용자에게 표시하도록 구현했습니다. 따라서 이 부분은 input칸 아래에 빨간 글씨로 표시하도록 리팩토링 할 예정입니다.


4. 가격: 천단위 , 사용

가격의 경우 천 단위마다 ,를 표시하고 싶었지만 BE에서 int형으로 처리되어 있어 적용하지 못했습니다. 하지만, 찾아보니 Number().toLocaleString으로 천 단위마다 적용할 수 있다고 합니다. 따라서 이 부분을 리팩토링 할 예정입니다.

이와 관련된, 리팩토링 시 참고할 예정인 블로그입니다.
https://gocoder.tistory.com/1442

profile
yujin
이전 포스트

[book-store] 상세 페이지 API통신, React에서의 Table 에러

다음 포스트

[Portfolio] Next.js 프로젝트 만들기 (with TypeScript, TailwindCSS)

0개의 댓글