오픈 api 가져와서 사용하는 방법 | 영화진흥원 영화 api 가져와서 영화 정보 조회하기
영화진흥위원회 오픈API
제공서비스 영화관입장권통합전산망이 제공하는 오픈API서비스 모음입니다. 사용 가능한 서비스를 확인하고 서비스별 인터페이스 정보를 조회합니다.
www.kobis.or.kr
영화진흥원에서 제공하는 일별 박스오피스 api를 사용해보았다.
들어가보면 다음과같이 응답 예시를 볼 수 있다.
이걸 복사해준다 !
요청 인터페이스 목록을 볼 수 있다. 필수라고 적힌 부분은 꼭 들어가야하는 변수이다!
회원가입을 하면 본인 고유 key 값을 받을 수 있는데, key="고유키값" 을 넣어주면 된다.
구현하고자하는 페이지:
👉 사용자가 날짜를 입력하면, 해당 날짜에서 1위부터 10위까지의 랭크된 영화들을 차례대로 보여주고, 관객수나 개봉일과 같은 추가적인 데이터도 함께 보여주기!
인터페이스 항목의 응답 구조를 참고해서 필요한 필드를 써주면 된다 ~
내가 쓰고자하는 필드는 아래와 같다 !
- 영화명(국문)을 출력합니다. -> movieNm
- 해당일자의 박스오피스 순위를 출력합니다. -> rank
- 해당일의 관객수를 출력합니다. -> audiCnt
- 영화의 개봉일을 출력합니다. -> openDt
movieSearch.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Office Data</title>
<style>
#moviename:hover {
cursor: pointer;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>영화 정보 조회</h1>
<div>
<label for="dateInput">조회 날짜 (yyyymmdd): </label>
<input type="text" id="dateInput">
<button onclick="fetchMovieData()">조회</button>
<button onclick="recentfetchMovieData()">가장최근날짜로조회</button>
</div>
<div id="movieInfo"></div>
<script src="./movieSerch.js"></script>
</body>
</html>async function fetchMovieData() {
const dateInput = document.getElementById('dateInput').value;
const url =
`https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=${dateInput}`;
try {
const response = await fetch(url);
const data = await response.json();
const movieList = data.boxOfficeResult.dailyBoxOfficeList;
const movieInfoDiv = document.getElementById('movieInfo');
if (movieList && movieList.length > 0) {
const htmlTable = generateHtmlTable(movieList);
movieInfoDiv.innerHTML = htmlTable;
} else {
movieInfoDiv.innerHTML = '해당 날짜의 영화 정보가 없습니다.';
}
} catch (error) {
console.error(error);
}
}
async function recentfetchMovieData() {
const today = new Date();
const yesterday = new Date(today);
yesterday.setDate(today.getDate() - 1);
const formattedDate = yesterday.toISOString().split('T')[0].replace(/-/g, '');
document.getElementById('dateInput').value = formattedDate;
fetchMovieData();
}
function generateHtmlTable(movieList) {
let htmlTable = '<table border="1"><tr><th>순위</th><th>영화 제목</th><th>관객 수</th><th>개봉일</th></tr>';
movieList.forEach(movie => {
htmlTable += `<tr onclick="showMovieDetails('${movie.movieNm}')">
<td>${movie.rank}</td>
<td id=moviename>${movie.movieNm}</td>
<td>${movie.audiCnt}</td>
<td>${movie.openDt}</td>
</tr>`;
});
htmlTable += '</table>';
return htmlTable;
}
function showMovieDetails(movieName) {
window.location.href = `detail.html?movie=${encodeURIComponent(movieName)}`;
}
사용자가 입력한 날짜에 따라 보여주는 데이터가 바뀌어야하기때문에 targetDt를 input입력창에 입력한 값으로 설정해주는 작업이 필요하다. 그래서 targetDt=${입력값} 이 되어야한다.
그리고 나는 조회기능뿐만 아니라, 최근날짜로 조회기능을 추가적으로 넣었다. ( recentfetchMovieData() )
최근날짜 조회기능은 Date() 함수를 사용해 현재 날짜를 뽑아내고, -1을 해서 어제날짜로 만들어주었다. 형식이 yyyymmdd 형식이어야하기때문에 형식변환 코드도 넣어주었다.
실제로 " http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20120101" 에 들어가서 맨끝 날짜를 오늘 날짜로 바꿔보면 데이터 가 없는 것을 확인할 수 있다. 오늘 날짜로는 조회가 안되고, 가장 최근 날짜로 조회할 수 있는게 어제날짜이다. 그래서 하루를 빼주는 작업이 필요하다.
기능적인 구현만 해보려고 했던 거기 때문에 따로 스타일링은 넣지 않았고, 보기 편하게 html에서 표형식으로 출력해봤다.