class 12 : API 활용

yoneeki·2023년 1월 27일
training-jp
0

training-jp

목록 보기
9/31

API 활용하기

활용 예시

  • 카카오 API, 공공자료 API, TMDB 등

POSTMAN

  • REST 통신 시 JSON 데이터에 대한 정보를 볼 수 있게 도와주는 어플리케이션

TMDB

HTML

<!DOCTYPE html>
<html lang="en">
  <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" />
    <meta
      http-equiv="Content-Security-Policy"
      content="upgrade-insecure-requests"
    />

    <title>Document</title>

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
    />
    <!-- google 웹폰트 -->
    <link
      rel="stylesheet"
      as="style"
      crossorigin
      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css"
    />

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"
    />
    <link rel="stylesheet" href="./css/layout.css" />
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
    <script src="./js/gsap/gsap.min.js"></script>
    <script src="./js/search.js" defer></script>
  </head>
  <body>
    <header>
      <h1>MOVIE <strong>SEARCH</strong></h1>
    </header>
    <!-- prettier-ignore -->
    <div class="search-box">
      <input type="text" class="search-txt" /> 
      <button class="btn-search"><span class="material-icons"> search </span></button>
    </div>
    <ul class="recent-search-word">
    </ul>
    <ul class="list"></ul>
    <button class="btn-more">더보기</button>

    <!--독립적인, 팝업 같은 것을 aside 태그를 사용-->
    <aside class="movie-detail"></aside>
  </body>
</html>

JS

// 클라이언트  front
const list = document.querySelector(".list");
const btnMore = document.querySelector(".btn-more");
const movieDetail = document.querySelector(".movie-detail");
const searchTxt = document.querySelector(".search-txt");

const API_KEY = `사이트에서 발급받은 API KEY`;

let pageNum = 1; 
loadMovie(pageNum);

searchTxt.addEventListener("keyup", (e) => {
  if (e.keyCode === 13) {
    const txt = searchTxt.value;
    const myFetch = fetch(
      `https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&language=ko&page=1&include_adult=false&query=${txt}`
    );

    myFetch
      .then((response) => {
        console.log("검색 잘 됨");
        return response.json();
      })
      .then((result) => {
        console.log(result);
        list.innerHTML = "";
        makeList(result);
        // li추가된후 코드.....
        gsap.from(".list li", { scale: 0, stagger: 0.02 });
        const movieItems = document.querySelectorAll(".list li");
        movieItems.forEach((item, idx) => {
          item.addEventListener("click", () => {
            //alert(item.dataset.id);
            const movieID = item.dataset.id;
            const movieFetch = fetch(
              `https://api.themoviedb.org/3/movie/${movieID}?api_key=${API_KEY}&language=ko-KR`
            );
            movieFetch
              .then((response) => {
                console.log("영화 movieID 상세정보 잘 받았음 : " + movieID);
                return response.json();
              })
              .then((result) => {
                console.log(result);
                movieDetail.classList.add("on");
                document.body.classList.add("off");
                gsap.fromTo(
                  ".movie-detail",
                  { y: "100%" },
                  { y: 0, duration: 1, ease: "power4" }
                );
                let txtGenres = "";
                result.genres.forEach((item, idx) => {
                  txtGenres += item.name + " / ";
                });
                movieDetail.innerHTML = `
              <div class="img-box"><img src="https://image.tmdb.org/t/p/original${result.backdrop_path}" alt="alt" /></div>
              <div class="contents-box">
                <h2 class="title">${result.title}</h2>
                <p>${result.original_title}</p>
                <p>${txtGenres}</p>
                <p>${result.homepage}</p>
                <p>${result.release_date}</p>
                <p>${result.popularity}</p>
                <p>${result.runtime}</p>
                <p class="overview">${result.overview}</p>
              </div>
              <button class="movieDetailEnd"><span class="material-symbols-outlined md-36">
              close
              </span></button>
              `;
                const movieDetailEnd =
                  document.querySelector(".movieDetailEnd");

                movieDetailEnd.addEventListener("click", () => {
                  //console.log("ㅋ_ㅋ");
                  movieDetail.classList.remove("on");
                  document.body.classList.remove("off");
                  gsap.toFrom(
                    ".movie-detail",
                    { y: "100%" },
                    { y: 0, duration: 1, ease: "power4" }
                  );
                });
              })
              .catch((err) => {
                console.log(err.message);
              });
          });
        });
      })
      .catch(() => {
        console.log("문제발생");
      });
  }
});
btnMore.addEventListener("click", function () {
  pageNum++;
  loadMovie(pageNum);
});

