ISU Online Shopping은 쇼핑몰을 주제로 E-commerce형태의 웹 서비스를 구현해보고자
진행하게 된 프로젝트입니다.
아래 링크에서 프로젝트 데모 확인이 가능합니다.
- 2021.02 ~ 2021.05
-
Front End
- React, React hooks, Redux, Redux-thunk, SCSS, JavaScript(ES6+)
-
Back End
- Node.js, Express, MongoDB, Mongoose
- redux로 상태 관리
- 미들웨어 redux thunk로 비동기 처리
- react-router 로 SPA 구현
- font awesome api 로 아이콘 추가
- JWT 토큰과 LocalStorage를 사용하여 로그인/로그아웃 구현
- Multer 라이브러리 사용하여 이미지 업로딩 기능 구현
- Paypal api를 사용하여 페이팔/신용카드 결재 기능 구현
- BEM 방법론을 적용한 SCSS로 웹 디자인 구성
- 미디어쿼리로 모바일, 테블릿, PC 크기에 따른 반응형 렌더링 구현
- MongoDB로 데이터 관리, Express에서 mongoose로 쿼리 실행
- 회원가입/로그인/로그아웃
- 페이지네이션
- 상품 검색
- 카테고리 검색
- 제품 상세 페이지
- 상품 리뷰
- 주문 Checkout 프로세스
- 장바구니
- 페이팔/신용카드 결제기능
- 주문확인용 사용자 마이 페이지 , 프로필
- Admin 유저, 제품, 주문 관리 페이지
- 반응형 웹
ISU_Online_Shopping.mp4
데스크탑, 아이패드, 모바일 각 화면에 맞춰서 반응형 웹을 구현하였습니다.
이번 프로젝트를 진행하면서 백엔드를 경험해 볼 수 있었습니다.
Node.js와 express, mongoDB를 사용해 서버와 데이터베이스를 구성하고 구현하는데 시간이 들었지만
프론트엔드와 요청하고 받아오는 데이터가 어떤 흐름인지 이해하고
어떻게 클라이언트 화면에 나타낼 수 있는지에 대해 더 깊은 이해를 할 수 있었던 경험이었습니다.
이번 쇼핑몰 개발을 진행하면서
RESTful-api에 대한 이해, Redux 를 이용한 상태관리, 토큰을 이용한 회원가입 / 로그인 / 로그아웃 구현,
CSS전처리기(SCSS)를 이용하며 BEM을 따른 스타일링 등을 공부할 수 있었습니다.
이번 기회를 통해서는 비동기 작업에 대해서는 Redux thunk가 필요하다는 것을 배울 수 있었으며,
도중에 SCSS를 직접 다루는 과정에서 내가 원하는 디자인으로 변경해보고 싶었기에
몇차례에 걸쳐 작업을 더 진행해봄으로써,
SCSS을 통한 코드중복 및 변수를 활용한 유지보수의 편리함을 여러번 느낄 수 있었습니다.