티스토리 뷰
만들게 된 계기는?
'정뚜식'이라는 러시안블루 4개월 냥냥이를 키우고 있는 집사입니다. 😀
뚜식이를 키우면서 여러 고양이 용품을 파는 쇼핑몰들을 여러 곳 보게 되었는데 그중 정말 깔끔하게 잘 만든 쇼핑몰을 보았고
그 쇼핑몰의 디자인을 참고하여 저만의 쇼핑몰을 만들어보고 싶어 졌습니다.
그리하여 고양이 카페와 같이 사람들과 커뮤니티 활동할 수 있는 게시글 기능이 추가된 고양이 용품 쇼핑몰을 만들게 된 것입니다.
지금 생각해 보니 쇼핑몰 안에 게시글 기능의 자유로움으로 인해서 돌아올 영향은 백과흑을 넘나들거 같긴 합니다.🥲
이 작업물은 엄청 대단한 건 아니지만 서버와 DB 없이 나름 파이어베이스를 사용하여 프론트엔드 하나로 서비스 배포까지
또 익숙하지 않았던 데이터관리의 능력 향상 등 등 여러모로 저에게 성취감을 크게 느끼게 되었던 작업물 중에 하나입니다.
어떻게 만들었나?
- vite로 React 프로젝트를 생성하였습니다.
- css는 Css in js(Styled Components) & Sass(Scss)를 택하였습니다.
- react-router-dom으로 페이지를 관리하였습니다.
- 상태관리는 props & state, Redux-toolkit로 관리하였습니다.
- 파이어베이스 Authentication을 사용하여 로그인, 회원가입, 유저정보관리 기능을 구현하였습니다.
- 파이어베이스 Firebase Database를 사용하여 게시글, 장바구니 데이터들을 관리하였습니다.
- 파이어베이스 Hosting을 사용하여 서비스 배포하였습니다.
주요 기능
메인
상품의 데이터는 더미데이터를 하드코딩하여 axios.get()을 해와서 상품 데이터들을 사용하였습니다.
로그인, 회원가입
회원가입 시 유저정보의 데이터들은 파이어베이스 Authentication에 보관됩니다.
로그인 시 해당 유저정보는 Redux로 세션스토리지에 저장하였고 전역으로 로그인된 유저정보를 사용하였습니다.
장바구니 (추가 및 삭제)
장바구니에 담을 때는 Firestore Database에 저장되고 불러올 땐 현재 로그인된 userID를 가진 상품의 데이터를 불러오게 됩니다.
마이페이지 (이름, 메일, 비밀번호 변경)
마이페이지에서는 Redux에서 전역으로 관리하고 있는 유저정보의 데이터를 사용하여 화면에 렌더링 합니다.
이름변경, 이메일변경, 비밀번호변경은 파이어베이스에 Authentication에 있는 유저정보의 데이터를 수정하게 됩니다.
이후 변경에 성공할 시 Redux에서 관리하는 유저정보를 useDispatch 훅을 사용하여 변경해 주어 유저정보를 화면에 재렌더링합니다.
게시글 (글쓰기, 글수정, 글삭제)
게시글도 장바구니와 마찬가지로 Firestore Database에 저장이 됩니다.
기본적으로 글을 쓰게 되면 글목록은 bid순으로 나열이 되어서 계속 최신순으로 게시글의 순서가 유지됩니다.
처음에는 게시글을 POST 할 때 bid값을 bid : posts.length, 로 하였었습니다.
하지만 문제가 생겼죠, 게시글을 삭제를 하면 최신순으로 나열이 안 되는 상황이 생겼습니다. 당연한 것이었죠 ㅠㅠ
해결한 방법은 bid : posts[0].bid + 1, 즉 게시물 1번째의 bid 값에 1을 더하여 더 이상 에러가 안 생기도록 하였습니다.
소소한 문제지만 프로그래머스에서 풀던 알고리즘문제 같아서 이 문제를 해결해 나갈 때 재밌었습니다. 😁
폴더구조는?
작업하며 느낀 점
파이어베이스를 사용하여 Firestore-database, Authentication, Hosting을 이용하여 데이터를 보관할 DB, 로그인, 회원가입 기능, 최종적으로 배포까지 하였습니다.
백엔드, DB를 다루지 못하더라도 프론트엔드 혼자서 서비스를 배포할 수 있다는 경험은 매력적이었습니다.
하지만 아쉬운 부분은 직접 백엔드와 DB를 공부하여 작업하고 배포까지 하였다면 저에게 더 좋은 경험이 됐을 거라 생각이 되네요.
프론트엔드의 지식은 저에게 당연히 중요하지만 큰 그림을 보기 위해 백엔드와 데이터베이스도 공부를 해나가야겠습니다.
추후 실력이 좋아진 제 모습이 기대가 됩니다!! 🤪
작업물링크(CatMall) : https://malllogin-3905e.web.app
'개발성장기' 카테고리의 다른 글
| [2023년 개발자 회고] Remember me (3) | 2024.01.05 |
|---|---|
| 성격 테스트 만들기 (0) | 2023.04.09 |
| 같이의 가치, 첫 팀 프로젝트 (0) | 2023.03.10 |
| 모던 Javascript Deep Dive를 읽으며 (0) | 2023.02.20 |
| 개발자 만다라트(mandal-art) 작성 및 프로젝트 진행 (0) | 2023.02.17 |