[React] 나의 인생 첫 프로젝트 회고록 (!) feat 디즈니샵 클론코딩

드디어 2주간의 밀도있게 진행해온 프로젝트가 끝이 났다. 다음주면 2차프로젝트 바로 시작인데, 그 전에 이 기억이 휘발되지 않고자(!) 회고록을 한번 적어보고자 한다-!

하고싶은 말이 많은데 여기에 다 담을 수 있을지 모르겠다. 우선 적어보긔!!

키즈니 웹사이트 촬영 링크 :
https://youtu.be/86o9GiGkjwg
키즈니 git repository :
https://github.com/hyodduru/31-1st-kidsney-frontend.git

🗓 프로젝트 소개

• 프로젝트 진행 기간 : 3월 28일 ~ 4월 8일
• 프로젝트 주제 : 커머스 웹사이트 클론 코딩하기
• 클론 코딩한 웹사이트 : 디즈니샵 https://www.shopdisney.com
• 함께한 팀원(5명) : 프론트엔드 3명 (나, 보윤님, 재웅님) 백엔드 2명(원빈님, 대현님)

🖊 프로젝트 아키텍처

서비스 소개

• Disney 대신 Kidney shop이라는 웹사이트로 이름 변경 👉 Kidsney 만의 캐릭터 옷과 장난감을 판매하는 어린이(Kids)들을 위한 쇼핑몰
  

메인 서비스

• 아이들이 좋아하는 캐릭터 아동복 판매
• 개인의 취향에 맞춘 상품을 추천해주는 서비스 제공
• 상품을 포인트로 결제 가능

🧚‍♀️ 프로젝트 시작 때 우리의 목표 (구현사항)

1. 로그인 / 회원가입
2. 찜목록
3. 장바구니
4. 메인페이지, 제품페이지, 제품상세페이지
5. 리뷰
6. 결제 기능

🤖 실제로 구현한 사항과 사용한 기술

1. 로그인 / 회원가입

• 로그인 / 회원가입 모달창
• 로그인 / 회원가입 유효성 검사
• localStorage 와 useState Hook을 사용한 로그인 전역관리

2. 상품리스트

• 쿼리 파라미터를 활용한 다양한 기능구현
  • 다중필터
  • 가격순 / 최신순 정렬
  • 페이지네이션

3. 제품 상세 페이지

• 상품리스트에서 상품이미지를 클릭하면 해당 상품 이미지로 이동
• 데이터베이스로 부터 사이즈 별 재고를 받아와 품절된 상품의 버튼은 비활성화
• 썸네일 사진 클릭 시 메인 페이지 보여준다.

4. 위시리스트

• 위시리스트(찜) 기능 구현 : 좋아요 버튼 클릭시 데이터베이스로 해당 위시리스트 상품 전송. 페이지를 새로고침 했을 때도 좋아요 버튼 클릭 상태 유지

5. 장바구니

• 장바구니 기능 구현: 상품 상세페이지 내에서 add to bag 클릭 시 데이터베이스로 해당 상품 전송. 이후 장바구니 모달창을 통해 업데이트 된 상품 리스트 렌더링
• 장바구니 상품 삭제 기능 구현: fetch(Delete 메소드) 활용
• 장바구니 상품 수정 기능 구현: fetch(Patch 메소드) 활용

6. 리뷰

• 상품 상세페이지 내 해당 상품에 대한 리뷰 컴포넌트 구현
• 리뷰 작성 및 삭제 기능

7. 결제

• 결제 기능 구현 : fetch(Get, Patch 메소드) 활용한 마일리지 차감 및 사용자정보 수정

8. 상품 검색

• 상품 검색 기능 구현: 쿼리 파라미터를 활용한 기능 구현

😎 내가 맡아서 한 부분(!)

나는 제품상세 페이지, 리뷰, 장바구니, 위시리스트(찜, 좋아요 기능), 추천 상품 리스트 부분을 담당했다.

항목별로 자세히 풀어보겠다.

1. 제품의 상세페이지

상품의 리스트에서 상품 하나를 클릭하면 제품의 상세페이지로 들어와진다.

상세페이지에는 다음의 정보들이 들어있다.
👉 제품의 이미지
👉 제품에 대한 설명(제품명, 가격, 선택 사이즈)
👉 장바구니 추가 버튼
👉 위시리스트 버튼
👉 제품에 대한 상세 설명
👉 제품에 대한 리뷰를 작성하는 공간(리뷰 component)

"Add To WishList"라는 버튼을 클릭하면 바로 데이터베이스로 해당 제품을 전송한다. 전송하고 나면 바로 "Remove"로 버튼 이름이 바뀌게끔 설정을 해두었다.

