1차프로젝트-ZINWOOS👏🏻
프로젝트명
ZINWOOS
작업내용
220919 초기세팅
ZINWOOS 프로젝트 Front-end소개
지누스 매트릭스 커머스사이트를 참고하여 굿즈샵 컨셉으로 기획했습니다.
한정된 시간동안 진행되는 첫번째 프로젝트라 그동안 배웠던 기본지식들을 최대한 활용하여 개발하였습니다.
개발은 초기 세팅부터 전부 직접 구현했으며, 시연영상에서 보이는 부분은 모두 백앤드와 연결하여 실제 사용할 수 있는 서비스 수준으로 개발한 것입니다.
개발 인원 및 기간
개발기간 : 2022.09.19 - 2022.09.30(2주)
개발 인원 : 프론트엔드 4명, 백엔드 3명
https://github.com/wecode-bootcamp-korea/37-1st-ZINWOOS-backend
프로젝트 선정이유
UI가 심플해서 기능구현에 집중하기 좋을 것 같았습니다.
사이트 이미지
https://github.com/ChoiRamsey/zinwoos/blob/main/%E1%84%8C%E1%85%B5%E1%86%AB%E1%84%8B%E1%85%AE%E1%84%89%E1%85%B3.png
적용 기술 및 구현 기능
적용 기술
Front-End : React.js, sass, RESTful API
구현 기능
공통
회원가입 / 로그인
Nav
Footer
메인페이지
신상품 api 호출하여 구현
캐러셀
상품목록
api 호출
카테고리별 상품목록 정렬(쿼리스트링)
sort / 필터링
상세페이지
api 호출
상품정보(금액, 이름, 최대수량…)
옵션 및 수량 추가
위시리스트 추가
장바구니 추가
상세페이지 하위 탭 메뉴
장바구니
api호출
장바구니 불러오기
주문하기(서버에 해당 사용자의 주문정보 전달)
삭제하기(선택삭제, 전체삭제)
수량변경(서버에 실시간 반영)
관심상품
api호출
관심상품 불러오기
삭제하기
내가 구현한 기능
- Nav 및 드롭다운 기능
- 회원가입&로그인(Nav에 포함된 모달창으로 구현)
- 장바구니기능(체크박스 이용 선택 삭제, 주문 가능)
- checkbox
체크박스 기능을 구현하면서 단순히 프론트에서만 체크박스가 구현되게 할 것인가 아니면 백엔드 서버에 바로 해당 체크된 여부를 전송해야하는 가에 대해 고민을 많이 했습니다. 그래서 장바구니 API를 담당하는 팀원과 어떻게 할 것인지 정하는 데에 꽤나 많은 소통을 했습니다. 그 결과 check 여부를 서버에서 관리하기로 했고 그것을 이용하여 주문하기를 하게되면 장바구니 데이터베이스에서 해당되는 상품 리스트를 백엔드에서 삭제할 수 있게 fetch 코드를 짰습니다. - 수량
수량 또한 사용자가 수량을 장바구니에서 수정하고 다른 페이지에 갔다 오더라도 다시 수정할 일이 없게끔 수량 변경 시 즉각 서버에 수정 사항이 저장되도록 설계했습니다. - 느낀점
장바구니 기능을 처음 구현해보았는데 생각보다 장바구니에 다양한 기능이 필요하고 복잡함을 느꼈습니다. 백엔드와의 통신도 한 두가지가 아니고요.. 또한 사용자가 최종적으로 주문을 결정하는 페이지이기 때문에 에러가 발생하면 안된다는 책임감도 들었습니다.
프로젝트를 돌아보며.
이번 프로젝트는 내가 프론트엔드 공부에 뛰어든 이후 팀을 이루어서 무언가를 만들어 본 첫 프로젝트이다. 팀원들과 초기 세팅 및 미팅을 하면서 얼떨결에 Nav 구성과 로그인&회원가입을 맡게 되었고 그래도 해당 기능은 이미 인스타그램 클론코딩을 해보면서 구현해본 경험이 있던지라 생각보다 빠르게 끝낼 수 있었다. 그래서 아직 아무에게도 부여되지 않았던 장바구니 기능을 내가 해봐도 괜찮겠다 싶어서 맡아 만들게 되었다.
인스타그램의 댓글 기능처럼 만들면 간단하겠지라고 쉽게 생각했던 것과 다르게 기능을 만들고 백엔드와 통신을 염두에 두면서 진행하려니 머릿속이 복잡해져만 갔다. 더군다나 체크박스 기능을 구현하는 것부터 눈 앞이 캄캄했지만 어찌저찌 구글링과 팀원들의 적극적 도움으로 기능들을 모두 구현할 수 있었던 것 같다.
백엔드와 통신하면서 데이터를 주고 받는 순간 그 전까지 나 혼자 Mock Data를 가지고 했던 것은 아무것도 아니었음을 절실히 깨달았다. 왜 초기 미팅때 데이터를 맞추는 것에 대해 더 시간을 쓰지 않았을까 후회도 많이 했고 데이터 키 명을 수정하는데도 꽤나 많은 시간을 허비한 것이 프로젝트를 끝낸 지금도 가장 후회되는 경험이다.
이 글을 쓰면서도 이번 프로젝트를 재밌고 성공적으로 마무리할 수 있었던 것은 팀원들 간의 끈끈함이 아니었나 싶다. 솔직히 처음 시작때는 팀원들이 나를 꽤나 믿어주시는 것에 대해 많은 부담도 있었지만 그런 만큼 더욱 내가 아는 것을 최대한 끄집어 내어 팀원들에게 도움이 되는 존재가 되고 싶기도 했다. 반대로 두 세시간을 끙끙대며 고민하던 일부 기능을 팀원들의 도움으로 한시간만에 구현하기도 했기에 다양한 접근법을 경험하면서 정말 많은 것을 배울 수 있어서 진심으로 함께 힘내준 팀원들에게 고맙기도 하다.
앞으로도 이런 좋은 경험을 살려 어떤 프로젝트든지 활기차고 파이팅 넘치게 진행될 수 있는데 큰 영향을 끼치는 개발자가 되고 싶다는 목표도 생겼고 함께 하고 싶고 든든한 지원자가 될 수 있도록 더욱 꼼꼼히 공부해서 나의 레벨을 올려야 겠다는 다짐도 한다.
