[ 공부기록 ] Clone Coding - COVID19: status

안녕하세요 상훈입니다.

Vue cli 3 를 유튜브로 클론코딩 하였습니다.

해당 강의 링크 및 영상

위는 해당하는 강의 내용입니다.

 

Vue.js 버전은 3.2.20 이고, 
Vue/cli는 4.~ 입니다. 

Vue.js version description

 

style은 tailwind.css를 사용하였고,
추가된 라이브러리는 moment.js 로, datetime을 출력할 수 있는 자바스크립트 라이브러리입니다. 

tailwind

구현내용 header

일단 결과적으로 문제가 한 개 있었는데 고치지 못하였습니다. ㅎㅎ;;

moment.js 관련해서 인 것같은데 어떻게 해야할지 모르겠더군요. 

=> 원작 개발자님의 소스를 보아도 아예 포맷이 달라, 결론을 얻어내지 못하였습니다.

좌 : 내 프로젝트  /  우 : 원작 프로젝트(수정된듯)

해당하는 에러

발생한 에러는 dataDate(현재시각)관련해서의 에러인데... 타입에러가 발생하였고, 프로퍼티가 선언되지 않았다고 합니다.

분명 main vue 에서
1. 변수 선언
2. DataTitle.vue 에서 props로 참조해주어
3. data 출력을 진행하였지만 해당되는 내용에 에러가 발생하였습니다. 

언젠가 이게 무슨 원리로 제대로 작동하는지 이해해서 수정할 수 있을거라 생각합니다......ㅎ.ㅎ..

---

결과화면

국가를 선택하기 전 : Global 설정.

현재

select-option을 이용하여 해당 내역을 모두 불러올 수 있고, 이를 computed 처리하여 실시간으로 데이터가 전환됩니다. 

button - Clear Country 하면 다시 Global을 나타냅니다. (=초기화)

 

모바일 화면에서는 이렇게 출력될겁니다.

 

 

---

이렇게 프로젝트를 따라 만들어보면서 느낀것이 

1. vue.js 에 대해 이제 알아듣는 것 보니 걸음마는 떼었다.
2. async await에 대해 공부를 좀 해야겠습니다.

이상입니다.

수고!

 

사용

Icon Loading GIF - Find & Share on GIPHY

코로나 api

Coronavirus COVID19 API

Moment.js | Docs

Vue에서 moment사용하기 (feat. vue-moment)

async와 await를 사용하여 비동기 프로그래밍을 쉽게 만들기 - Web 개발 학습하기 | MDN

프로젝트전체

GitHub - bradtraversy/vue-covid-tracker: Simple tracker for Covid-19 cases and deaths

,