💡 프로젝트 소개
법랑 소재의 식기와 굿즈를 판매하는 크로우캐년 사이트 클론 코딩
저작권 문제로 이미지는 unsplash에서 제공하는 무료 이미지로 대체
📚 기술 스택
- 프론트엔드 (5명)
- JavsScript (ES6+)
- ReactJS
- React-Router
- HTML5
- SASS
- 백엔드 (2명)
- Python
- Django
- Bcrypt
- MySQL
- pyjwt
- 협업 Tool
- Git
- Slack
- Trello
- Notion
🗓 개발 기간
- 5월 23일 - 6월 3일 (11일)
🛠 구현 기능
작업한 부분은 파란색으로 표시
- 회원가입 / 로그인
- ID / PW 유효성 검사
- 필수 옵션 선택 후 가입
- 메인페이지
- Nav / Footer
- Search Box를 통한 item 검색 기능
- 이미지 메인 배너 슬라이더 기능 구현
- 제품 목록 페이지
- flex wrap과 width를 이용하여 반응형 레이아웃 구현
- Data의 state 상태에 따라 상품 Tag 노출
- 메뉴에 따른 카테고리 노출 및 상품 sort 기능 구현
- query string을 활용한 Pagination 구현
- 상품 리로드에 따른 transition animation 및 버튼 hover 구현
- 썸네일 내 Quick Shop 클릭 시 Modal 구현
- 제품 상세 페이지
- 서버에 저장 된 제품 정보 노출
- min-width를 사용하여 Detail img 깨짐 현상 대응
- input 창 Up / Down 버튼을 통해 구매 수량 조절 및 total 가격 변화 구현
- 선택 수량 1개 미만 시 ("주문 수량은 1 이상이어야 합니다.") alert 구현
- 상품 후기 / 상품 문의 Drawer open & close 구현
- 장바구니 버튼 클릭 시 Data POST 통신 및 장바구니 페이지로 이동
- 리뷰 페이지
- 서버에 저장 된 리뷰 데이터 노출
- 주문 한 상품에 한하여 리뷰 작성 가능
- 장바구니 페이지
- 장바구니 상품 선택 삭제 및 선택 주문 기능
- 서버에 저장된 장바구니 데이터 노출
프로젝트 리뷰
잘한점
🏋️♀️ 이왕 맡게 된 일은 열심히
사용하던 모니터의 주목성이 좋아 의도치 않게 스탠드업 미팅의 진행을 맡게 되었다. 이 과정에서 30분이라는 제한 시간을 효율적으로 사용하기 위해 노력했고, 11일 간의 진행으로 팀원과의 커뮤니케이션 방법 을 발전시킬 수 있었다. 첫 미팅에서 모두 어떤 말을 해야할지 몰라 4-50분 가량 의 시간을 미팅에 할애했지만 이 후에는 20분도 채 되지 않아 미팅 을 끝낼 수 있었다. 또한, 프로젝트 첫 주 차에 성격 차이로 어려움을 겪고 있는 팀원의 문제를 인지하고 서로 배려할 수 있도록 대화의 시간을 가졌던 것이 좋은 기억✨으로 남는다!
👩🏫 동료이면서 서로에게 선생님인 사이
우리는 서로가 선생님이었기에 모르는 것이 있으면 주저하지 않 았고, 또 이미 배웠던 것을 팀원에게 가르쳐주면서 복습할 수 있었다.
아쉬운점
🔍 개발할 페이지에 대해서는 제대로 분석하기
Store 페이지에서 작동하는 Quick Shop 모달의 경우 처음에 상품 디테일 페이지와 같다고 생각하여 시간 분배를 잘못하였다. 뒤늦게 작업할 때가 되어서야 그 사실을 인지했기에 당황한 나머지 정신이 없었다. 이 마저도 프로젝트 종료 후 재활용 할 방법을 찾을 수 있었지만..
🖇 백엔드와의 통신은 항상 대비하기
각자 첫 통신이었던 프로젝트인 만큼 서로에 대해 모르는 점이 많았다. 나도 뭘 요청해야할지 몰랐고, 백엔드에서도 프론트에게 뭘 줘야할지 몰랐으니... API 명세서의 필요성을 너무나 느껴버린 프로젝트였다.
📝 배운 것과 느낀 점은 그때 그때 기록하기
변명이라면 변명이겠지만... 기록의 중요성을 인지하지 못했다. 그러다 보니 되돌아보기에 힘듦이 있다.
🎓 기록하고 싶은 코드
고생하며 얻은 코드는 수없이 많지만... 특히 기억에 남는 코드는 두 가지로 고를 수 있을 것 같다.
Category Button Mapping
Nav bar에서 Store Category를 선택할 때 생성되는 Material 버튼을 생성하는 코드이다. 백엔드에서 깜빡하고 Nav에서 전달하는 API를 만들지 못하여서 프론트에서 각 메뉴에 맞는 카테고리를 하드 코딩하여 지정해 놓았다. URLSearchParams 메서드를 통해 카테고리 정보를 갖고 온 후 해당 카테고리에 맞는 객체 리스트를 map하는 식으로 진행을 하였고, array 배열 안에 숫자가 아닌 string이 들어가도 map이 정상적으로 돌아간다는 것이 신기하여 기억에 남는다.
query string 리팩토링
query string을 통한 url 조작은 프로젝트 2주차에 진행되었는데 우습게 보고 있다가 큰 코를 다쳤던 부분이다. 캡쳐 된 부분은 프로젝트 종료 후에 리팩토링 한 것인데 약 4번에 걸쳐 새로 작성되었다. 지금의 코드도 완벽한가?!에 대해 묻는다면 대답할 순 없겠지만... 우리 사이트 내에서는 정상적으로 작동한다. '제대로 동작하는' 코드를 위해 나 혼자서 고민하며 뜯어 고친 경험이 참 값지게 느껴져서 기록해 보았다.
😴 마치며
밀렸던 잠을 자며 1차 프로젝트를 마쳤다. 평생 살면서 무언가에 이렇게 몰두했었던 적이 있나 싶다. 아침부터 저녘, 주말까지 모두 자발적으로 노력하여 이뤄냈다는 사실이 너무 뿌듯하다!! 내가 집중할 수 있는 순수한 몰입의 시간이 이렇게 길 수 있다는 것 또한 놀랍다! 코딩 시작하기 너무 잘한 것 같다 😄 ✨
전체 데모영상 : https://youtu.be/--gfsEindSE
댓글