날짜별 영화 순위 (영화진흥위원회 OPEN API)

https://www.kobis.or.kr/kobisopenapi/homepg/apiservice/searchServiceInfo.do

영화진흥위원회 오픈API

 

 

수업시간에 오픈 api를 활용해 데이터를 얻어오는 방법에 대해 배웠다.

이를 응용해 날짜를 선택하면 해당 날짜의 영화 순위를 가져오는 서비스를 만들어 보았다.

 

<!-- HTML 코드 -->

<div class="row form-header">
    <input type="date" class="date"> <!-- 날짜 선택 폼 -->
    <button onclick="getMovie()" >영화정보 가져오기</button> <!-- 제출버튼 -->
</div>
<div id="movieDataDiv" class="row form-body"></div> <!-- 가져온 정보가 들어갈 div -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
// ajax로 JSON 데이터를 처리하기 위해 jQuery 라이브러리를 임포트 해준다.

    <script>
        const Key = "키값";
        let getDt = ""; // 입력받을 날짜
        let requestUrl = "";

        // 날짜 가져오는 함수
        function getDate(){
            getDt = $(".date").val()
            getDt = getDt.replaceAll("-", "")
        }
        
        // 해당 날짜 영화 가져오는 함수
        function getMovie() {
            getDate(); // 날짜 가져오기
            requestUrl = `http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${Key}&targetDt=${getDt}`;
            $.getJSON(requestUrl, (data) => { 
            let str = "<table class='table table-hover'>" 
            $(data).each(
                    function() {
                        for(var i = 0 ; i < this.boxOfficeResult.dailyBoxOfficeList.length; i++){
                            str += "<tr class='p-2'><td class='text-end'>"+(i+1) + "위</td><td>" + this.boxOfficeResult.dailyBoxOfficeList[i].movieNm + "</td></tr>";
                        }
                    });
            str += "</table>"
                $("#movieDataDiv").html(str);
            })
        };
                
                
        
    </script>

 

포스트 상단에 링크해둔 '영화진흥위원회 오픈API' 에 들어가면 하단에 다음과 같은 url이 있다.

해당 주소는 key와 targetDt 데이터를 받고 있는데, 간단하게 설명하자면

key란 사용자가 해당 데이터에 접근할 수 있는지 확인하는 값이라고 할 수 있고,

targetDt는 원하는 데이터를 얻기 위해 서버에 넘기는 데이터(날짜)다. 

보통 공공 API 의 경우 해당 사이트에 가입해서 개개인이 key를 발급받아 사용하지만,

일별 박스오피스 API 의 경우 공개되어있어 그대로 사용할 수 있다.

 

1. 먼저 url에서 key와 targetDt를 분리해서 저장해준다.

const Key = "f5eef3421c602c6cb7ea224104795888"; // 키값(상수)
let getDt = ""; // 입력받을 날짜
let requestUrl = "";

 

- key값의 고정된 값(상수)이기 때문에 const로 선언하였고, targetDt의 경우 날짜를 선택함에 따라 바뀌므로 let으로 선언하였다. 

- getMovie() 함수 내부에서 key와 targetDt를 조합해 url을 완성시킬 것이므로 전역변수로 requestUrl을 선언한다.

 

2. 선택된 날짜를 가져오는 함수 선언

// 날짜를 가져와서 가공하는 함수

function getDate(){
    getDt = $(".date").val()
    getDt = getDt.replaceAll("-", "")
}

 

- $(".date").val()을 사용해 선택된 날짜의 값을 가져온다. 

- 가져온 날짜는 하이픈(-)으로 구분되어 있는데, url에서 요구하는 형식으로 바꿔주기 위해 replaceAll()을 통해 하이픈을 전부 지워준다.

 

3. 해당 날짜의 영화 순위 가져오는 함수 선언

 function getMovie() {
            getDate(); // 날짜 가져오기
            requestUrl = `http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${Key}&targetDt=${getDt}`;
            $.getJSON(requestUrl, (data) => { 
            let str = "<table class='table table-hover'>" 
            $(data).each(
                    function() {
                        for(var i = 0 ; i < this.boxOfficeResult.dailyBoxOfficeList.length; i++){
                            str += "<tr class='p-2'><td class='text-end'>"+(i+1) + "위</td><td>" + this.boxOfficeResult.dailyBoxOfficeList[i].movieNm + "</td></tr>";
                        }
                    });
            str += "</table>"
                $("#movieDataDiv").html(str);
            })
        };

- 앞서 선언한 getDate() 함수를 호출하여 url을 완성시킨다. 

- $.getJSON을 통해 해당하는 데이터를 가져오고, 반복문을 사용해 가져온 데이터를 가공한다.

- 가공된 데이터를 $("#movieDataDiv") 내부에 넣어 화면에 뿌려준다.

 

이렇게 영진위API를 이용해 서비스를 만들어 보았다. 

추가사항

 

- 닫기버튼 추가

- 부트스트랩 추가

- onclick() 이벤트를 걸어 클릭 시 해당영화 네이버 검색 창으로 이동

- 깃허브 업로드(호스팅기능 사용)

- iframe 태그를 사용해 해당 페이지 포스트 상단에 게시

> iframe 적용시 네이버에서 접근을 거부하는 문제 발생

> 페이지 이동이 아닌 새로운 창을 띄우는 것으로 수정