자유롭게 영화 검색이 가능한 사이트 구현을 위한 OMDb API 실습 정리
API
application programing interface
기능을 쓰기 위한 명령들
01.OMDB API (The Open Movie Database)
영화 관련 데이터 정보를 불러올 수 있는 API.
영화를 검색할 수 있는 명령들.
02.Usage
http://www.omdbapi.com/?apikey=[yourkey]&영화 요청을 받아올 수 있는 주소
서버는 다 돈이기 때문에 정해진 사람들에게만 데이터를 준다.
따라서 key값을 가지고 있어야만 데이터를 받을 수 있다.
03.Parameters
Parameters는 by title과 by search으로 구분 된다.
s : 영화 제목으로 검색할 수 있다.
page : 기본값이 1이어서 1페이지(=10개)씩 출력된다.
04.Query String
URL 뒤에 데이터를 입력하여 전달하는 방법.
특정한 주소로 접근할 때 기본적인 페이지에 대한 옵션을 명시하는 용도
요청이 가능한 주소 ? apiKey = 키 값 & S = 검색하고 싶은 영화 제목
05.데이터 요청하기
위에서 확인한 Usage 주소를 통해 선택한 영화 정보에 대한 데이터를 API에 요청한다.
그러면 새로운 페이지로 이동을 하며 JSON 포맷으로 되어 있는 정보임을 확인할 수 있다.
axios
요청받은 데이터를 자바스크립트에서 쓸 수 있게 해준다.
HTTP 요청을 처리해주는 자바스크립트 패키지
외부에서 가져다 써야하기 때문에 아래의 fetch 를 쓰는 것이 좋다.
06. fetch()
내가 만든 웹 사이트에서 가지고 있지 않은 데이터를 다른 웹서버에서 네트워크 통신을 통하여 가져올 때 사용하는 브라우저에서 제공하는 자바스크립트 함수
첫번째 인수로 주소를 넣을 수 있다.
- fetch 함수 쓰는 방법
fetch('주소')
.then(res => res.json())
.then(res => {
//res is result!
})- .then 대신, async await 을 쓰면 아래와 같다.
const res = await fetch('주소')
const json = await res.json()
//json is result!(async () => {
const res = await fetch("https://omdbapi.com/?apikey=7035c60c&s=frozen");
const json = await res.json();
console.log(json);
})();메모리 상에 만든 요소들에 영화, 포스터를 넣고
바디 부분에 차곡차곡 밀어넣어 총 10번 동작하게 된다.
따라서 frozen 영화 포스터가 10개가 출력된다!
;(async function getMovies(page = 1) {
const res = await fetch(
`https://omdbapi.com/?apikey=7035c60c&s=frozen&page=${page}`
);
const { Search: movies } = await res.json();
return movies;
}
for (const movie of movies) {
const el = document.createElement("div");
const titleEl = document.createElement("div");
titleEl.textContent = movie.Title;
const imgEl = document.createElement("img");
imgEl.src = movie.Poster;
el.append(imgEl, titleEl);
document.body.append(el);
})()
http 환경에서 http / https 서버로 전송하는 것은 가능
https 환경에서 http/https 서버로 전공하는 것은 불가능 (보안이슈)
따라서 데이터를 요청할 때 http 가 아닌 https 로 할 것
