coronavac - 간단 코로나 백신 접종 통계 사이트 회고

2021-05-09일에 작성 된 글입니다.

프로젝트 소개

CoronaVac

공공데이터 중 코로나 백신 접종 통계 api를 이용하여 사용자가 통계 자료를 쉽게 볼 수 있는 서비스를 제공하는 웹 사이트

https://www.coronavac.site/

https://github.com/choejoonkyung/CoronaVac-client

진행 기간

• 2021년 4월 29일 ~ 2021년 5월 9일

기술 스택

• React
• TypeScript
• React-Router
• React-Query
• Recoil
• Emotion
• Echarts

대표 사진

회고

프로젝트를 진행 하게 된 계기

여느때와 다름없이 회사에서 일 하던 도중에 회사 동료에 의해서 velopert님이 유튜브에서 라이브 코딩 방송을 한다는 것을 알게되었다. 리액트를 처음 알아볼 때 상당한 도움을 주셨던 분이라서 좋은 기억에 바로 유튜브로 찾아가 보았다. 미국 주식 백테스팅 관련 프로젝트를 진행하면서 라이브 코딩을 하고 있었는데 사용되는 기술 스택이 지금 회사 프로젝트와 비슷해보였다. 라이브 코딩으로 진행 중인 프로젝트가 깃 헙에 코드가 공개 중이라고 해서 바로 찾아가 코드를 읽어보았다. 코드을 읽어보면서 회사 프로젝트에 녹일 만한 코드들이 정말 많이 보였다. 결국 프로젝트의 모든 코드을 다 살펴본 것 같다. velopert님은 사이드 프로젝트에서 적용 시켜본 걸 회사 프로젝트에 적용해본다고 했다. 그 날 이후 계속 짬짬히 유튜브 방송을 계속 챙겨보다 보니 자극을 받았나보다. 갑자기 사이드 프로젝트를 진행하면서 공부도 하고 회사 프로젝트에 녹이고 싶었다. 그래서 시작하게 됬다.

프로젝트 주제는?

사이드 프로젝트를 해야 겠다고 마음 먹은 사람이라면 아마 대부분 공감 할 것이다. 내가 무언가 만들고 싶은 게 있고 그 아이디어를 실현시키고 사용자들에게 제공하기 위해 사이드 프로젝트를 해야 겠다고 마음 먹은 사람은 거의 없을 것 같다. 주변만 봐도 대다수가 그냥 개발 커리어를 위해서, 지금 회사에서 사용하는 기술 스택이 뒤쳐저서 따로 공부를 위해, 회사에서 사용하는 기술이지만 내 실력이 부족해서 등등 본인의 아이디어 실현 보다는 앞서 열거한 이유들로 시작하는 것 같다. 나 또한 갑자기 사이드 프로젝트를 하겠다고 마음 먹었으니 당연히 아이디어가 없었다. 무엇을 할지 한참 고민하다가 결국에는 사람들이 요즘 시국에 그나마 궁금할 정보인 코로나 백신 데이터 통계 사이트를 만드는게 좋겠다고 생각했다. 마침 데이터도 open api로 제공되어서 코로나 백신 데이터 통계를 쉽게 볼 수 있는 서비스를 만들기로 확정 지었다.

프로젝트를 진행 할 때 지킬 목표

이 프로젝트를 진행하면서 얻고 싶은 성과를 정리 한 뒤 진행했다. 얻고 싶은 것을 정한 다음 프로젝트 볼륨을 잡게 잡은 뒤 빠르게 끝내야 했다. 하루에 한 두시간 밖에 투자를 할 수가 없었고 그렇게 큰 볼륨이 나오는 주제도 아니였기 때문이다. 내가 정한 목표에 맞는 성과들만 얻어간다면 만족스럽게 끝낼것 같았다. 아래는 내가 정한 목표들이였다.

1. 불러온 데이터는 캐싱하기
2. 데이터가 패칭 중일 때는 로딩스피너나 스캘래톤 사용하기
3. css-in-js 라이브러리 잘 사용하기
4. customhook - component 구조 가져가기

나는 회사에 들어가기 전 까지 사용자 경험에 대해 그리 관심이 많지 않았다. 어쩌면 아예 없었다. 그래서 인지 내 입사 전 포폴을 보면 사용자 경험 따윈 없다. 불러왔던 데이터는 계속 다시 받아와서 그려주기 때문에 게시판에서 게시물 안으로 들어갔다가 목록 버튼을 누르고 나오면 화면이 깜박이면서 다시 게시물 리스트를 불러온다. 캐싱을 하지 않았기 때문이다. 또한 게시판 리스트를 불러올 때 로딩스피너나 스캘레톤 따위도 없었다. 그냥 갑자기 띠용하고 등장한다. 입사 후 어느정도 지나고 나서 사용자 경험에 대해 알게되고 다시 포폴을 보니 이러한 점들이 많이 아쉬웠었는데 이번 프로젝트에는 개선하고 싶었다.

