소개
이 프로젝트에서는 한 도시의 연중 기온 데이터를 표시하는 날씨 추세 차트를 만드는 방법을 배우게 됩니다. 이 차트를 통해 사용자는 현재 달의 데이터와 다음 7 일간의 데이터를 전환하여 날씨 추세를 포괄적으로 볼 수 있습니다.
👀 미리보기
"현재 달"과 "다음 7 일" 전환 효과는 아래 그림과 같습니다.
달 전환 효과는 다음과 같습니다.
🎯 과제
이 프로젝트에서 다음을 배우게 됩니다.
- Axios 를 사용하여 JSON 파일에서 날씨 데이터를 가져오는 방법
- 월 목록을 렌더링하고 클릭 이벤트를 처리하여 표시된 데이터를 변경하는 방법
- 현재 달의 데이터와 다음 7 일간의 데이터를 전환하는 탭을 구현하는 방법
- 날씨 데이터를 표시하기 위해 Echarts 차트를 초기화하고 사용자 정의하는 방법
🏆 성과
이 프로젝트를 완료하면 다음을 수행할 수 있습니다.
- Axios 를 사용하여 JSON 파일에서 데이터를 가져오기
- Vue.js 를 사용하여 반응형 (responsive) 하고 대화형 (interactive) 사용자 인터페이스 만들기
- Echarts 를 사용하여 고급 기능이 있는 사용자 정의 차트 만들기
- 사용자 상호 작용을 처리하고 그에 따라 차트 업데이트
- 프론트엔드 개발, 데이터 시각화 및 사용자 경험 디자인에 대한 지식 적용
