ZINWOOS
220919 초기세팅
지누스 매트릭스 커머스사이트를 참고하여 굿즈샵 컨셉으로 기획했습니다.
한정된 시간동안 진행되는 첫번째 프로젝트라 그동안 배웠던 기본지식들을 최대한 활용하여 개발하였습니다.
개발은 초기 세팅부터 전부 직접 구현했으며, 시연영상에서 보이는 부분은 모두 백앤드와 연결하여 실제 사용할 수 있는 서비스 수준으로 개발한 것입니다.
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 구성과 로그인&회원가입을 맡게 되었고 그래도 해당 기능은 이미 인스타그램 클론코딩을 해보면서 구현해본 경험이 있던지라 생각보다 빠르게 끝낼 수 있었다. 그래서 아직 아무에게도 부여되지 않았던 장바구니 기능을 내가 해봐도 괜찮겠다 싶어서 맡아 만들게 되었다.
인스타그램의 댓글 기능처럼 만들면 간단하겠지라고 쉽게 생각했던 것과 다르게 기능을 만들고 백엔드와 통신을 염두에 두면서 진행하려니 머릿속이 복잡해져만 갔다. 더군다나 체크박스 기능을 구현하는 것부터 눈 앞이 캄캄했지만 어찌저찌 구글링과 팀원들의 적극적 도움으로 기능들을 모두 구현할 수 있었던 것 같다.
백엔드와 통신하면서 데이터를 주고 받는 순간 그 전까지 나 혼자 Mock Data를 가지고 했던 것은 아무것도 아니었음을 절실히 깨달았다. 왜 초기 미팅때 데이터를 맞추는 것에 대해 더 시간을 쓰지 않았을까 후회도 많이 했고 데이터 키 명을 수정하는데도 꽤나 많은 시간을 허비한 것이 프로젝트를 끝낸 지금도 가장 후회되는 경험이다.
이 글을 쓰면서도 이번 프로젝트를 재밌고 성공적으로 마무리할 수 있었던 것은 팀원들 간의 끈끈함이 아니었나 싶다. 솔직히 처음 시작때는 팀원들이 나를 꽤나 믿어주시는 것에 대해 많은 부담도 있었지만 그런 만큼 더욱 내가 아는 것을 최대한 끄집어 내어 팀원들에게 도움이 되는 존재가 되고 싶기도 했다. 반대로 두 세시간을 끙끙대며 고민하던 일부 기능을 팀원들의 도움으로 한시간만에 구현하기도 했기에 다양한 접근법을 경험하면서 정말 많은 것을 배울 수 있어서 진심으로 함께 힘내준 팀원들에게 고맙기도 하다.
앞으로도 이런 좋은 경험을 살려 어떤 프로젝트든지 활기차고 파이팅 넘치게 진행될 수 있는데 큰 영향을 끼치는 개발자가 되고 싶다는 목표도 생겼고 함께 하고 싶고 든든한 지원자가 될 수 있도록 더욱 꼼꼼히 공부해서 나의 레벨을 올려야 겠다는 다짐도 한다.