React - 첫 프로젝트, Kidsney

💜 1. Kidsney 프로젝트 아키텍쳐

[ Kidsney Project ]

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

1.1 서비스 소개

• Kidsney 만의 캐릭터 옷과 장난감을 판매하는 어린이(Kids)들을 위한 쇼핑몰

1.2 메인 서비스

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

💜 2. 필수 구현사항

2-1. 로그인 / 회원가입

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

2-2. 상품리스트 (쿼리파라미터 활용)

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

2-3. 제품 상세 페이지

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

2-4. 위시리스트

• 위시리스트(찜) 기능 구현 : 좋아요 버튼 클릭시 데이터베이스로 해당 위시리스트 상품 전송. 페이지를 새로고침 했을 때도 좋아요 버튼 클릭 상태 유지
• 위시리스트 테마 기능 구현 : 각각의 테마 버튼을 눌렀을 때 해당 이미지 url 들을 담은 상수데이터들을 onClick 이벤트를 이용해 위시리스트 상단 이미지가 변경되게함

2-5. 장바구니

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

2-6. 리뷰

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

💜 3. 추가 구현사항

3-1. 결제

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

3-2. 상품 검색

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

💜 4. 프로젝트 관리

• Trello
  트렐로를 통한 프로젝트에 참여한 개개인의 업무 단위, BigPicture 로는 전체 진도율을 관리

• Notion 의사결정록
  standup meeting을 진행하며 나왔던 특정 안건을 관리하는 의사결정록을 만들어 한눈에 안건들을 확인할 수 있었고, 이는 프론트와 백엔드의 의사소통의 효율성을 높임

💜 5. 프로젝트를 마무리 하며...

[ 담당한 페이지 ]

• nav
• 로그인 / 회원가입
• 메인페이지
• 위시리스트

[ 구현한 기술 ]

• html, css 를 통한 홈페이지 메인 페이지, 위시리스트 페이지 UI
• 모달창을 이용한 로그인 / 회원가입 UI
• 로그인 / 회원가입 유효성 검사
• localStorage 와 useState Hook을 사용한 로그인 전역관리
• 위시리스트 테마 기능

[ 내가 만난 blocker 와 해결 ]

• Blocker
  자바스크립트 개념이 아직도 부족한 상태에서 프로젝트에 임하게 되어 스스로 너무 위축되고 자신감이 결여되는 날들이 이어졌다. 내 스스로의 힘으로 하나의 기술도 제대로 구현할 수 없다는 사실에 스스로 자괴감에 빠지기도 했고, 나 하나로 인해서 프로젝트 진행 속도가 뒤쳐질까봐 걱정되었다.
• 해결
  이러한 고민을 혼자 안고 있기보다 팀원들에게 정확하게 현재 나의 blocker 들을 알리고 이를 해결하기 위한 방법과 조언을 구하였다. 팀원들은 나의 blocker 에 대해서 하나씩 해결방안을 제시해주었고, 나는 방안들을 토대로 작업하면서 막혔던 부분들을 하나씩 해결해갔다. 그렇게 하루하루 정했던 목표치를 달성할 수 있었고, 프로젝트 기한 내에 내가 맡은 부분의 작업을 끝마칠 수 있었다.
  이번 경험을 통해서 협업시 의사소통의 중요성을 다시금 깨달을 수 있었다.

[ 🥰 만족스러운 점 ]

• 1차 프로젝트가 끝나는 게 아쉬울 정도로 너무 좋은 팀원들을 만나서 정말 행복한 2주였음. 💜 첫 프로젝트 였던 만큼 부담감이 컸지만, 원활한 의사소통으로 프로젝트에 빠르게 적응할 수 있었음.
• sprint meeting, trello 관리 등을 통해 각자의 진행상황과 현재 blocker 들을 공유하며 각자 그날 정했던 목표치를 달성할 수 있었음.
• 프로젝트 전에 구현해보지 못한 기능들을 구현할 수 있는 기회가 생겨서 좋았음. 또한 백엔드와 통신하며 데이터를 주고 받는 과정이 늘 재밌고 짜릿했음. 백엔드와의 의사소통의 중요성 역시 다시금 깨달을 수 있는 좋은 경험이었음.

[ 😢 아쉬운 점 ]

• 프로젝트 전 체력관리 부족으로 인해 하루하루가 소중한 프로젝트 시기에 며칠간 제대로 몰입할 수 없던 점이 아쉬웠음. 체력관리의 중요성을 다시금 알게되었음.
• 리액트 역시 자바스크립트 문법이 약하면 다양한 기능 구현이 어렵다는 것을 또 한번 깨달음. 기본 문법 공부에 더 많은 노력을 기울여서 2차 프로젝트엔 좀 더 다양한 기능 구현을 해보고 싶음.

[ 🎤 소회 ]

• 부족한 점이 많은 상태에서 프로젝트에 임하게 되어 사실 불안하고 압박감이 컸었는데, 정말 💜사랑스럽고 유능한 31기 에이스 팀원분들💜을 만나게 되어서 첫날부터 즐겁게 프로젝트에 참여할 수 있었습니다. 편안한 팀 분위기 덕분에 제가 프로젝트를 진행하며 마주한 blocker에 대해서 주저없이 말할 수 있었고, 이를 팀원분들이 저와 함께 해결해주셔서 프로젝트 기한 내 작업을 마칠수 있게 되었습니다. 행복하게 프로젝트를 마무리 할 수 있어서 기쁘고 같은 팀으로 참여할 수 있게 되어 정말 영광이었습니다. 언제나 ,,, 우리 팀 응원하고 ,, 사랑해여 ,,,