프로젝트 / 영화진흥위원회 오픈 API 활용 웹
제이쿼리(jQuery) 및 영화진흥위원회 오픈API를 이용한 일별 박스오피스, 영화사 목록, 영화인 목록 제공 웹 서비스
Explore the Github »
View Demo
·
Review Video
·
Report Bug
·
Request Feature
'영화진흥위원회 오픈 API 활용 제이쿼리 과제'는 2020년 컴퓨터정보과 2학년 1학기 제이쿼리 강의 수행 목적으로 제작/개발한 프로젝트입니다.
static/js/serviceKey.js
생성const serviceKey = "{영화진흥위원회 OpenAPI 인증키}";
작성<!-- loading 현황 출력 Element -->
<div id="loading"><img src="static/images/loading.svg"><span></span></div>
/* 로딩에 따른 로딩 현황 업데이트 */
$('#loading > span').text((++cnt) + '/' + '10');
$('#app > #loading').css({display: 'flex'});
/* ajax 파싱 완료 후 로딩 현황 초기화 */
$('#loading > span').empty();
$('#app > #loading').css({display: 'none'});
$.when
메소드를 활용하였다.$.when
메소드는 전달 인자로 받은 ajax 결과가 모두 true(성공적 종료)될 때까지 대기하는 메소드이다. 모든 ajax가 종료되면 랭킹 순서에 맞게 movieItem을 추가한다.const movieItemArray = new Array(10);
const deferreds = new Array(10);
/* .. something .. */
$.when.apply(this, deferreds).done(() => {
$('#loading > span').empty();
movieItemArray.forEach((item, idx) => {
$('.movieItems').append(item);
});
// last-callback
if (callback) callback();
});
const jqxhr = $.ajax({
url: 'http://ync.jupiterflow.com/jquery/searchMovieInfo' +
`?key=${serviceKey}` +
`&movieCd=${movieCd}`,
type: 'get',
dataType: 'xml'
}).then((data) => {
const renderData = {
movieCd: movieCd,
movieNm: $(data).find('movieNm').text(),
movieNmEn: $(data).find('movieNmEn').text(),
showTm: $(data).find('showTm').text(),
openDt: $(data).find('openDt').text().replace(/(\d{4})(\d{2})(\d{2})/g, '$1년 $2월 $3일'),
nations: [],
genres: [],
directors: [],
imgsrc: $(data).find('imgSrc').text(),
naverMovieSrc: $(data).find('naverMovieSrc').text()
};
/* .. something .. */
// Mustache 탬플릿을 이용해 HTML 렌더링한 결과를 영화 목록 배열에 순위에 맞게끔 저장
movieItemArray[idx] = Mustache.render(movieItem, renderData);
});
/* .. something .. */
$.when.apply(this, deferreds).done(() => {
/* .. */
// 영화 목록 배열(movieArray)을 바탕으로 순차적으로 append(출력)
movieItemArray.forEach((item, idx) => {
$('.movieItems').append(item);
});
/* .. */
});
This repository is not managed.
Distributed under the MIT License. See LICENSE
for more information.
JIN TAEYANG - keriel@jupiterflow.com
Project Link: https://jupiterflow.com/project/6