0. 목적
-. vue-cli 사용하면서, 지금까지 공부한 것을 복습해본다.
-. 프론트에서 데이터를 받아와 테이블로 그리는 연습
-. 외부 javascript 패키지 이용해보기
1. 프로젝트 시작
1) vue-cli로 프로젝트 생성
-. 간단하게, bable, router, vuex, eslint의 기본 설정만 넣고 vue 프로젝트를 만든다.
2) 의존성 (dependencies), 플러그인 (plugin) 설치
-. 파이썬의 패키지와 같은 의존성 / 플러그인들을 설치한다.
-. 데이터 수신을 위한 axos, 편한 라우팅을 위한 lodash
-. 표 그리는 툴을 포함한 이것저것 갖고있는 vuetify
3) 프로젝트 실행
-. 코드 수정 시 실시간으로 갱신되는 (디버깅도 해주는) serve 모드로 페이지를 띄워보자.
-. localhost:8080으로 들어가면 작업물의 메인 페이지로 들어갈 수 있다.
2. 테이블 그려보기
-. 원래는 vuetify에서 제공하는 google visualization api의 vue wrapper를 써보려고 했는데, 해당 패키지는 아직 vue3에 대한 대응이 되지 않는 상태라, 직접 google visualization api를 끌어와서 써보기로 했다.
1) 외부 javscript 추가하기
-. 구글신께서는 나같은 뉴비에게 자비롭기 때문에, 구글 api를 이용하면 매우 간단하게 테이블( 및 여러 차트)를 그릴 수 있다. 근데, 한가지 문제가 vue3에서는 <script> 태그를 하나밖에 못 쓰기 때문에, 다른 스크립트를 로드할 수 없다는 건데, 이를 해결하기 위해 component mounted() 내에서 해당 코드를 로드하는 작업을 해줘야 한다.
-. 처음 검색해서 나온 stack overflow 질문글에서는 요래, document head에 스크립트 태그를 하나 더 추가하라고 해서 따라해 봤다.
let googleVisualization = document.createElement('script')
googleVisualization.setAttribute('src', 'https://www.gstatic.com/charts/loader.js')
document.head.appendChild(googleVisualization)-. 위 코드를 삽입하면 <head> 영역에 아래와 같이 스크립트가 들어가는 것이 확인된다.
-. 분명 로드는 되는데..... 콘솔창엔 아래처럼 오류메시지가 뜨면서 작동이 안되는데, 정작 콘솔 창에 google을 입력하면 스크립트가 정상적으로 실행된다.
2) event listener로 스크립트 로드 확인
-. 스크립트가 로딩되기 전에 차트를 만들기 위한 스크립트가 실행돼서 이런 문제가 발생하는 것이라, 한참을 헤메이다 eventlistener로 'load' 이벤트를 확인하고 차트를 그리게 했다.
window.addEventListener('load', () => {
var table = this.initGoogleChart()
})-. 이러면 이제 정상적으로 차트가 그려지는 것이 확인된다. (엄청 노가다 한 이후의 결과물...)
-. 테이블의 자세한 사용법은 다음에...다시 포스팅하기로
'Web > vue.js' 카테고리의 다른 글
| [vue.js] xml to json - 네이버뉴스 가상화폐 관련 글 보여주기 (0) | 2022.02.04 |
|---|---|
| [vue.js] 코인시세 테이블 만들기 (2) 접히는(folding) 테이블 만들기 (0) | 2022.01.29 |
| [vue.js] 중첩 라우팅 (nested routing) (0) | 2022.01.21 |
| [vue.js] 페이지처리 (pagination) - 공공데이터 주가지수 페이지단위 호출 (0) | 2022.01.21 |
| [vue.js] 동적 라우팅 - 공공데이터 지수 상세정보 (0) | 2022.01.20 |
최근댓글