🎨미니멀한 프린트 및 색상과 소재만으로 고유의 유니크한 매력을 담아내는 아미 파리스(Ami Paris) 웹사이트 클론 프로젝트

전체 웹페이지 데모 영상 Youtube 링크

🤷Why ami ?

1차 프로젝트에 앞서, 각자 클론하고 싶은 사이트들을 발표하였는데, 감사하게도 내가 발표한 ami 사이트를 투표해 주신 분이 많아서 1차 프로젝트에서 팀장을 맡아 ami 사이트 클론 프로젝트를 진행하게 되었다🙇🏼‍

나는 세 가지 조건🤟🏼을 가지고 원하는 웹사이트를 골랐다

1. 커머스 사이트 일 것 ☝🏼

• 유통이 익숙한 나로서는 커머스 사이트를 구현해 보고 싶었다. 특히 Component로 중복된 요소를 관리 할 수있고 map/filter/reduce함수에 익숙해지고 싶어서, 상품 리스트나 상세 페이지 구현을 하고 싶었기도 하다!

2. 꼭 필요한 기능을 가진 깔끔한 UI를 가질 것 ☝🏼

• 군더더기 없는 디자인을 좋아하는 나로서는 미니멀 하지만 웬만한 기능은 다 갖춘 깔끔한 사이트를 만들어 보고 싶었다.

3. 내가 관심있어 하는 브랜드의 페이지 일 것 ☝🏼

