오늘은 이전 포스팅에서 이야기 했었던 API 통신의 완성을 해볼려고 합니다.
1탄에서는 API 통신을 위한 준비를 하였었는데요.
2탄에서는 해당 API를 이용하여 실제 통신을 진행하고 해당 데이터를 가지고 원하는 결과물을 출력하는것 까지 해볼려고 합니다.
1. NPM을 설치하자
NPM을 설치를 하여 로컬 셋팅을 시작하여야 합니다.
뭐… 그냥 html로 해도 되지만 NPM을 사용하는 이유는 유용한 패키지들을 사용하여 소스의 확장성등을 위해 사용합니다.
그냥 세상에는 천재들이 많으니 천재들이 만들어 놓은것들 사용하여 멋지게 만들어 봅시다.
참고로 이번 포스팅에서는 Node가 로컬에 전역으로 깔려있다는 전재하에 진행을 하겠습니다.
npm 설치? 너무 쉽습니다.
해당 사이트에 접속한 뒤 사용중인 에디터 터미널에
이렇게 적어주시면 자동으로 설치가 진행이 되면서, 초기 셋팅을 도와줍니다.
설치를 하다보면 영어로 나오면서 뭐를 설정해라 뭐를 해라 라고 할텐데
초등학교만 졸업해도 알 수 있는 영어로 나올테니 겁내지마시고 설정을 진행하시면 됩니다.
2. 로컬에서 NPM을 실행해보자
설치가 정상적으로 진행이 되면 이상한 폴더들이 생성되고 이상한 파일들이 생성이 되었을 것입니다.
여기서 NPM을 실행시키기 위해서는 `package.json`이라는 파일을 찾아야 합니다.
package.json 은 이런식으로 생겼습니다.
여기서 중요한 scripts 를 보시게 되면 serve/build/lint 가 있을 것 입니다.
우리는 NPM 을 실행시킬려고 하니 serve 를 가지고 실행을 시키면 됩니다.
npm run serve
해당 명령어를 입력하게 되면 실행이 정상적으로 되면서 로컬에서 사용할 수 있는 페이지가 생성이 될 것 입니다.
자 그러면 모든 셋팅은 끝났습니다.
이제 api 를 가져와보겠습니다.
3. API 가져오기
App.vue 파일로 들어가 봅시다.
그럼 기본적인 vue 형태로 되어 있을 텐데 해당 페이지는 처음 사용자가 접속하였을때 보여지는 페이지 입니다.
우리는 이 페이지에서 API 통신을 진행 할 것 입니다.
그리고 ! axios 를 설치하여야 합니다.
왜 설치하냐고요 ? vue-ajax 통신을 위하여 설치를 하여야 합니다.
설치법은 간단합니다.
터미널에
npm install axios
만 입력 하면 끝입니다.
그러고 import 하여 사용을 진행하면 됩니다 !
이제 진짜 모든 준비는 끝났습니다.
제가 만든 vue API 통신 소스 입니다.
하나하나 살펴 보도록 하죠.
우선 data() 에 있는 것들 부터 보게 되면 저곳에는 제가 출력하고 싶은 데이터들을 만들어 놓은 공간 입니다.
이제 데이터들을 가공하면 저기 공간에 데이터들이 들어가게 되겠죠 ?
methods 에 있는 searchWeather 함수는 사용자가 버튼을 클릭했을때 API 데이터 값을 보여주게 하는 함수 입니다.
저기 함수가 API 통신의 핵심이라고 보면 될거 같습니다.
BASE_URL 에는 데이터를 받아올 API 를 호출 하는 데이터를 가지고 있습니다.
하단에 보시게 되면 axios를 사용하면서 BASE_URL 의 데이터를 ajax 방식으로 가져옵니다.
그러고 이제 아까 만들어놓은 data() 의 공간들에 원하는 데이터들을 삽입하여
이런 식으로 데이터를 넣어 사용하시게 되면 됩니다.
그럼 보기 버튼을 클릭을 하면 원하는 데이터를 이런식으로 출력 할 수 있습니다.
자세한 소스는 제 깃헙 소스에 있으니 확인 부탁 드립니다.
감사합니다 !
