0. 시작
회사에 프론트엔드 개발자로 일하며 어느덧 2년차가 되어가는 와중에 npm 내가 쓰기위한 라이브러리를 배포해보는 개인 프로젝트들은 진행해 봤지만 취업준비를 했던 때 처럼 웹사이트를 만들어보는 프로젝트를 다시 한번 진행해보고 싶었다.
새로운 주제를 잡고 만들어 볼까 싶었지만 예전에 진행한 지금 와서 생각하면 아쉬웠던 프로젝트를 리팩토링 해야겠다는 마음에 시작하게되었다.
1. 기존 프로젝트 분석
💡 주제 및 개기
- 주제: 의류 쇼핑몰 (e-commerce)
- 하나의 사이트를 만들어보는 프로젝트를 진행해보고 싶었음
- typescript, nextjs를 부딪치며 숙달하고자 진행
🛠 사용기술
- typescript
- nextjs
- redux toolkit
- mongoDB
- next-auth
⚙ 기능
- 유저 및 배송지 관리
- 상품 (카테고리, 사이즈, 색상)
- 결제 및 환불 (부트페이 사용)
- 좋아요, 장바구니 기능
- 상품 리뷰
🔧 개선사항
기술에 대해 미숙한 상태로 진행한점과 기획과 명확한 기능 명세를 정리하지 않고 개발을 하다보니 그때 그때 생각난 기능을 개발하는데 급급했었던 프로젝트였다.
그러다보니 기능은 동작하지만 최적화를 하지못하여 느리고 버벅거리는 현상이 많았었다.
- 기획을 제대로 하지 못하여 중간중간 데이터베이스를 수정하는 일이 잦았고 그에 따라 전체적인 코드들의 수정사항이 너무나도 많았었다.
- typescript 에 익숙하지 않아 interface나 type들을 중복해서 만드는 일이 많았다.
- react, nextjs, 상태관리에 대해 미숙했기에 전체적으로 렌더링 최적화를 진행하지 못했었다.
(이미지 최적화라도 했으면 좋았을텐데..) - 데이터 캐싱을 신경쓰지 못하였다.
다른 개선사항들도 있었겠지만 위 사항들이 가장 아쉬웠던 부분들이 아니었나 생각이 들었다.
2. 재기획
🛠 기술
개발전에 사용할 기술을 다시 정리해보자
- typescript
- nextjs
- postgresql
- prisma
- 상태관리 (고민중... zustand?)
- next-auth
- tailwind, postcss
- eslint, prettier, stylelint, commitlint
⚙ 기능
기존 기능들에 실제 의류쇼핑몰들에 사용되는 기능들까지 추가하고자 한다.
- 유저 (배송지 및 등록카드 관리)
- 상품 (색상, 카테고리, 사이즈, 재고관리)
- 할인, 포인트 및 쿠폰 기능
- 상품 리뷰 및 Q&A
- 쇼핑몰 커뮤니티 (공지 및 Q&A)
- 결제 (PG연동x) 및 환불
- 관리자 (상품, 게시글 관리 기능)
필요한 기능 구현사항들 정리
| 구분 | 기능 | 상세 기능 | 설명 | 비고 |
|---|---|---|---|---|
| 1. 회원가입/로그인 | 1.1 이메일가입 | 1.1.1 약관동의 | ||
| 1.1.2 아이디, 비밀번호, 이름, 휴대전화, 이메일 | 정보입력 | |||
| 1.1.3 가입완료 | ||||
| 1.2 소셜로그인 | 구글, 네이버 등 | |||
| 1.3 비회원 주문조회 | 주문번호 및 주문비밀번호 입력 | |||
| 2. 네비게이션 | 브랜드, 남성, 여성, 룩북, 커뮤니티, 로고, 검색, 장바구니, 회원 | |||
| 검색 | 오버레이 형식, 인기키워드(#사용) | |||
| 3. 푸터 | 로고, 정책, 몰정보, 고객센터, 몰sns | |||
| 4. 홈 | 4.1 신상품 | 신상품 슬라이드 | ||
| 4.2 인기상품 | 인기상품 슬라이드 or 그리드 | |||
| 4.3 룩북 | 룩북 슬라이드 | |||
| 4.4 가입 | 비로그인 시 가입 환영 섹션 | |||
| 5. 상품조회 | 5.1 카테고리 선택 | 상단에 카테고리 선택 | ||
| 5.2 인기상품 | 인기상품 슬라이드 | |||
| 5.3 상품목록 | 그리드 형식으로 페이징 처리하여 보여주기 | |||
| 5.4 필터 | 상품검색필터 | |||
| 5.5 상품카드 | 위시리스트, 상품명, 가격 및 할인, 색상 종류, 썸네일 | |||
| 위시리스트 토글, 썸네일하나 또는 2장(앞/뒤 이미지) | ||||
| 할인중일 경우 남은 할인기간 표시 | ||||
| 6. 상품상세 | 6.1 상품선택 | 상품 정보와 함께 상품 옵션선택 및 구매/장바구니/찜 기능 | ||
| 6.2 상품리뷰 | 회원 정보(이름, 키, 몸무게) 구매 정보 (색상,사이즈 등) | |||
| 구매한 회원만 리뷰 작성 가능 | ||||
| 6.3 상품문의 | ||||
| 7. 장바구니 | 회원/비회원 상관없이 조회 가능 | |||
| 비회원일때 담은 정보 로그인 후에도 동기화 | ||||
| 8. 커뮤니티 | 8.1 공지 | 몰 공지 | ||
| 8.2 리뷰 | 리뷰 모음 | |||
| 8.3 Q&A | 몰에대한 질문 | |||
| 9. 주문 | 9.1 배송지 | 배송지 입력/선택/추가 | ||
| 9.2 주문목록 | 상품목록나열 | |||
| 9.3 할인정보 | ||||
| 9.4 결제정보 | 상품, 배송비, 할인정보, 포인트사용정보 등 | |||
| 9.5 포인트 적립 | 포인트 적립안내 | |||
| 9.6 결제수단 | 카드등록/선택 또는 무통장 | |||
| 9.7 약관동의 | ||||
| 10. 마이페이지 | 10.1 쇼핑정보 | 주문/배송, 취소/반품 | ||
| 10.2 해택 | 적립, 쿠폰 | |||
| 10.3 활동정보 | 회원정보 수정, 주소관리, 리뷰관리, 문의관리, 찜/장바구니, 탈퇴 |
🔩 DB 설계
필요한 테이블 종류들만 간단히 나열
- 유저
- 상품
- 상품상세(색상, 사이즈, 재고)
- 카테고리, 색상, 사이즈
- 상품 리뷰
- 상품문의, 상품문의 답변
- 위시리스트 (상품에대한 정보만)
- 장바구니 (상품상제정보까지)
- 쿠폰, 포인트
- 할인
- 주문 (여러 상품을 한번에 구매할때)
- 주문상세 (주문내의 각각 상품 정보 담김)
- 배송지
- 커뮤니티, 몰 문의
- 룩북
...
프로젝트를 시작하기 앞서 기획을 간단하게나마 정리를 해보니 이전에는 얼마나 막무가네로 시작했는지를 보고 어질어질한 느낌이다...
이제 간단하게 정리한 내용들을 기반으로 화면을 생각해보고 DB를 명확히 설계한 후에 프로젝트 진행을 할 것이다.
FE 탐구생활 🙂