영화진흥위원회 오픈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에서 표형식으로 출력해봤다.
'Front-end > javascript' 카테고리의 다른 글
| js의 변수 선언 방법(var, let, const)와 var, let의 차이 | 호이스팅|TDZ (1) | 2024.01.03 |
|---|