[JS] 오픈 api 활용하기

📌 주소 입력 형태

주소?속성=값&속성=값&속성=값

 

예시)

https://www.~~.com?apikey=키이름&s='Froxen'

 

📌 요청을 처리해줄 JS패키지 :  axios 

 

1단계) 설치

npm i axios

2단계) 개발 상태 열기

npm run dev

 

3-1단계) 예시. 영화 불러와주는 api

import axios from 'axios'

function Test() {
  axios
    .get('https://www.omdbapi.com/?apikey=~~&s=frozen')
    .then((response)=>{
      console.log(response) //frozen이라는 이름에 해당하는 정보들을 불러옴
    })
}

 

3-2단계) 예시. 영화 포스터 이미지 추가하기

 

html

<h1> </h1>
<img src="" alt="" width="400">

 

js

import axios from 'axios'

function Test() {
  axios
    .get('https://www.omdbapi.com/?apikey=~~&s=frozen')
    .then(response=>{
      console.log(response) //frozen이라는 이름에 해당하는 정보들을 불러옴
      const h1El = document.querySelector('h1')
      const imgEl = document.querySelector('img')
      h1E1.textContent = response.data.Search[0].Title //response 콘솔로그한거 찾아보면 나옴
      imgEl.src = res.data.Search[0].Poster
    })
}

결과: Frozen이라는 영화 제목과 영화 포스터가 화면에 출력됨.