그리고 사이즈와 수량을 선택한 뒤, "Add To Bag"이라는 버튼을 클릭하면 바로 데이터베이스로 해당 제품을 전송하고 슬라이드 장바구니 모달창을 띄워준다. 모달창에는 바로 해당 상품을 update해준다.

삭제 버튼을 클릭했을 때도 바로 리렌더링이 될 수 있게끔 해주었다.

썸네일에 사진이 여러개 있을 경우(작게 보이는 사진) 해당 사진을 클릭할 경우 메인사진으로 크게 보이게끔 한다.

그리고 size 선택하는 부분에서 백엔드로부터 수량을 받아와서, 재고가 0인경우는 품절 표시를 해주었다. (버튼 비활성화 및 색깔 다르게 처리)

화면의 상단 오른쪽에 있는 view details를 클릭하면 해당 제품에 대한 자세한 설명이 나와있는 곳으로 scroll down 된다. (scrollIntoView 활용)

product detail, shipping& delivery, reviews라는 메뉴가 있는데 각각의 메뉴를 클릭할 시 해당 메뉴에 대한 내용이 나온다. (onClick event, map활용)

2. 리뷰

리뷰는 따로 컴포넌트화하여 상세 페이지 안에 적어주었다.

write a review 버튼을 올리면 리뷰 모달창이 뜨고 리뷰를 작성한 후 post review 작성하면 바로 데이터 베이스로 해당글을 전송하고, 다시 review list를 전송받아서 화면에 리렌더링한다.

remove 버튼을 누르면 자동으로 삭제된다. (fetch - delete 활용)

3. 장바구니

장바구니 페이지에 가면 내가 상세페이지에서 add to bag 버튼을 통해 전송해두었던 장바구니 상품리스트를 받을 수 있다.

장바구니 페이지 구조는 다음과 같다.
👉 상단 - 광고 및 프로모션 진행중인 상품 슬라이드
👉 하단 왼쪽 - 장바구니 상품 리스트
👉 하단 오른쪽 - 지불해야할 총 금액 (order summary)

제품 상단 오른쪽에는 슬라이드 형식으로 이벤트 진행중인 상품들을 보여준다. see detail 버튼을 클릭하면 해당 제품의 상세 페이지로 이동한다.

하단의 My bag 아래 부분에는 내가 장바구니에 추가한 상품들이 보인다.
제품 내에는 edit 버튼과 remove 버튼이 있는데 edit 버튼 클릭시 수정 모달창이 보이고 변경하고 싶은 수량과 양을 설정한후 저장하면 내용이 바로 업데이트가 된다. (fetch - patch 함수를 활용하여 변경된 size, quantity를 데이터베이스에 전송한뒤 다시 렌더링)

remove 버튼을 클릭했을 때도 마찬가지로 상품이 삭제가 된다! (fetch - delete)

4. 위시리스트 (찜, 좋아요 기능)

생각보다 되게 어려웠던 작업,, 데이터를 전송하는 것 자체는 문제가 안되는데 좋아요를 클릭했을 때 그 하트 상태를 새로고침을 했을 때도 유지하는게 상당히 어려운 작업이었다,,
자꾸 새로고침을 했을 때 하트가 리셋되는 것이다,,,,, ! (이부분은 따로 글을 작성하였다.)

또 위시리스트 페이지 내에서 좋아요를 다시 취소했을 때 그게 바로 업데이트가 안되고 계속 페이지내에 남아있어서,, 이부분 처리하는 거 굉장히 어려웠다.

좋아요 없앴을 때 바로 상품 없어지게 하기

좋아요 추가시 바로 업데이트 되도록하기

처음에 이게 업데이트가 바로바로 안되서 해결했던방식이 "state 끌어올리기" 였다.

위시리스트 페이지 전체를 담당하는 <wishlist/>컴포넌트를 공통 부모 컴포넌트로두고,
그 안에서 선택된 상품들을 담는 <selectlist/>컴포넌트와 추천 상품들이 담긴 <recoProduct/>컴포넌트를 자식관계로 두어 props를 관리를 해주는 것이다.

이를 좀더 시각화해보자면,

이렇게 wishlist 목록을 담은 state를 공통최상위 부모인 wishlist 내에 두고, 좋아요 상태를 직접 관리하는 product 까지 내려주는 것!

이렇게 하면 product 내의 하트를 클릭하거나 땠을 때 바로 state내에 update가 되어서 화면에 리렌더링이 된다.

5. 추천상품 리스트

고객에게 보여주고 싶은 상품 리스트들을 슬라이드 형식으로 보여준다.
해당 상품 클릭시 상세 페이지로 이동한다.

😎 함께 해서 좋았던 프로젝트

