뷰 리소스를 사용하는 방법은 CDN을 이용해서 라이브러리를
로딩하는 방식과 NPM으로 라이브러리를 설치하는 방법이 있다.
CDN 설치 방법을 이용하여 간단히 뷰 리소스로 서버에서 특정
데이터를 받아와 로그로 출력해보겠다.
아래 소스를 보자.
먼저 위 코드는 버튼을 하나 추가해 클릭하면
지정한 URL의 데이터를 가져오는 소스이다.
여기서 불러오는 데이터는 JSON 형식의 간단한 파일이며
프레임워크 종류 - 프레임워크 이름 형태로 키- 쌍 조합으로
총 7개의 데이터 쌍으로 되어있다.
먼저 7line에서는 버튼을 인스턴스 영역안인 <div> 태그안에
<button>태그로 추가했다. 그리고 v-on:click을 이용해
버튼을 클릭하면 getData가 호출되도록 한다.
17line은 getData()에는 뷰 리로스 에서 제공하는 API인
this.$http.get() 을 사용해 해당 URL에서 제공하는
데이터를 받아온다. API이름에서 알수 있듯이 this.$http.get()은
HTTP GET 요청을 서버에 보내고 특정 데이터를 받아온다.
그리고 버튼을 클릭해 해당URL로 HTTP GET요청을 보내고 나면
.then()안에서 응답을 받은 데이터를 response를 이용해 콘솔에 출력한다.
먼저 위 코드를 실행해 개발자도구의 Console를 보면
위와같은 결과를 확인할 수 있다.
두 번째 로그는 응답 데이터의 body값이 문자열이기 때문에
JSON.parse() 자바스크립트 API를 이용하여 자바스크립트
객체로 파싱해서 보기좋게 했다.
<참고> DO it! 예제로 이해하고 실전 프로젝트로 완성하다! Vue.js 입문(장기효)