190404 TIL 프로젝트 - 레이아웃 수정 및 Movie Database API

Apr 4, 2019 » 1막, TIL (Today I Learned)

프로젝트

레이아웃 수정

참고 사이트의 디자인을 참고하여 레이아웃을 수정하고 있다.

Movie Database API

The Movie Database API를 활용하여 영화 정보를 가져오려고 한다.
새롭게 알게된 기능
- escape()
- 영화 제목을 쿼리로 넘길때 막 % 같은 걸로 변환되서 가길래, 이게 도대체 뭔가 하고 검색하다가 알게 되었다. - escape(), encodeURI(), encodeURIComponent() === 인코딩 함수
- 인코딩이란 텍스트를 전송할 때 텍스트를 ASCII 문자로 변환해주는 것을 말한다.
아마존 했을 때 연습했던 fetchAPI를 활용해서 영화 타이틀을 가져왔다.

function checkInput(e) {
  const inputValue = document.querySelector(".search-bar").value;
  if (inputValue.length > 1) {
    return fetch(`https://api.themoviedb.org/3/search/movie?query=${inputValue}&api_key={APIkey}&language=ko-KR`)
    .then(response => response.json())
    .then(json => {
      let titleArr = json.results.map(movie => movie.title);
      const searchResultBox = document.querySelector(".search-result");
      let tags = ""
      titleArr.forEach(title => {
        tags += `<li>${title}</li>`
      });

      searchResultBox.innerHTML = tags
    })
    .catch(err => console.log(err))
  }

리팩토링이 매우 필요해보임…