[React x 쇼핑몰 토이프로젝트] Mout__

 

 

이전에 부트캠프 과정으로 React 프레임워크 활용 과제를 진행했었다.

과제를 통해서 부족한 부분이 있었지만 제출 기한때문에 보완하지 못했던 것이 있었고,

3월 13일 ~ 4월 2일 약 3주간 이러한 부분들을 새로운 토이프로젝트를 통해 공부하면서 배포까지 진행보았다.

 

※ 기술스택: Typescript, React, Emotion, Firebase Auth, Firestore Database, Context api

 

 

1. 개요 및 기능

---

 자주 이용하는 쇼핑몰 중 무신사스토어, 솔드아웃이 있는데 비슷한 컨셉을 목표로 웹사이트로 프로젝트를 진행했다.

상품 데이터는 하드코딩으로 JSON 데이터를 만든 후 JSON Server로 사용하다가 Glitch로 배포해 사용했다.

로그인/회원가입부터 쇼핑몰의 기본적인 기능에 자신의 스타일을 공유할 수 있는 커뮤니티 페이지, 상품 랜덤 추첨 페이지까지 추가했다.

 

1. 로그인/회원가입

- 이메일 또는 구글 로그인/회원가입 (회원가입 시 유저별 카트 데이터베이스 생성)

- 유저 프로필 정보 변경 (닉네임, 주소)

 

2. 쇼핑몰

- 카테고리별 상품 리스트 페이지

- 상품 디테일 페이지 내 리뷰 및 별점 작성 가능 (작성 시 리뷰 및 별점 데이터베이스에 저장)

- 검색 시 자동완성 기능

- 유저별 장바구니 

- 최종 결제 전 주문 페이지 (배송지 정보 입력)

 

3. 커뮤니티

- 유저 스타일 공유 커뮤니티 페이지

- 게시글 작성 시 스타일 이미지, 제목 등 데이터베이스에 저장

 

4. 상품 랜덤 추첨 : 상품별 확률 설정으로 추첨

 

 

0123456

 

 

2. 깃허브 / 배포 링크

---

- 깃허브 링크:  https://github.com/jjongminmoon/mjstore

GitHub - jjongminmoon/mjstore

- 배포 링크: https://mjstore.vercel.app/

Mout__

 

 

3. 후기

---

이번 토이프로젝트는 보완할 부분에 대해서 공부를 하고 진행해서 그런지 배포까지 걸리는 기간은 더 빠르게 진행되었다.

이전 과제에서는 별점과 비슷한 좋아요 기능을 데이베이스에 저장하지 못해서 어려움을 많이 느꼈었는데 이번에는 별점 기능을 구현할 수 있었다.

또한, 장바구니를 구현하면서도 처음에는 reducer 와 context api를 이용해 코드를 짰지만, 데이터베이스에 저장해서 사용하는 것이 더 효육적일 것이라 생각해서 Firestore를 이용해 카트 데이터베이스를 생성해 관리를 했다.

가이드라인 없이 공부했던 내용들을 보완해서 코드를 짜고 배포까지 진행할 수 있어서 개발자로써 더 성장할 수 있었던 기회였다.

 

 

4. 다음은!

---

프로젝트를 진행하면서 도움을 받았던 글이나 코드들, 어렵게 느꼈던 부분들을 까먹지 않기 위해 블로그에 정리해서 작성해보려한다.

또한, 지금 구현해보고 싶은 기능들이 몇 가지 더 있는데 블로그 정리 후 남는 시간에 추가적으로 구현을 진행해보려 한다. 이후 구현된 기능들까지 최종적으로 배포할 것이다.