인생 첫 개발 프로젝트였던 만큼 설레기도 했지만 동시에 긴장도 많이 되었고 막연한 두려움같은 것도 있었다. 계속 혼자만 하다가 모든 과정을 함께한다는게 상상도 안되었고, 그래서 프로젝트 전날 너무 긴장되서 잠 한숨 제대로 못잔 기억도 난다.

트렐로 써보기

전체 팀원들이 어떻게 회의가 진행되고 있는지를 시각화하기 위해 트렐로를 사용했다(!)
현재 누가 어떤 작업을 하고 있는지 한눈에 알아보기 위함(!)

의사결정록 작성

정말 중요한 안건들은 의사결정록에 그 때 그 때 기록을 해두었다. 혹여나 까먹고 다시 이야기하지 않도록(!)

좋았던 점💜

👉 팀원들과의 팀워크가 정말 최고였다. 마음이 잘맞는 사람들과 함께 같은 목표를 향해 나가는 과정 자체가 너무 즐겁고 감사했다. 프로젝트가 곧 끝나가기 며칠 전부터 팀원들과 함께할 날이 얼마 남지 않았다는게 너무 아쉽고 슬펐다. 우리팀 못잃어 ㅠ 다들 다른 팀 되서 웃고 다니지 마세요 질투나니까(?)

👉 추가로 우리팀의 가장 큰 강점은 "소통"이었다. 특히 백엔드 쪽에 요청해야할 정보가 있거나 아니면 뭐 아주 사소한 것이라도 궁금한게 있을 때 이것저것 다 편하게 이야기를 할 수 있는 분위기였다. 그래서 서로의 속도에 맞춰서 잘 이야기하며 프로젝트를 하여 딱히 프로젝트 진행중에 어려울 점이 없었다.

👉 통신하는 부분을 좀더 명확히 이해할 수 있었다. 직접 데이터 베이스와 통신하는 과정을 반복해보면서 어떤 상황에서 어떤 요청을 해야할 지 좀 더 명확해졌다. 그리고 통신을 할 때 토큰의 주소를 잘못 입력한다거나 토큰을 애초에 안적어준다거나 받은 데이터를 적절한 형태로 저장하지 못하는 등의 자잘한 실수들을 많이 했는데, 이런 실수를 줄이기 위해 사전에 검토를 더 꼼꼼히 하고, 백으로부터 정확히 어떤 형태의 데이터를 전송받는지, 어떤 키값을 받는지 소통을 잘 해야겠다는 생각을 했다.

👉 오류 메세지를 두려워하지 않게 되었...다(?)(하지만 싫어요^^) 차근차근 뜯어보다보면 자잘한 실수들의 끝마리를 알아낼 수 있다(!) 이번에 merge 하면서 진짜 많은 버그를 만났는데 어짜피 차분히 보다보면 어떻게든 해결된다. 급할수록 차분히 해결하자 ㅎㅎ

아쉬웠던 점 🥲

👉 트렐로 활용을 잘 하지 못했다. 일을 수행할 때 체계적으로 일을 처리하기 보다는 그 때 그 때 해야할 일을 생각해서 하는 성향이다보니 트렐로에 기록하기 보다는 팀원들과 회의를 하며 해야할 큰 그림만 이야기를 하고 일을 수행하고는 했는데, 조금 더 꼼꼼하고 체계적으로 일처리를 하기 위해서는 더 기록하는 습관을 들여야겠다.

🍯 이 글을 마치며

어쩌다보니 글이 정말 길어졌는데 (하 할거많은데 ㅎㅎ) 이 프로젝트를 하며 느낀게 나 정말 이 일이 적성에 맞구나, 나 이 일이라면 평생 사랑할 수 있겠다 싶은 생각을 했다. 로직에 딱딱 들어맞는 코드를 차고 내가 생각한 대로 화면에 그려내는 작업이 정말 매력적이다.

또한 사람들과 함께하며 긍정적인 에너지를 주고받으며 하나의 웹사이트를 만들어가는 과정이 너무 즐겁다. "우리 이렇게 해볼까요? 어려울 거 같긴한데 그래도.. 해볼까요? "하면 되죠!"하며 이것저것 시도해본 우리팀.

나는 내가 프로젝트 같은 걸 별로 안좋아하는 사람이라고 생각했는데 (혼자하는 일이 더 잘 맞다고 생각해왔다) 생각보다 나는 사람을 너무너무너무 좋아하고, 사람들한테 받는 에너지가 정말 크고 함께하는 걸 사랑한다.

아무튼,,, 2차프로젝트도 잘해보자요,,,,!! 화이또👊🏻👊🏻👊🏻👊🏻

p.s) 항상 키즈니팀과 함께해준 지훈팕님에게도 영광의 인사를(?)