[kobis-movie-app] 영화진흥위원회 오픈 API 활용 제이쿼리 과제

제이쿼리(jQuery) 및 영화진흥위원회 오픈API를 이용한 일별 박스오피스, 영화사 목록, 영화인 목록 제공 웹 서비스
Explore the Github »

View Demo · Review Video · Report Bug · Request Feature

Table of Contents

• About the Project
  • Usage
  • Summary
  • Main Features
  • Built With
  • Code Review
• Contributing
• License
• Contact
• Acknowledgements

About The Project

'영화진흥위원회 오픈 API 활용 제이쿼리 과제'는 2020년 컴퓨터정보과 2학년 1학기 제이쿼리 강의 수행 목적으로 제작/개발한 프로젝트입니다.

Usage

1. static/js/serviceKey.js 생성
2. 해당 파일에 const serviceKey = "{영화진흥위원회 OpenAPI 인증키}"; 작성

Summary

• 반응형 웹 뷰(모바일, 타블렛, PC 3구간으로 나누어 지원)
• 사용한 API(XML) - 총 4개
  1. 일별 박스오피스
  2. 영화 상세정보
  3. 영화사 목록
  4. 영화인 목록

Main Features

• 일별 박스오피스 랭킹 조회
  • 영화진흥위원회 일별 박스오피스 API 이용
  • 날짜 지정 가능, 기본적으로 가장 최신 데이터를 조회
  • 좌측->우측, 상단->하단으로 1위~10위 포스터 출력
  • 포스트 클릭 시 제목, 상영시간, 장르 등 기본적인 정보 조회
  • 네이버 영화 바로가기 기능 지원
• 영화사 목록 조회
  • 영화진흥위원회 영화사 목록 API 이용
  • 반환되는 목록 중 1페이지~5페이지(50개)를 테이블로 출력
• 영화인 목록 조회
  • 영화진흥위원회 영화인 목록 API 이용
  • 반환되는 목록 중 1페이지~5페이지(50개)를 테이블로 출력

Code Review

• 공통

  1. ajax 진행 상황에 따른 로딩 아이콘 및 현황 출력

      <!-- 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'});

  2. ajax가 비동기이기 때문에 발생하는 문제 해결 박스오피스 랭킹을 가져온 후 각 박스오피스의 세부정보를 가져올 경우 비동기적으로 작동하기때문에 작업이 끝나는 시간이 다르다. 이로 인해 랭킹 순서대로 값을 저장할 수 없는 문제점이 있다. 해당 문제를 해결하기 위해 jQuery의 $.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();
      });

• index.js

  1. Custom API를 이용한 영화세부정보 파싱 영화진흥위원회 API에서 imgsrc(포스터 이미지 주소), naverMovieSrc(네이버영화 바로가기 링크)가 추가됨.

      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);
         });
         /* .. */
      });

Built With

• jQuery
• KOBIS OpenAPI
• Express.js
  • with CustomAPI: 기존 영화상세정보 API에서 영화 포스터, 네이버 영화 페이지 바로가기 엘리먼트 추가
  • URI: http://ync.jupiterflow.com/jquery/searchMovieInfo
  • queryString: key(KOBIS OpenAPI 인증키), movieCd(영화코드)
  • Return: 영화 상세정보 API와 동일
  • 응답 예시: 바로가기

Contributing

This repository is not managed.

License

Distributed under the MIT License. See LICENSE for more information.

Contact

JIN TAEYANG - keriel@jupiterflow.com

Project Link: https://jupiterflow.com/project/6

Acknowledgements

• mustache.js