프로젝트의 경험이 온전히 내 것이 될 수 있도록 프로젝트 회고를 하고자 한다.
🐶 프로젝트 소개
주제 : 애견용품 쇼핑몰 서비스
기간 : 5주 (2023.08.20 ~ 2023.09.30)
사용 언어 : React, CSS
개발 인원 : Front-End : 신혜원
결과물 보러가기
📌 기획
🤔 어떤 프로젝트를 만들까?
쇼핑몰에는 상품 검색하기, 최근 본 상품 나열하기, 장바구니 담기 등 다양한 기능들이 있다.
따라서 이것들을 여러 기술 스택으로 만들어 볼 수 있는 기회라고 생각하여 이를 프로젝트를 만들어야겠다고 생각했다.
쇼핑몰의 품목은 생각보다 쉽게 정해졌다.
강아지를 키우기 때문에 애견용품을 파는 쇼핑몰들을 자주 접하는데,
사이트 대부분 로고와 색만 바꾼 딱딱한 디자인을 가지고 있다.
쇼핑몰은 사용자에게 친화적인 디자인을 가지고 있는게 중요하기 때문에
반려동물을 떠올리면 귀엽고 친숙한 이미지가 떠오르는 것처럼
동글동글한 컨셉의 애견용품 쇼핑몰을 만들기로 했다.
📊 와이어프레임
기획 단계에서 화면을 미리 그려둠으로써 이를 참고하여 구현할 수 있다.
또한 사용자가 어떻게 서비스와 상호작용할지 미리 파악하고,
사용자 경험을 중심으로 서비스를 설계 할 수 있다.
 |  |
| 주 별 구현 계획 | 메인페이지 |
 |  |
| 회원가입 | 로그인 |
 |  |
| 상품 카테고리 | 장바구니 |
✅ 고민 & 해결
1. 디자인을 어떻게 해야할까?
쇼핑몰은 상당히 접하기 쉬운 웹 사이트다. 사용자의 입장이 되어 여러 쇼핑몰들을 둘러보며 여러 디자인들을 직접 보면서 어떻게 해야할지 틀이 정해졌다.
2. 제작 기간을 정해야할까?
실무에서도 마감기한이라는 것이 존재한다. 개인 프로젝트지만 확실한 엔드 라인이 있어야 한다고 생각했기 때문에 스스로 제작 기간을 정했다. 주 별로
📌 구현
✅ 고민 & 해결
기획 후 바로 코드 작성을 시작했다.
아무래도 혼자 모든 페이지를 만들어야 하다보니 주차별로 나눠서 제작을 했다.
로그인과 회원가입 구현이 제일 오래 걸릴 줄 알았는데 얕은 지식의 redux때문에 상세페이지를 구현하는데에 꽤 오랜 시간이 걸렸다.
사람들에게 물어보았다간 너무 기본적인 것을 물어보는 것은 아닌가 싶어 처음엔 강의 질문 게시판에 올렸었다.
선생님이 직접 답변을 해주셨기 때문에 바로 해결이 될거라 생각했지만,바로바로 피드백을 받지 못하고 내가 알려드린 코드만으로는 바로 해결방안을 찾기 어려웠다.
이렇게 시간이 지연되다간 제작기간 내에 만들지 못할 것 같아 현직자분들에게 물어보았고 빠른 피드백과 함께 금방 해결됐다.
또한 여러 사람들에게 다른 답변을 받으면 이에 대해 공부 할 점이 많아져서 질문하기를 잘했다고 생각한다.
1. redux-toolkit을 사용하여 ajax로 불러온 json 데이터 store에 저장 안됨
redux-toolkit ajax 통신하기
2. "Cannot read properties of undefined (reading 'title')" 에러
상세페이지 오류 발생
3. 어떻게 백엔드 없이 로그인과 회원가입을 구현할까?
임의의 서버 MSW(Mock Service Worker)를 사용하면 된다.
백엔드 없이 어떻게 구현할지 고민하다 여러 프론트엔드 개발자분들이 계신 오픈채팅방에 질문을 드렸더니 해답을 알려주셨다🥺
(이것이 배포할 때 발목 잡을 줄은 모른 채...)
📌 CSS
기능 구현을 다 끝낸 후 본격적인 CSS에 들어갔다.
전체적인 레이아웃은 기획단계에서 만들었기 때문에 이를 그대로 만들면 됐다.
처음엔 JS파일별로 CSS를 제작했는데 파일크기가 너무 커지는 것 같아 하나로 합쳤다.
그랬더니 중간중간 꼬이는 부분이 생겨 꽤 애를 먹었다...🥲 다음엔 합칠꺼면 처음부터 합치고 만들어야겠다.
✅ 고민 & 해결
1. SCSS를 사용하면 더 편했을까?
CSS보다 SCSS를 선호하는 사람들이 많지만 기초가 제일 중요하다고 생각하기 때문에 우선 CSS로 만들었다.
물론 SCSS를 사용했더라면 보다 간편하게 만들었겠지만 CSS를 먼저 사용해본 후 SCSS를 사용하여 그 차이점을 내가 느껴보고 싶었다.
2. 공통적인 부분을 찾아보는 연습을 하여 디자인 시스템 구현할 것
📌 배포
페이지만 만들면 다인줄 알았지만 끝날때까지 끝난게 아니었다.
GitHub Pages로 배포를 했는데 분명 로컬호스트에서는 작동이 잘 되던 msw가 에러가 떠버린 것이다.
알고보니 GitHub Pages는 HTML,CSS,JS,이미지와 같은 정적파일만을 제공하는 서버라고 한다.
즉 순전히 정적 웹사이트를 호스팅하는데 사용되고 서버리스함수와 같은 기능은 사용할 수 없다고 한다.
✅ 고민 & 해결
1. Vercel를 선택한 이유는?
Vercel은 Next.js ( React 프레임워크의 서버 사이드 렌더링 버전) 의 개발팀이 만든 호스팅 플랫폼이기 때문에
Next.js와의 통합이 매우 원활하다고 한다.
또한 나에게는 가장 중요한 서버리스 함수를 지원하여 백엔드 로직을 쉽게 추가할 수 있기에 Vercel을 선택했다.
📌 소감
프로젝트를 완성하자마자 "이걸 내가 다 만들었다고?" 라는 생각과 함께 가슴이 벅차올랐다.
기획하는동안은 고민과 걱정의 연속이었다.
걱정과는 다르게 내가 코딩을 한 자리에 앉아 6시간도 넘게 할 수 있었던 이유는 재미가 있었기 때문이다.
오류 해결을 했을 때와 원하는 기능을 내가 만들어냈을 때 나오는 성취감은 나에게 짜릿한 도파민이었다!
그리고 강의에 나오는 코드를 따라치는 것보다 직접 서비스를 만들어 봐야
내가 부족한 부분이 보이고 이를 공부함으로써 진짜 실력이 상승한다는 것을 스스로 느꼈다.
프로젝트 제작 전 후 로 배움의 차이가 있는 나를 보며 앞으로 얼마나 더 성장할지 스스로에게 기대가 되는 경험이었다.
