JavaScript/JavaScript

JS 자세히 알아보기 (영화 포스터 출력하기)

IT Blue 2021. 6. 9. 02:46

 

Query String

 

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

 

Axios

 

브라우저 및 node.js 용 Promise API를 활용하는 HTTP 비동기 통신 라이브러리

 

영화 포스터 출력하기

 

<!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>
</head>
<body>
  <h1>Hello World!</h1>
  <img src="" alt="" width="200">
</body>
</html>

 

import axios from 'axios'

// omdbapi 활용
function fetchMovies() {
   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
         imgEl.src = res.data.Search[0].Poster
      })
}

fetchMovies()

 

참조

 

https://github.com/axios/axios

 

axios/axios

Promise based HTTP client for the browser and node.js - axios/axios

github.com