function loadMovie(pageNum = 1) {
  const myFetch = fetch(
    `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}&language=ko-KR&page=${pageNum}`
  );
  myFetch
    .then(function (response) {
      //console.log("약속 잘 이행되었음");
      console.log(response);
      return response.json();
    })
    .then(function (result) {
      console.log("json으로 변환 완료 되었음");
      //여기에 내가 필요한 코드 넣는 곳
      console.log(result.results);
      makeList(result);
      //li추가된후 코드.....
      gsap.from(".list li", { scale: 0, stagger: 0.02 });
      const movieItems = document.querySelectorAll(".list li");
      movieItems.forEach((item, idx) => {
        item.addEventListener("click", () => {
          //alert(item.dataset.id);
          const movieID = item.dataset.id;
          const movieFetch = fetch(
            `https://api.themoviedb.org/3/movie/${movieID}?api_key=${API_KEY}&language=ko-KR`
          );
          movieFetch
            .then((response) => {
              console.log("영화 movieID 상세정보 잘 받았음 : " + movieID);
              return response.json();
            })
            .then((result) => {
              console.log(result);
              movieDetail.classList.add("on");
              document.body.classList.add("off");
              gsap.fromTo(
                ".movie-detail",
                { y: "100%" },
                { y: 0, duration: 1, ease: "power4" }
              );
              let txtGenres = "";
              result.genres.forEach((item, idx) => {
                txtGenres += item.name + " / ";
              });
              movieDetail.innerHTML = `
              <div class="img-box"><img src="https://image.tmdb.org/t/p/original${result.backdrop_path}" alt="alt" /></div>
              <div class="contents-box">
                <h2 class="title">${result.title}</h2>
                <p>${result.original_title}</p>
                <p>${txtGenres}</p>
                <p>${result.homepage}</p>
                <p>${result.release_date}</p>
                <p>${result.popularity}</p>
                <p>${result.runtime}</p>
                <p class="overview">${result.overview}</p>
              </div>
              <button class="movieDetailEnd"><span class="material-symbols-outlined md-36">
              close
              </span></button>
              `;
              const movieDetailEnd = document.querySelector(".movieDetailEnd");

              movieDetailEnd.addEventListener("click", () => {
                //console.log("ㅋ_ㅋ");
                movieDetail.classList.remove("on");
                document.body.classList.remove("off");
                gsap.toFrom(
                  ".movie-detail",
                  { y: "100%" },
                  { y: 0, duration: 1, ease: "power4" }
                );
              });
            })
            .catch((err) => {
              console.log(err.message);
            });
        });
      });
    })
    .catch(function () {
      console.log("약속이 거절되었음");
    });
}

function makeList(result) {
  result.results.forEach(function (item, idx) {
    list.innerHTML =
      list.innerHTML +
      `<li data-id="${item.id}">
    <div class="img-box"><img src="https://image.tmdb.org/t/p/original${item.poster_path}"></div>
    <div class="contents-box">
      <h2>${item.title}</h2>
      <p>${item.original_title}</p>
      <p>${item.release_date}</p>
      <p class="overview">${item.overview}</p>
    </div>
  </li>`;
  });
}

카카오 검색 API

Local Storage

  • 컴퓨터를 종료해도 자료가 그대로 남아있게 (ex. 기존의 검색어)
  • setItem, getItem

const recentSearchWordArray =
  JSON.parse(localStorage.getItem("recentSearchWord")) ?? [];
console.log(recentSearchWordArray);
if (recentSearchWordArray !== null) {
  recentSearchWordArray.forEach(function (item, idx) {
    recentSearchWord.innerHTML += `<li>${item}</li>`;
  });

  const recentSearchWordItem = document.querySelectorAll("li");
  recentSearchWordItem.forEach((item, idx) => {
    item.addEventListener("click", () => {
      const txt = item.textContent;
      searchImg(txt);
    });
  });
}

코드 예

fetch 함수와 then, catch를 이용하여 json 데이터를 받아온다.

