⬇️ 이력서 클릭!

1️⃣ 기획

1-1 기능을 담은 화면 구성

• 맑은 날 떠나고 싶은 도시인들을 위해 강원도 주요 여행지 5곳을 선정해 실시간 미세먼지 수치가 가장 적은 지역을 추천한다. 지역별 과거 미세먼지 수치를 그래프로 확인 하고 기록을 남기는 컨셉으로 기획했다.
• 화면 구성은 Oven(Kakao) 을 이용했다.

1. 홈 페이지

2. 차트 페이지

3. 기록 페이지

2️⃣ 기능 구현을 위한 라이브러리

1-1 Nivo Chart 라이브러리

• 프로젝트의 핵심은 필요한 사용자가 필요한 정보를 그래프로 보여주는 것이라고 생각하고 차트 중심으로 라이브러리를 모색했다. 홈페이지의 막대 그래프와 차트 페이지의 라인 차트는 Nivo Chart 라이브러리를 사용하기로 결정했다.그 이유는

  • 리액트의 특징인 component로 구성 되어있다.
  • 사용자가 많은 편이라 래퍼런스가 많다. (chart.js에 이어 2위)
  • 다양한 종류의 차트를 지원한다.
  • 프로젝트에 스토리북을 설치하면 그래프를 커스터마이징 하여 브라우저에서 UI확인하기 편하다. (사이트에서도 기본적인 것은 커스텀 가능함)
  • 반응형을 지원한다.

  Home

  📖 Nivo 차트 라이브러리 사용기

1-2 Ant Design 라이브러리

• 기록 페이지의 테이블은 직접 구현할까 생각하다가 원하는 레이아웃과 기능으로 구성하기위해 Ant Design 라이브러리를 사용하기로 했다. 그 이유는

  • 리스트, 정렬, 필터, 텝 등 프로젝트에서 필요로 하는 요소를 대부분 Ant Design에서 지원한다
  • 반응형을 지원한다.

  Ant Design - The world's second most popular React UI framework

📖 Ant Design 라이브러리 사용기

3️⃣ 필요한 데이터 찾기 (공공데이터 API)

• 공공데이터 포털에서 필요한 데이터에 대한 키워드로 검색하여 찾았다. 당초 기획대로라면 기상 예보까지 필요했는데 그렇게 되면 Api를 5개 사용해야해서 예보에 대한 부분은 생략했다.