/react-learn_mst

Primary LanguageTypeScript

React Learned Project.

React JS Master Class in Nomadcoders

View page: https://heeja.github.io/react-learn_mst/

목적

  • React.JS 익숙해지는 훈련
  • 부족한 CSS 다루는데 익숙해지기
  • React.JS를 사용하여 Front-End 구현
    • Open API를 통해 데이터 처리하기
  • 강의에서 구현한 아래 기능들을 컨포넌트화하여 github.io에서 볼 수 있도록 하기
    • Crypto Info
    • Todo List
    • Tello
    • NoFlix

프로젝트를 통한 배움

  • 단순한 Copy 프로젝트이지만 강의 내용을 넘어서 어떻게 더 좋게 만들지, 합리적으로 구현할 지 생각하게 될 수 있는 시간이었다.
    • 강의에서는 각 기능별로 사이트를 만들었지만 이번 프로젝트에서는 하나로 통합시켰다.
    • 기능의 구현에도 유저입장에서 사용할 때 불편함을 줄이고, 기능의 목적에 포커스를 맞추려고 노력할 수 있었다.
  • UPBit API를 추가로 사용하면서 자산을 관리하는 부분까지는 사용하지 못했지만 레퍼런스를 참고하며 데이터를 다루고 기능을 구현하는데 재미있었다.

페이지 구성 및 기능 목적

  1. Crypto Info.
  • 수많은 코인들의 설명과 정보를 간략하게 안내
  • Upbit에서 원화로 거래되는 코인들의 시세확인
  • 차트를 지원하여 시세확인
  1. Todo List
  • Clone Coding
  • todo 카드를 만들고 완료 후 버튼을 누를때 재밌기 위해 css 애니메이션 추가
  • 반응형, 애니메이션 등으로 사용에 재미를 조금이라도 부여해보기
  1. Tello copy
  • 드래그 앤 드롭으로 카드를 옮길 수 있는 Todos List
  • 사용하기에 따라 Todos List가 아닌 다른 기능을 할 수도 있다고 생각됨..
  1. Netflix copy
  • Netflix UI를 사용하여 영화 정보 제공하기

사용 스택

  • React
  • TypeScript
  • React Query
  • Recoil
  • Styled Components
  • React Beautiful dnd (Trello)
  • apexcharts (Crpto - Coins)
  • Framer Motion
  • gh-pages

API

  1. Crypto Page
  • UPBit API
  • Coin Paprica API
  1. Noflix Page
  • themoviedb API