Community

개발자 99% 커뮤니티에서 수다 떨어요!

← Go back
Cocha - 차트로 보는 코로나 현황
#side_projects
2년 전
3,076
3

서비스명 : Cocha

URL : https://cre4tive97.github.io/Cocha

이미지 :

undefined

undefined

undefined

자기소개 :
안녕하세요👋 일본에서 거주중인 25살 프론트엔드 개발자 지망생입니다.
노마드코더에서 3월부터였나.. 태어나서 처음으로 HTML/CSS(코코아톡 클론) 공부부터 시작해서 어느덧 반년정도 지났네요.
도중에 Javascript가 너무 어려워서 2달정도 개발공부를 쉬다가 얼마 전부터 다시 열심히 공부를 시작했습니다.
요즘은 Typescript, node.js, Python을 각 잡고 배워볼 생각입니다.💪

서비스 소개:
최초 접속시 국내 신규 감염자수를 보여줍니다.
굿바이코로나 API를 참조해서 실시간 코로나19 현황을 차트로 보여줍니다.
사용자는 4가지의 정렬기능, 지역 선택을 하여 원하는 정보만을 차트로 볼 수 있습니다.
반응형으로 제작했습니다.

시작하게된 계기:
프론트엔드의 꽃 AJAX요청과 데이터 시각화에 익숙해지고자 만들었습니다.
처음부터 너무 방대한 데이터를 다루고 테이블화 하는 것 보다, 간단한 데이터를 차트로 시각화하며 익숙해지자고 마음먹었습니다.

개발:
서버 없이 프론트만 작업했습니다. (1주일 정도 걸렸습니다)
데이터가 변경될때마다 Re-rendering 되야 하는 상황이 많아서 Vanila JS보다 프레임워크를 쓰는게 좋다고 판단했습니다.
저는 리포자(리액트포기한자)라서 Vue.js로 개발했습니다.
사용한 라이브러리들은 제 깃허브 에서 확인 가능합니다.
정렬버튼 관련 버그 해결하는데 90%이상의 시간을 투자했습니다.

느낀점:
자바스크립트 숙련도의 부족함과 자료구조, 알고리즘 공부의 필요성을 뼈저리게 느꼈습니다.
지금 생각해보면 어레이 메소드들을 조금 더 잘 활용해서 코드를 예쁘게 만들 수 있었을 것 같은데, 버그가 발생하면 버그 수정에 급급해서 코드를 개판으로 짜서 후회되네요.

더 열심히 공부해서 코드 리팩토링도 해보면서 성장하고 싶습니다.

마치며:
무슨 프레임워크를 쓰던지 가장 중요한건 자바스크립트 기본기인 것 같습니다.
니꼬쌤이 항상 강조하시는대로 자바스크립트 기본기를 키우고 프레임워크를 시작합시다.

안 그러면 저처럼 리포자 됨.

3 comments