프로젝트 소개

코로나 현황을 알려주는 웹 사이트

🌐프로젝트 링크

https://project-cut.netlify.app

⚙️개발 언어

Javascript, Nodejs

💻개발 스택

Front

Back

배포

Front

• Netlify

Back

• Heroku

⏱개발기간

2021.08.27 ~ 2021.09.24 (약 1개월)

프로젝트 기능

• openAPI를 이용하여 코로나 확진자 관련 데이터를 차트, 지도로 시각화
• kakao map API를 이용해 주변 예방접종센터 확인
• naver search news API를 이용해 코로나 관련 뉴스 검색결과
• 해외 코로나 현황 및 대시보드 확인 가능
• 반응형으로 설계하여 모바일 가능.

문제와 해결

1. Cors 문제

   • 클라이언트에서 axios로 openAPI를 받을수 없어 Express를 통해 데이터 수신

2. 데이터 시각화 방법

   • Chartjs를 이용하여 데이터를 도넛, 바 형태로 데이터를 시각화함.

추후 보완사항

• 월요일과 같은 날짜는 데이터가 집계되지 않는 일요일의 데이터와 비교하기 때문에 데이터가 집계되는 날짜와 비교하도록 바꿀것.
• 다크모드 적용-
• 카카오맵 개선(커스텀 오버레이 닫기기능추가)

프로젝트 아키텍쳐

사이트 화면

[국내 총 코로나 현황 집계화면(메인화면)]

[환자 현황과 지도로 국내 시도별 코로나 전일대비 확진자 표현]

[카카오 맵 API를 이용한 주변 예방접종센터 확인]

[해외 코로나 현황 화면]

[존스 홉킨스 대학의 전세계 코로나 현황판]

[네이버 API를 이용한 코로나 관련 뉴스]