Giter VIP home page Giter VIP logo

findmisemeonji's Introduction

Typescript + toolkit/cAT + vite

  • 0. 미세먼지 정보는 axios를 통해서 api에서 받아와야합니다. (useEffect 등을 통해서, 사용자가 카드를 보려고 하면 api에 요청을 보내서 데이터를 받아오도록)

  • toolkit / cAT 사용

  • 1. 미세먼지 정보를 표시하기 위한 카드 형태의 컴포넌트 제작

  • 1-1. 카드 컴포넌트에서 styled-component 혹은 sass 등을 적절히 활용하여, props에 따라 배경색, 글자색 등이 달라지도록 제작 (미세먼지 수치에 따라 카드의 색상이 변화할 수 있도록)

  • tailwindcss 사용

  • 1-2. 카드 컴포넌트에 즐겨찾기 등록/해제를 위한 버튼을 만들고, 즐겨찾기 등록 여부에 따라 버튼의 형태가 달라지도록 제작

  • 2. 지역을 변경하기 위한 드롭다운 메뉴 형태의 컴포넌트 제작 (지역을 변경하면 화면에 표시되는 카드의 미세먼지 지역/수치 등의 정보도 변경에 지역에 맞추어서 달라져야함)

  • 3. 기본 지역 보기 / 전체 보기 / 즐겨찾기 지역 보기를 전환할 수 있도록 화면 하단에 탭 컴포넌트 제작

  • 4. 기본 지역 보기 / 전체 지역 보기 / 즐겨찾기 지역 보기 페이지 각각 구현

  • 5. react-redux를 활용해서 즐겨찾기 등록/해제 액션에 따라 즐겨찾기 데이터가 변경되도록 하고, 즐겨찾기 데이터는 어떤 컴포넌트에서든 불러올 수 있도록 제작 (container를 만들어서 활용할 것)

  • toolkit / cAT 사용

소요시간: 9시간

findmisemeonji's People

Contributors

tchaikovsky1114 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.