반응형
OMDB API: 영화정보를 가져오는 API
참고 (검색: omdbapi)
OMDb API - The Open Movie Database
www.omdbapi.com
영화정보를 요청할 수 있는 URL (api key를 발급 받아야 사용 가능)
Query String: 문자를 가지고 어떠한 정보를 검색한다는 의미
문법: 주소?속성=값&속성=값&속성=값
예시(JSON 형태로 보여진다.)
http://www.omdbapi.com/?apikey=7035c60c&s=frozen
axios: 위와 같은 데이터를 처리해줄수 있는 패키지
https://github.com/axios/axios
axios/axios
Promise based HTTP client for the browser and node.js - axios/axios
github.com
HTTP 요청을 처리해줄 수 있는 패키지(브라우저, node.js 환경에서 사용 가능)
프로젝트에 설치: npm install axios
package.json 파일에서 확인
실습 코드
// omdb api
// axios 패키지 사용(HTTP 요청을 처리하기 위해)
import axios from 'axios'
function fetchMovies() {
// apikey= 발급받은 api key, s= 검색하고자 하는 영화 제목
axios
.get('https://www.omdbapi.com/?apikey=7035c60c&s=frozen')
// url에 해당하는 정보를 처리하는 구문
.then((response) => {
console.log(response)
})
}
// 실행
fetchMovies()응답받은 데이터를 콘솔에서 확인
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="./main.js"></script>
<script src="./test.js"></script>
</head>
<body>
<h1>Hello world !</h1>
<img src="" alt="" width="200">
</body>
</html>main.js
// omdb api
// axios 패키지 사용(HTTP 요청을 처리하기 위해)
import axios from 'axios'
function fetchMovies() {
// apikey= 발급받은 api key, s= 검색하고자 하는 영화 제목
axios
.get('https://www.omdbapi.com/?apikey=7035c60c&s=frozen')
// url에 해당하는 정보를 처리하는 구문
.then((res) => {
console.log(res)
const h1El = document.querySelector('h1')
const imgEl = document.querySelector('img')
h1El.textContent = res.data.Search[0].Tilte
imgEl.src = res.data.Search[0].Poster
})
}
// 실행
fetchMovies()
반응형
'프론트엔드 > JavaScript' 카테고리의 다른 글
| 정규표현식2 - 메소드 (0) | 2021.06.07 |
|---|---|
| 정규 표현식 (0) | 2021.06.07 |
| JS 데이터 - Storage (0) | 2021.06.04 |
| JS 데이터 - JSON (0) | 2021.06.03 |
| JS 데이터 - lodash 사용 (0) | 2021.06.03 |
