프로젝트 목적
알바 출근시간을 계산하기 위해 제작한 웹에 필요한 추가 기능으로 개발을 시작했다. 일별 박스오피스 정보를 미리 알면 매니저들이 스케줄을 작성할 때 편리함을 제공할 것이라생각했다.
개발은 React 환경에서 진행했습니다.
github: https://github.com/Hyun198/PartTime/blob/master/src/Movie/Movie.jsx
영화 진흥위원회 API
https://www.kobis.or.kr/kobisopenapi/homepg/apiservice/searchServiceInfo.do
영화진흥위원회에서 제공하는 openAPI로 주말/주간 박스 오피스 정보를 제공 중입니다.
API를 사용하기 전에는 항상 API 공식 문서를 읽어보는 것이 중요하다.
이유는 밑에서 서술
이번 프로젝트에서는 REST방식을 이용했습니다.
fetch(url)을 통해 데이터 GET
const response = fetch(const url = `http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=${api_key}&weekGb=0&targetDt=${targetDt}`;
const data = response.json()
console.log(data) // !데이터를 잘 받아오는지 확인
const BoxOfficeList = data.boxOfficeResult.weeklyBoxOfficeList;
//박스오피스 데이터를 변수에 저장
)json 결과 화면
하지만 웹 페이지에 보여줄 포스터 정보가 결과 정보에 없음. // 이 경험으로 API문서는 꼭 꼼꼼히 읽어봐야 시간 낭비를 줄일 수 있다는 것을 깨달았습니다,,,
문제를 해결하기 위해 구글링을 해본 결과, 영화 포스터는 해당 movieCd 또는 movieNm의 값을 이용해 하나의 api를 더 이용해야 가능하다는 것을 알아냈습니다.
한국영화데이터베이스
영화 상세정보 API사용
api를 사용하기 전 출력 값에 원하는 poster 정보가 담겨져 있는지 확인
- fetch()를 통해 url 요청 및 필요한 포스터 정보 불러오기
const url = `http://api.koreafilm.or.kr/openapi-data2/wisenut/search_api/search_json2.jsp?collection=kmdb_new2&detail=Y&listCount=30&query=${title}&releaseDts=${openDt}&ServiceKey=${KMDB_API_KEY}`
const response = fetch(url)
const data = response.json();
console.log(data); //!데이터 확인
const poster = data.Data[0].Result[0].posters; //!data안에 poster_url이 저장되어 있는 부분을 poster변수에 저장
const posterURLs = poster.split('|'); // 포스터 정보를 들여다보면 | 기호로 여러개가 붙어 있는것을 split()함수를 이용해 분리
또 하나의 문제 발생
포스터 데이터를 성공적으로 불러오는 듯 했으나 정확하지 않은 정보를 불러오는 것을 확인
생각해낸 해결 방법
api를 요청할때 releaseDts인자를 활용해서 개봉일 기준으로 나열해 가장 최근 영화 포스터를 불러오기
결과
박스오피스 정보와 포스터 정보를 불러오는게 가능
소스코드: https://github.com/Hyun198/PartTime/blob/master/src/Movie/Movie.jsx
