01.OMDB API (The Open Movie Database)
- 영화 관련 데이터 정보를 불러올 수 있는 API입니다.
02.Usage
- 영화 요청을 받아올 수 있는 주소입니다.
- http://www.omdbapi.com/?apikey=[yourkey]&
- 해당 주소에서
yourkey에 들어가는key값은 OMDB 웹사이트에서 API Key메뉴바에서API Key를 무료로 발급받아 사용할 수 있습니다.
03.Parameters
Parameters는by title과by search으로 구분 됩니다.by search에서는s라는Parameters명령으로 영화의 제목으로 찾고자 하는 영화를 검색하게 해줍니다.
04.Query String
URL뒤에 데이터를 입력하여 전달하는 방법입니다.- 특정한 주소로 접근할 때 기본적인 페이지에 대한 옵션을 명시하는 용도로 활용되는 문자입니다.
Usage query string: 주소 ? 속성 = 값 & 속성 = 값 & 속성 = 값- 요청이 가능한 주소 ? apiKey = 키 값 & S = 검색하고 싶은 영화 제목
- 겨울왕국 영화 데이터 요청하기: https://www.omdbapi.com/?apikey=7035c60c&s=frozen
05.겨울왕국 데이터 요청하기
- 위에서 확인한
Usage주소를 통해 겨울왕국 영화 정보에 대한 데이터를 API에 요청합니다. - 그러면 새로운 페이지로 이동을 하며
JSON포맷으로 되어 있는 정보임을 확인할 수 있습니다.
06.axios 패키지
OMDb API에서 받아온JSON포맷을 이용하여main.js에 활용하기 위한 패키지로axios패키지가 있습니다.- 이는
node.js와 브라우저 환경에서 모두 사용 가능한HTTP요청을 처리해주는JavaScript패키지입니다. - GitHub 저장소: https://github.com/axios/axios
07.axios 패키지 설치
- $ npm i axios
- VS Code의 터미널을 열고 위 명령어를 통해
axios패키지를 설치합니다.
08.프로젝트에서 출력하기
8-1.main.js에서 활용하기
import axios from 'axios'; function fetcMovies () { axios .get("https://www.omdbapi.com/?apikey=7035c60c&s=frozen") .then(res => { // 메소드 체이닝 console.log(res); }); }
axios.get(): 서버에서 어떤 데이터를 가져와서 보여주기 위해URL주소에 있는 쿼리스트링을 활용해서 정보를 전달합니다.
8-2.개발 서버 실행
- $ npm run dev
8-3.영화 제목과 포스터 출력하기
<body> <h1>Hello world!</h1> <img src="" alt="" width="200px"> </body>import axios from 'axios'; function fetcMovies () { axios .get("https://www.omdbapi.com/?apikey=7035c60c&s=frozen") .then(res => { // 메소드 체이닝 console.log(res); const h1El = document.querySelector('h1'); const imgEl = document.querySelector('img'); h1El.textContent = res.data.Search[0].Title; // h1태그 text에 배열 데이터의 0번째 index에서 Title을 가져와서 저장 imgEl.src = res.data.Search[0].Poster; // img.src속성에 배열 데이터의 0번째 index에서 Poster(이미지 주소)를 저장 }); } fetcMovies();
일취월장(日就月將) - 「날마다 달마다 성장하고 발전한다.」