220808.code

JS

const API_KEY = `**************`;
const url = `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json`;
const $movieList = document.querySelector(".movieList");
let date = new Date();
let year = date.getFullYear();
let month = String(date.getMonth() + 1).padStart(2, "0");
// getMonth 는 0월부터 계산하기 때문에 +1
let day = String(date.getDate() - 1).padStart(2, "0");
// API 가 몇시 기준인지는 모르겠는데 당장 오늘 집계는 해주지 않는 것으로 보임
let today = `${year}${month}${day}`;

const todayMovies = `${url}?key=${API_KEY}&targetDt=${today}`;
console.log(todayMovies);
fetch(todayMovies)
  .then((res) => res.json()) // json() <- '()' 이거 꼭 빼먹지 말고 잊지말고 9ㅅ9
  .then((data) => {
    console.log(data.boxOfficeResult.dailyBoxOfficeList);
    const dailyBoxOfficeList = data.boxOfficeResult.dailyBoxOfficeList;
    dailyBoxOfficeList.forEach((e) => {
      const movieNm = e.movieNm;
      const oldAndNew = e.rankOldAndNew;
      const templit = `
      <li class="list-group-item d-flex justify-content-between align-items-start">
      <div class="ms-2 me-auto">
        <div class="fw-bold">${movieNm}</div>
      </div>
      <span class="badge bg-primary rounded-pill">${oldAndNew}</span>
    </li>`;
      $movieList.insertAdjacentHTML("beforeEnd", templit);
    });
  });

결과

설명

부트스트랩 UI 를 사용한 아주 간단한 작일 영화 순위표

API 는 영화진흥위원회(kobis) API 를 가져다 썼다
API에 익숙해지기 위한 간단한 프로젝트
API KEY 는 보안이나 개인정보유출 때문에 아무데나 올리지 말라고 배웠다 🧐

과거에 Weather API 로 fetch 받아서 날씨 데이터를 읽어오는 Todo-list를
만든적이 있어서 그런지 익숙했다
네이버영화 API 를 쓰면 사진이나 링크같은 결과도 받아올 수 있기때문에
사진으로 캐러샐을 만든다거나 순위리스트의 영화를 클릭하면
숨겨뒀던 소개이미지를 볼 수 있는 UI 를 만들 수도 있었겠지만
kobis는 사진을 출력값으로 주지 않고 시간관계상 순위표만 만들기로 했다

getMonth() 로 받아온 월수는 한자릿수로 출력되기에
날짜를 입력하는 디폴트 양식인 yyyymmdd 에 조금 맞지않아서
String(date.getMonth() + 1).padStart(2, "0")
이런식으로 padStart 메소드를 사용해 두자릿수로 맞추어줬다

계산된 날짜와 url로 fetch 후 받아 온 자료만큼 insertAdjacentHTML 메소드로
html 에 그려주는 아주 간단한 기능이다

총평

영화보고싶다 🥲