searchTxt.addEventListener("keyup", (e) => {
  if (e.keyCode === 13) {
    const txt = searchTxt.value;
    const myFetch = fetch(
      `https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&language=ko&page=1&include_adult=false&query=${txt}`
    );

    myFetch
      .then((response) => {
        console.log("검색 잘 됨");
        return response.json();
      })
      .then((result) => {
        console.log(result);
        list.innerHTML = "";
        result.results.forEach(function (item, idx) {
          list.innerHTML =
            list.innerHTML +
            `<li data-id="${item.id}">
          <div class="img-box"><img src="https://image.tmdb.org/t/p/original${item.poster_path}"></div>
          <div class="contents-box">
            <h2>${item.title}</h2>
            <p>${item.original_title}</p>
            <p>${item.release_date}</p>
            <p class="overview">${item.overview}</p>
          </div>
        </li>`;
        });

        gsap.from(".list li", { scale: 0, stagger: 0.02 });
        const movieItems = document.querySelectorAll(".list li");
        movieItems.forEach((item, idx) => {
          item.addEventListener("click", () => {
            //alert(item.dataset.id);
            const movieID = item.dataset.id;
            const movieFetch = fetch(
              `https://api.themoviedb.org/3/movie/${movieID}?api_key=${API_KEY}&language=ko-KR`
            );
            movieFetch
              .then((response) => {
                console.log("영화 movieID 상세정보 잘 받았음 : " + movieID);
                return response.json();
              })
              .then((result) => {
                console.log(result);
                movieDetail.classList.add("on");
                document.body.classList.add("off");
                gsap.fromTo(
                  ".movie-detail",
                  { y: "100%" },
                  { y: 0, duration: 1, ease: "power4" }
                );
                let txtGenres = "";
                result.genres.forEach((item, idx) => {
                  txtGenres += item.name + " / ";
                });
                movieDetail.innerHTML = `
              <div class="img-box"><img src="https://image.tmdb.org/t/p/original${result.backdrop_path}" alt="alt" /></div>
              <div class="contents-box">
                <h2 class="title">${result.title}</h2>
                <p>${result.original_title}</p>
                <p>${txtGenres}</p>
                <p>${result.homepage}</p>
                <p>${result.release_date}</p>
                <p>${result.popularity}</p>
                <p>${result.runtime}</p>
                <p class="overview">${result.overview}</p>
              </div>
              <button class="movieDetailEnd"><span class="material-symbols-outlined md-36">
              close
              </span></button>
              `;
                const movieDetailEnd =
                  document.querySelector(".movieDetailEnd");

                movieDetailEnd.addEventListener("click", () => {
                  //console.log("ㅋ_ㅋ");
                  movieDetail.classList.remove("on");
                  document.body.classList.remove("off");
                  gsap.toFrom(
                    ".movie-detail",
                    { y: "100%" },
                    { y: 0, duration: 1, ease: "power4" }
                  );
                });
              })
              .catch((err) => {
                console.log(err.message);
              });
          });
        });
      })
      .catch(() => {
        console.log("문제발생");
      });
  }
});

기타

chart js 활용하기

const myFetch = fetch(
  `http://apis.data.go.kr/1352000/ODMS_COVID_04/callCovid04Api?serviceKey=${API_KEY}&pageNo=1&numOfRows=100&apiType=JSON&std_day=2023-01-26`
);
myFetch
  .then(function (response) {
    return response.json();
  })
  .then(function (result) {
    console.log(result.items);
    const cities = [];
    const datas = [];
    result.items.forEach(function (item, idx) {
      cities.push(item.gubun);
      datas.push(item.incDec);
    });

    const ctx = document.querySelector("#myChart");

    new Chart(ctx, {
      type: "bar",
      data: {
        labels: cities.sort(),
        //labels: datas.sort(),
        datasets: [
          {
            label: "# of Votes",
            data: datas,
            borderWidth: 1,
          },
        ],
      },
      options: {
        scales: {
          y: {
            beginAtZero: true,
          },
        },
      },
    });
  })
  .catch(function () {
    console.log("안왔음");
  });

뷰에 드러내지 않고 자료 보내기

  • 태그 안에 data 넣기

fancy apps

profile
yoneeki
Working Abroad ...
이전 포스트

class 10-11 : CSS / Node Express

다음 포스트

class 13 : 자바스크립트 활용

0개의 댓글