Today Corona

https://leechaeng.github.io/covid19/

배경

현재 코로나 상황에 아침에 일어나자마자 제일 처음 하는게 일일 확진자수 확인이 되었다. 매일 매일 일일 확진자수, 누적 확진자수를 확인하면서 내가 계속 확인할 수 있는 나만의 코로나 상황판을 제작해보자!!라는 생각에 개발하게 되었다.

이거 디자인 해줄 수 있을까?

아무래도 프론트엔드 개발 중에 디자인이 빠지면 개발하는 맛이 나지 않을 것 같았다. 하지만... 난 디자이너가 아니기 때문에 ㅜㅜ 디자인에 시간을 쏟아서 멋진 디자인을 할 수 없었다..
그래서 디자인 하는 친구에게 🆘 요청 ㅎㅎ

부끄러운 내.. 초안..
저렇게 말했는데도 찰떡같이 해준 친구 고마어,,,
어쨌든 저렇게 내 멋대로 머릿속에 생각한거 아이패드에서 그려가지고 ㅜㅜ 아 ~~ 오른쪽 같이 넣을거다라고 알려주니까 며칠 뒤에 멋진 디자인을 보내주었다 ㅜㅜ

UI/UX 디자이너도 아니지만 내 부탁으로 친구가 뚝딱 만들어줬다. 처음 해보는 UI/UX 디자인이었지만 개발적으로 구현하기 어려운 부분은 없어서 너무 고맙게 개발을 진행하였다!!

API 선택 문제

내가 필요했던 데이터는 국내의 오늘 확진자수, 사망자수, 완치자수였다. 또한 그래프와 표를 그리기 위하여 국내 일별 확진자수와 세계 실시간 확진자수가 필요했다.
또한, gh-pages를 이용하여 github에 배포할 생각이었기 때문에 frontend 코드만이 필요했다. 여러 API 찾고 내가 원하는 요소들이 있는지 확인하는데 시간이 오래 걸렸지만, 최종적으로 CORS에 걸리지도 않고 무료로 여러번 요청 할 수 있었던 https://disease.sh/ 를 선택하였다.

xml로 되어 있던 API들도 많았고, 무료지만 CORS의 벽에 부딪히는 API들이 많아서 지금 생각해보면 개발기간에서 상당한 시간을 썼던 것 같다

작지만 소중한 나의 커스텀 훅

import { useState, useEffect } from "react";
import axios from "axios";

function useAxios<T = any>(url: string) {
  const [state, setState] = useState<{
    loading: boolean;
    error: Error | null;
    data: T | null;
  }>({
    loading: true,
    error: null,
    data: null,
  });

  useEffect(() => {
    axios
      .get<T>(url)
      .then((data) => {
        setState((prev) => ({
          ...prev,
          loading: false,
          data: data.data,
        }));
      })
      .catch((error) => {
        setState((prev) => ({
          ...prev,
          loading: false,
          date: null,
          error: error,
        }));
      });
  }, [url]);

  return state;
}

export default useAxios;

별 건 아니지만, axios를 여러번 사용할 것 같아서 (redux를 사용하지 않았기 때문에) 재사용하기 편하게 axios를 useAxios라는 커스텀 훅으로 만들어서 사용했다.😜

ApexChart.js

너무 너무 어려웠던 ApexChart 였다.. 이 차트를 선택한 것을 후회할 정도로 React에는 그다지 적합하지 않았고 아직 document를 읽는 능력이 뛰어나지 않기 때문에 ㅜㅜ 어려움이 많았다.

전혀 React 스럽지 않은 코드.. (return을 꼭꼭 string으로만 주어야 한다..)

그 중 가장 내가 어렵다고 느꼈던 것은 차트 툴팁 디자인이었는데 이것도 돌아보면 좋은 기억이었다. document들을 열심히 찾아보고 이게 있으려나...? 라고 생각하며 여러번 시도해보고 했던 과정이 돌아보니까 너무 값진 경험이 되었다.
개발 하는 중간 중간에 차트에서 지원해주는 것이 너무 없다고 생각해서 라이브러리를 변경할까 여러번 고민했지만 내가 라이브러리한테 지다니....! 라는 생각과 혼자 하는 프로젝트이다 보니 처음의 목적을 포기하고 타협하고 싶지 않았기 때문에 끝까지 해냈다. 아마 다시는 이 라이브러리를 쓰지 않을 것 같다 ㅎㅎ 그래도 좋은 경험이었다.

회고를 마치며

1월에 2주간 개발 후 다른 친구들에게 보여주어 친구들이 아침마다 확인하는 코로나 상황판이 되었다 🥰
보기 불편하거나 있었으면 좋겠다는 간간한 요청사항을 받아서 몇 명 없는 사용자이지만 조금이나마 유지보수를 하고 있다. 프로젝트를 마치며 조금 아쉬웠던 부분은 너무 여러 군데에서 API를 요청했다는 것이다. 이를 통해 react의 상태 관리를 하는 법에 대해 공부를 시작하였고 요즘은 react-redux를 이용한 다른 프로젝트를 진행중이다.
완성했다는 것에 의의를 두고 싶었는데 멋진 디자인과 배포, 소수의 사용자(친구들) 덕분에 멋진 프로젝트가 완성 된 것 같아서 정말 기쁘다.
눈팅만 하다가 처음 velog에 글을 쓰게 되어서 너무 행복하다 >-<

stack

• React.js
• ApexChart.js
• Typescript
• styled-components

link

• https://github.com/LeeChaeng/covid19
• https://leechaeng.github.io/covid19/