FineDust Map💨

오픈 API를 활용한 각 시도별 미세먼지 데이터를 검색할 수 있는 미세먼지 알리미 앱

  • 데모사이트 : DEMO

  • 작업기간 : 총 3일

  • 작업인원 : 1인

  • 사용언어 : React

  • 라이브러리 : redux, redux-toolkit, axios, react-router-dom, styled-component

  • 작업목표 :

    • redux를 활용하여 데이터를 관리한다
    • 주어진 api를 가공하여 출력한다
    • 즐겨찾기를 등록하고, 해제하는 기능을 구현한다

    🧡앱 소개

    ✨지역 전체 보기

전체보기 탭에서는 원하는 지역을 선택하여, 해당 지역의 전체 미세먼지 데이터를 조회 할 수 있습니다

✨내 지역 보기

내 지역보기 탭에서는 내가 선택한 하나의 지역을 고정적으로 보여줍니다

✨즐겨찾기

각 카드의 북마크 아이콘을 클릭하여 즐겨찾기 지역으로 설정이 가능합니다

즐겨찾기로 등록 된 지역은 즐겨찾기 탭에서 모아볼 수 있습니다

✨로딩아이콘

데이터를 불러오는 동안 귀여운 로딩 아이콘이 나타납니다

✨local storage

각 페이지에서 불러 온 지역은 로컬에 저장되어 화면이 새로고침 되어도 유지됩니다


마치며🙌

가능하다면 .. 최적화 작업까지 진행해보고 싶었는데 아직 최적화는 익숙치 않아서 어느정도 시도하다가 포기해버렸다.. ㅜㅜㅜ 배울땐 그리 어렵지 않아보였는데 막상 적용하려니 맘처럼 쉽지않군...💨
그래도 전체적으로 원하는 모양으로 프로젝트가 잘 굴러가주어서 제법 뿌듯합니당✨

profile
프론트엔드 개발자 성장일기 💭

0개의 댓글