chanhi2000 / tinder-clone

react를 사용한 Tinder 앱 구현 프로젝트

Tinder Clone

사용 된 기술

• Node JS
  • 프로젝트 생성 : npm create create-react-app
  • Material UI 적용 : npm install @material-ui/icons
  • React Router 적용 : npm install react-router-dom
  • React Tinder Card 라이브러리 적용 : npm install react-tinder-card
  • Firebase 적용 : npm install --save firebase
• VSCode
  • Extension : ES7 React/Redux/GraphQL/React-Native snippets

Snippet

• rfce : create react function

계획 목록

• v0.0.1 : 프로젝트 신규구성
• v0.0.2 : 예제 : Header 리엑트 컴포넌트 생성
• v0.0.3 : Material UI 적용 : Header 메뉴 생성
• v0.0.4 : Header 메뉴 버튼 에니매이션 적용
• v0.0.5 : React Router를 사용하여 화면 렌더링 기능 생성
• v0.0.6 : Tinder Card 컴포넌트 생성
• v0.1.0 : Firebase 연동

실행 커맨드 목록

npm start

• 개발모드에서 실행
• 확인방법 : http://localhost:3000 URL호출

npm test

• 테스트 환경에서 실행

npm run build

• 운영 환경용 결과물 생설

참고

• Full Tutorial Video
• Material UI Documentation
• Material UI 아이콘 찾기
• React Router Documentation