yeongjae-shin/10-drmozart-frontend

WeCode Dr.Jart+ 클론코딩 프로젝트 (Front-End)

프로젝트 소개🙌

• 에스티로더가 아시아 뷰티 브랜드를 인수한 첫 사례의 대표적인 국내 화장품 브랜드 Dr.Jart 클론코딩.

개발 기간📆

• 2020년 7월 20일 ~ 2020년 7월 31일(2주)

팀원🐙

• [10기 신영재]
• [10기 권한성]

개발 목적🧾📈

• Dr.Jart+ 홈페이지를 클론코딩하며 사용자 경험을 고려하여 UI의 중요성을 이해하고 레이아웃 배치를 익힌다.
• React를 다루는데 꼭 필요한 객체(Object)의 정의, 객체의 속성 접근 및 조작 방법을 이해한다.
• Class형 컴포넌트를 다루며 React의 필수 개념인 LifeCycle, State, Props를 좀 더 직관적으로 다루고 이해해본다.

기술 스택 및 구현 기능🛠

기술 스택

• React.js
• React Router
• RESTful API
• Scss
• Slick.js
• Intersection Observer API

구현 기능

• 로그인, 회원가입
• Navigation 기능 구현
• React Router를 이용한 페이지 이동 기능 구현
• fetch API를 통해 백엔드와 로그인 통신 구현
• Image Lazy Loading 구현
• Slick.js를 활용한 슬라이드 구현
• 브라우저 Scroll 이벤트 구현
• 장바구니 제품 추가/삭제 및 수량 증가/감소 기능 구현
• Social Login 기능 구현
• Scss를 활용한 다양한 Transition 효과 구현

정리

• 2주라는 짧은 시간 동안 React를 사용해보며 JSX문법, React 라이브러리, Lifecycle 등을 적용해보며 React의 flow를 이해
• React를 다루는데 꼭 필요한 객체(Object)의 정의와 속성 접근 및 조작방법에 대해 복습
• HTTP 통신의 요청과 응답의 개념을 배우고, 백엔드와 소통해보며 협업의 중요성에 대해서 배움