대부분 react와 스타일 시트를 사용하는 방법을 css-in-js 라이브러리인 styled-components를 사용하던가 컴포넌트와 css (scss)을 따로 분리한다. 회사에서 css-in-js 라이브러리를 사용함에도 불과하고 한 js에 스타일된 컴포넌트를 다 넣고 따로 분리해서 쓴다. 스타일이 종속된 컴포넌트라 분리해도 괜찮다고 생각 했지만 매번 그 컴포넌트에 스타일을 보러 파일을 이동해야된다는 불편함이 있었다. 그래서 인지 나의 개인 프로젝트에서는 css-in-js 잘 사용하기가 있었다. 컴포넌트 파일에 스타일까지 정해져 있어 보기 쉽도록 만들고 싶었다.

주로 container-component 구조를 가져갔었는데 프로젝트를 다시 시작하기 전에 구조에 대해서 생각해보니 이 구조는 이제 필요가 없을 것 같았다. react hooks가 나오기전에는 어쩔 수 없이 클래스형으로 컨테이너를 감싸줘야 했는데 이 방식은 컨테이너 컴포넌트를 custom hook으로 대체하면 된다.

진행하면서 느낀 점

1. vercel로 배포하길 잘 했다.

원래는 ec2같은 서버를 하나 대여해서 웹 서버를 설치한 뒤에 빌드된 프로젝트를 수동으로 올리는 방법을 사용했었는데 이번에는 깃 헙에 푸쉬만 하면 자동으로 배포되는 서비스를 사용해봤다. 결론은 정말 편해지고 좋았다. let`s encryt로 https를 설정하고 웹 서버 셋팅도 해주는 과정이 생략되고 자동 배포되니 말도 안되게 편하다.

(무엇보다도 남한테 url를 바로바로 던지면서 자랑할수있다..

) 앞으로도 자주 쓸 것 같다.

2. 정했던 목표들은 꽤나 잘 지켰다.

앞서 지키고 싶었던 목표들을 세우고 들어가서인지 코딩 할 때마다 신경쓰게 되고 결과물이 잘 나왔다. 앞으로도 목표를 설정하고 진행해야 겠다.

3. emotion

css-in-js 라이브러리로 emotion을 사용 했는데 함수로 사용이 가능해서 파라메타로 값을 받아와서 스타일이 가능하다. 즉 조건부 스타일, 동적 스타일이 쉽게 가능하다. 이게 정말 매력적이라고 생각해서 계속 사용하게 될 것 같다.

4. react-query

데이터 캐싱과 패칭 중 로딩처리를 위해서 react-query를 사용 했다. 접종 그레프를 불러오는데 어느정도 시간이 걸리는데 그 때 로딩처리를 해주니 사용자 경험이 많이 올라간것같다. 한번 불러왔던 그레프는 캐싱되어서 다시 로딩스피너가 뜨지않게 처리했다. 이것도 사용자 경험이 많이 올라간 것 같아 만족스럽다.

5. 기술적인 목표는 정했지만 프로젝트의 세부 목표를 정하지 않았다.

내가 정한 목표들은 다 기술적인 목표였다. 프로젝트의 세부 목표들은 다 추상적으로 정하고 들어갔다. 예를 들어 기간은 언제까지 할 것이며, 하루에 몇 시간을 쓸 것이며, 세부 화면 기획 등등 기술적인 목표 말곤 거의 없었다. 목표를 설정 할 때에는 세부 목표들도 신경 써야 할 것 같다.

6. figma는 재밌다.

figma로 한번 로고와 아이콘을 만들어봤는데 생각보다 재밌다. 앞으로 화면 기획도 한번 만들어 볼 계획이다.

앞으로

이 프로젝트를 진행하면서 느낀점은 프로젝트 진행 전에 목표를 정말 정밀하게 세워야 된다는 것이다. 프로젝트 기획이 없으면 주먹구구 식으로 대충대충 구현하면서 넘어가게 되고 결국 엉망이 된다. 앞으로 서버까지 구현 된 서비스 하나를 구축하고 싶은데 이때에는 화면 기획, 기간 계획, 기술적인 기획등 세밀하게 세우고 시작해야 겠다. 그리고 사이드 프로젝트를 진행 하는 것은 생각보다 재미있다. 내가 성장한다는 느낌을 받아서인지 아니면 회사 일이 재미없는건지 왠지 모르게 이번 프로젝트는 재밌게 진행했다. 다음 프로젝트도 재밌게 해봐야 겠다.