• 2 주 동안 잠자는 시간 빼고는 계속 들여다 봐야 할 사이트 인데 그나마 익숙하거나 애정있는 브랜드를 보고 있으면 행복할 것 같아서, 그나마 좋아하고 이쁘다고 생각한 브랜드의 페이지로만 고려하였다.(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명이서 구현해야 할 페이지들을 아래와 같이 분담하였고, 나는 제품리스트와 제품상세 페이지 리스트를 맡았다.

1. 메인페이지,장바구니,위시리스트
2. 제품 리스트 페이지, 제품 상세 페이지, 로딩 페이지
3. 로그인/회원가입/뉴스레터/서치

체크 표시가 내가 구현한 부분

• 메인 페이지/장바구니 /위시리스트
  -반응형 Nav bar(스크롤, 페이지 별 반응 이벤트 적용)
  -메뉴 카테고리 서버 통신/호출 하여 적용
  -이미지 슬라이더
  -reduce 함수 적용한 제품 수량 변경
  -모달 창 사용한 팝업형 장바구니/위시리스트 구현
  -위시리스트 서버 통신 호출하여 사용자 정보를 맞는 리스트를 render
  
  

• 제품 리스트/제품 상세 페이지/로딩 페이지✅
  -제품 리스트 색상 별 필터 이벤트
  -제품 가격 별 sort 함수 적용
  -반응 형 hover 애니메이션
  -상세 상품 스크롤 이벤트
  -사이즈 옵션 클릭 이벤트
  -이미지 확대 modal 창
  -제품리스트/상세페이지 서버 통신 호출하여 화면에 render
  -로딩 페이지 fetch 전 render하게 적용
  
  

• 로그인/회원가입/Newsletter/search
  -정규식 비밀번호 적용
  -조건식 비밀번호 애니메이션 기능 적용
  -뉴스레터와 서치 페이지 UI구현

🙇 프로젝트에서 좋았던 점(감사했던 점)

협업의 즐거움👯‍♀️

: 물론 혼자서 구글링 하며 기능을 구현해야 하기도 하지만, 고민 스러운 부분은 함께 고민하고, 서로 모르는 부분이 있으면 알려주면서 완성도를 높여가는 부분이 정말 즐거웠다.

: 팀 전체가 배려 넘치고 으쌰으쌰 하는 분위기어서 즐거운 마음으로 임했다. 같은 목표를 향해 달려가는 팀원이 있기때문에 개발이 외롭지 않았다. 서로 칭찬해주면서 임하니, 가능할까? 하는 부분도 가능해졌다!

: 사실 팀원뿐만 아니라 멘토님들도 우리와 한 팀인 것 처럼 열심히 도움을 주셨다.늦은 새벽에도 슬랙으로 도움을 주신 멘토님도 있었다 ㅠㅠ. 항상 좋은 결과를 믿어주고 지지해주는 분들이 있는 것 만으로도 큰 힘이 되고 더 잘하고 싶은 마음이 생겼다. 나도 나중에 경력 쌓인 개발자가 된다면? 그런 사수가 되고싶다 는 생각을 했다.

개발 자신감 상승🙋

: 각자가 만든 부분 부분이 합쳐져서 2주만에 사이트 하나를 완성 할 수 있다는 뿌듯함이 있었다.

: 아직 갈 길이 멀고, 구현 못해본 부분도 있지만 하면 된다라는 자신감을 가질 수 있게 되었다.

개발 역량 상승🏃

: 서로에게 알려주면서 내가 아는 부분을 상기할 수도 있었던 부분이라 나의 개인 공부에도 도움이 되었다. 내가 80% 아는 부분이었는데, 남에게 알려주면서 95% 알게 되는 신기한 경험이라고나 할까? ㅎㅎㅎ

: 오히려 맡은 부분은 끝까지 책임지고 잘해야 한다는 생각 때문에 혼자 무언가를 할 때 보다 더 열심히 하게 되었다.인스타 클론 할때는, 기능을 이것 저것 더 추가해볼까? 하다가 그냥 넣지 않았던 적이 있었는데, 팀 프로젝트를 하게 되니 내가 맡은 부분의 퀄리티는 더 제대로 해야지라는 책임감에 마지막날까지 가능한 기능은 모두 다 적용하게끔 해서 새벽 3시까지 집에 가지 못했다....

💆 아쉬웠던 점(배운 점)

프로젝트 Quality Control ☝🏼

: 매일매일 daily stand-up 미팅 로그만 작성하고, 실제 트렐로에 업데이트는 주기적으로 하지못했다. 2차 프로젝트 때는 트렐로를 세분화 해서 적극 활용 해야 겠다.

: 처음 트렐로 미팅 때 각자 맡을 페이지만 정하고, 페이지 안에 어떤 기능을 넣을지를 세세하게 정하지 않아서, 작업하면서 아? 이런게 있었네 하는 부분이 많이 있었다. 다음부터는 페이지도 하나하나 뜯어서 구현하고자 하는 기능을 세세하게 나누어서 정리를 하고 시작해야 할 것 같다.

백엔드와의 원활한 소통

: 초반에 많이 소통하고 시작했다고 생각했는데, 백엔드에서 모델링 할때, 뷰를 짤 때, 다시 소통하지 않아서, 키값이나 사용해야할 데이터의 구조 차이가 있었다. 또한 백엔드에서도 내가 원하는 mock data형식대로 불러오는 것이 항상 가능하지는 않기 때문에 중간중간 원하는 기능이 있다면 소통하고, 힘들다면 힘든 수준에서 내가 더 적용할 방법을 고안해 내야 한다!

React lifecycle의 이해

: 초반에 fectch의 위치는 컴디마(ComponentDidMount)에 넣는다 라는 것만 이해하고 프로젝트를 시작했다. lifecycle을 정확하게 이해하지 못하고 작업해서 그런지 주먹구구 식으로 console를 찍어보면서 코드를 작성했다. 스크롤 이벤트 적용할 때나 state값 들어오는지를 확인할 때, 아 여기서 render되고 이건 두 번 render 되는구나, 아 이건 처음 render 되는 값이라서 undefined가 되는구나 하고 이해하는 줄 알았지만 동일한 과정을 계속 반복하는 나를 발견했다..(흑흑흑). 2차 프로젝트 전에는 이 lifecycle을 정확하게 이해하고 시작하기 위해 정리가 필요할 것 같다🔥🔥🔥

🤓 기억하고 싶은 코드

한 두개 만 뽑아 보려 했는데 하나하나 소중한 baby 들이라 리스트가 길어졌다..ㅎㅎㅎㅎ

• 마우스 엔터 이벤트 코드(제품상세 페이지 변경, 버튼 색상 별 이미지 변경)
  - 4 일차 정리 포스팅

• 모달 창 코드
  - 8 일차 정리 포스팅

• 스크롤 이벤트 코드
  - 9 일차 정리 포스팅
  

• 로딩 페이지 코드
  - 10일차 정리 포스팅

• 유동 라우팅/상품 filter,sort 코드
  - 11일차 포스팅

2차 프로젝트도 열심히 달려보자🏃🏃🏃🏃