💄 프로젝트 소개   

• 피부 수분에 대한 연구를 기초로 한 화장품 브랜드 라네즈 웹사이트 클론 프로젝트
• 개발기간 : 2020.07.06 ~ 2020.07.17(약 2주)
• 개발인원 : 3 Front-end(강솔미, 김지인, 김민지), 3 Back-end(한준수, 박준모, 양희연)
  Front-end Github
  Back-end Github

---

  💄 데모 영상   

---

  💄 사용된 기술   

   Front-End   

• JavaScript(ES6)
• React.js (CRA, Function형 component 사용(Hooks))
• Styled Components
• Git / Github

   React 라이브러리   

• react-router-dom
• react-script
• react-kakao-login
• react-modal
• react-rating
• react-scroll
• react-slot-machine
• react-slick
• react-awesome-slider
• slick-carousel

   Back-End   

• Python: List-complihension
• Django: select_related, prefetch_related, ORM
• Postman: api 문서화
• RESTful API
• unit test
• AWS

---

  💄 내가 맡은 역할 / 부분   

    로 표시된 곳이 직접 구현한 부분!

   회원가입 / 로그인 페이지   

• 회원가입, 로그인 페이지 아이디 및 패스워드 유효성 검사
  (아이디, 비밀번호 조건 확인 및 비밀번호, 비밀번호 확인 일치 여부 검사)

메인 페이지

• Nav, Footer 바
• 상단 auto 슬라이더

제품 리스트 페이지

• 카테고리(필터)에 맞는 제품만 출력
• 페이지네이션 기능

제품 상세 페이지

• 상품 상세 페이지 기능 구현
• grid 기능을 이용해서 사용자 리뷰 정렬
•    리뷰 작성 modal 페이지 - 포토 리뷰 업로드 기능   

   장바구니 페이지   

• 유저 정보 확인 후 백엔드 서버에 저장된 장바구니 데이터 불러와서 출력
• 수량 수정 및 삭제 버튼으로 장바구니 상품 수량 수정, 삭제 기능
  (배송비 반영한 결제 예상 금액 출력)

   브랜드 페이지 - 서비스 예약 ㅍ

• 서비스 예약 신청시 백엔드 서버로 정보를 전송하여 예약 정보 저장
• 서비스 예약 확인 및 취소 페이지에서 예약 취소 가능

   브랜드 페이지 - Refill Me   

• 최상단 동영상이 자연스럽게 전환되는 애니메이션
• 스크롤 위치에 따라 배경색이 바뀌는 기능

---

  💄 잘한점 + 아쉬운점 + 개선 방법   

   잘한 점   

항상 시간에 쫓기면서, 미완성하면 절대 안된다며 스스로와 팀원을 다그쳤던 1차에 비해, 2차는 굉장히 여유로웠다.
물론 그렇다고 해서 탱자탱자 놀았던건 아니다....

사실 2주라는 시간은 사이트 하나를 구현해내기엔 정말 짧은 시간이고.... 그리고 2주간의 프로젝트 끝에 동기들 앞에서 5분 발표하는것보다 기간을 넘기더라도 하나라도 제대로 끝내는게 더 중요하다고 생각했다.

마지막 발표날에도....조급해서 나도 모르게 짜증을 냈던 1차와는 달리 (좀 멘붕하긴 했지만) 그래도 나름 침착하게 괜찮다 괜찮다~ 하며 마지막까지 잘 마무리했다.

사실.... 미완성 상태로 발표하긴 했으나ㅋㅋㅋㅋ😅 프로젝트 끝나고 찬찬히 완성시키면 되지....! 라는 생각👍

   아쉬운 점   

1차 프로젝트때 너무 달렸던 탓일까? 체력적으로도 멘탈적으로도 한계에 다다랐다는 느낌이었다.
그런데다 익숙한 class형 대신 Hooks와 styled-components라는 낯선 기술을 사용해야 했고, 1차때에 비해 여러가지 기능이 더 추가된 사이트라 시간적으로도 체력적으로도 참 촉박했다.

2차 프로젝트 에서는 꼭 Redux를 사용하고 싶었는데, 결국 Redux는 발표 전날 인강보고 좀 해보다가 적용은 못하고 발표를 진행했다.

그게 가장 아쉽고, 프로젝트 후에 리팩토링을 진행하면서 이 부분은 꼭 Redux로 바꿔보려고 한다.

   개선 방법   

실현 가능한 목표를 분명하게 정하고, 팀원의 속도를 확인해서 중간중간 팀의 방향을 잡아갔어야 했는데 그러질 못했다. Trello도 더 적극적으로 활용하고, 스탠드업 미팅때 뭐 했고 뭐 못했고 이런 얘기보다는 좀 더 팀의 전체적인 진행상황이나 달성 목표에 대해 얘기해봐야 겠다.

---

  💄 기록하고 싶은 코드 / 함수 / 로직   

   이미지 업로드 가능한 리뷰 작성 페이지   

   scroll 위치에 따라 배경색이 변하는 이벤트   

---

  💄 마치며