🎨미니멀한 프린트 및 색상과 소재만으로 고유의 유니크한 매력을 담아내는 아미 파리스(Ami Paris) 웹사이트 클론 프로젝트
1차 프로젝트에 앞서, 각자 클론하고 싶은 사이트들을 발표하였는데, 감사하게도 내가 발표한 ami 사이트를 투표해 주신 분이 많아서 1차 프로젝트에서 팀장을 맡아 ami 사이트 클론 프로젝트를 진행하게 되었다🙇🏼
나는 세 가지 조건🤟🏼을 가지고 원하는 웹사이트를 골랐다
Helmut Lang vs ami랑 마지막까지 고민하다가 첫 영상 재생이 너무 압도적인 ami로 골랐다. 헬무트랭 ami-an~🙄)
2020년 6월 22일~7월 3일 (총 2주)
프론트 3명, 백엔드 3명
프론트 : https://github.com/wecode-bootcamp-korea/9-WE_T_S-frontend
백엔드 : https://github.com/wecode-bootcamp-korea/9-WE_T_S-backend
HTML
SASS(변수와 mixin 기능)
React(state의 기능을 온전히 이해하기 위해 class Component로만 구현 하였음, hooks는 2차 프로젝트에서 사용할 예정
사용한 React library
- slick slider(메인 페이지 슬라이더 적용)
- zxcvbn(암호 강도 컬러바 적용)
- React icon
커뮤니케이션 및 버전관리
-Slack
-Trello
-Git / Github
3명이서 구현해야 할 페이지들을 아래와 같이 분담하였고, 나는 제품리스트와 제품상세 페이지 리스트를 맡았다.
체크 표시가 내가 구현한 부분
메인 페이지/장바구니 /위시리스트
-반응형 Nav bar(스크롤, 페이지 별 반응 이벤트 적용)
-메뉴 카테고리 서버 통신/호출 하여 적용
-이미지 슬라이더
-reduce 함수 적용한 제품 수량 변경
-모달 창 사용한 팝업형 장바구니/위시리스트 구현
-위시리스트 서버 통신 호출하여 사용자 정보를 맞는 리스트를 render
제품 리스트/제품 상세 페이지/로딩 페이지✅
-제품 리스트 색상 별 필터 이벤트
-제품 가격 별 sort 함수 적용
-반응 형 hover 애니메이션
-상세 상품 스크롤 이벤트
-사이즈 옵션 클릭 이벤트
-이미지 확대 modal 창
-제품리스트/상세페이지 서버 통신 호출하여 화면에 render
-로딩 페이지 fetch 전 render하게 적용
로그인/회원가입/Newsletter/search
-정규식 비밀번호 적용
-조건식 비밀번호 애니메이션 기능 적용
-뉴스레터와 서치 페이지 UI구현
: 물론 혼자서 구글링 하며 기능을 구현해야 하기도 하지만, 고민 스러운 부분은 함께 고민하고, 서로 모르는 부분이 있으면 알려주면서 완성도를 높여가는 부분
이 정말 즐거웠다.
: 팀 전체가 배려 넘치고 으쌰으쌰 하는 분위기어서 즐거운 마음으로 임했다. 같은 목표를 향해 달려가는 팀원이 있기때문에 개발이 외롭지 않았다. 서로 칭찬해주면서 임하니, 가능할까? 하는 부분도 가능해졌다!
: 사실 팀원뿐만 아니라 멘토님들도 우리와 한 팀인 것 처럼 열심히 도움을 주셨다.늦은 새벽에도 슬랙으로 도움을 주신 멘토님도 있었다 ㅠㅠ. 항상 좋은 결과를 믿어주고 지지해주는 분들이 있는 것 만으로도 큰 힘이 되고 더 잘하고 싶은 마음이 생겼다. 나도 나중에 경력 쌓인 개발자가 된다면? 그런 사수가 되고싶다 는 생각을 했다.
: 각자가 만든 부분 부분이 합쳐져서 2주만에 사이트 하나를 완성 할 수 있다는 뿌듯함
이 있었다.
: 아직 갈 길이 멀고, 구현 못해본 부분도 있지만 하면 된다라는 자신감
을 가질 수 있게 되었다.
: 서로에게 알려주면서 내가 아는 부분을 상기할 수도 있었던 부분이라 나의 개인 공부에도 도움이 되었다. 내가 80% 아는 부분이었는데, 남에게 알려주면서 95% 알게 되는 신기한 경험
이라고나 할까? ㅎㅎㅎ
: 오히려 맡은 부분은 끝까지 책임지고 잘해야 한다는 생각
때문에 혼자 무언가를 할 때 보다 더 열심히 하게 되었다.인스타 클론 할때는, 기능을 이것 저것 더 추가해볼까? 하다가 그냥 넣지 않았던 적이 있었는데, 팀 프로젝트를 하게 되니 내가 맡은 부분의 퀄리티는 더 제대로 해야지라는 책임감에 마지막날까지 가능한 기능은 모두 다 적용하게끔 해서 새벽 3시까지 집에 가지 못했다....
: 매일매일 daily stand-up 미팅 로그만 작성하고, 실제 트렐로에 업데이트는 주기적으로 하지못했다. 2차 프로젝트 때는 트렐로를 세분화 해서 적극 활용 해야 겠다.
: 처음 트렐로 미팅 때 각자 맡을 페이지만 정하고, 페이지 안에 어떤 기능을 넣을지를 세세하게 정하지 않아서, 작업하면서 아? 이런게 있었네 하는 부분이 많이 있었다. 다음부터는 페이지도 하나하나 뜯어서 구현하고자 하는 기능을 세세하게 나누어서 정리를 하고 시작해야 할 것 같다.
: 초반에 많이 소통하고 시작했다고 생각했는데, 백엔드에서 모델링 할때, 뷰를 짤 때, 다시 소통하지 않아서, 키값이나 사용해야할 데이터의 구조 차이가 있었다. 또한 백엔드에서도 내가 원하는 mock data형식대로 불러오는 것이 항상 가능하지는 않기 때문에 중간중간 원하는 기능이 있다면 소통하고, 힘들다면 힘든 수준에서 내가 더 적용할 방법을 고안해 내야 한다!
: 초반에 fectch의 위치는 컴디마(ComponentDidMount)에 넣는다 라는 것만 이해하고 프로젝트를 시작했다. lifecycle을 정확하게 이해하지 못하고 작업해서 그런지 주먹구구 식으로 console를 찍어보면서 코드를 작성했다. 스크롤 이벤트 적용할 때나 state값 들어오는지를 확인할 때, 아 여기서 render되고 이건 두 번 render 되는구나, 아 이건 처음 render 되는 값이라서 undefined가 되는구나
하고 이해하는 줄 알았지만 동일한 과정을 계속 반복하는 나를 발견했다..(흑흑흑). 2차 프로젝트 전에는 이 lifecycle을 정확하게 이해하고 시작하기 위해 정리가 필요할 것 같다🔥🔥🔥
한 두개 만 뽑아 보려 했는데 하나하나 소중한 baby 들이라 리스트가 길어졌다..ㅎㅎㅎㅎ
마우스 엔터 이벤트 코드(제품상세 페이지 변경, 버튼 색상 별 이미지 변경)
- 4 일차 정리 포스팅
모달 창 코드
- 8 일차 정리 포스팅
스크롤 이벤트 코드
- 9 일차 정리 포스팅
로딩 페이지 코드
- 10일차 정리 포스팅
유동 라우팅/상품 filter,sort 코드
- 11일차 포스팅
2차 프로젝트도 열심히 달려보자🏃🏃🏃🏃
2주동안 고생 많으셨어용 정현님~~ 남에게 알려주면서 95% 성장했다니 크...
저도 덕분에 예쁜 사이트 보고 눈호강 했어요ㅋㅋㅋㅋ 왜 저는 플젝할때 이런 사이트 찾을 생각을 못했을까요 ㅠㅠ
후후 내일부터 새로운 프로젝트로 달려야 하니까 언능 주무세요~~