영화 정보

영화 데이터를 가져와서 redux 및 DB에 저장한다.
데이터 제공은 오픈 API를 사용함.

KMDb : https://www.kmdb.or.kr/info/api/apiDetail/6

영화 진흥 위원회 : https://www.kobis.or.kr/kobisopenapi/homepg/apiservice/searchServiceInfo.do?serviceId=searchDailyBoxOffice

세부 기능 정리

• 영화 리스트를 데이터 패칭
  • 박스 오피스 영화
  • 최근 개봉한 영화
• 제목을 클릭하면 팝업창으로 상세 정보 조회

고민

1. API가 없다니..!

데이터 가져오는건 금방 하지!
자신만만하게 시작했는데 예상못한 난관이 생겼다. 내가 필요한 정보를 제공하는 API가 없다는 것… OMG
나는 영화 줄거리와 포스터가 포함된 데이터가 필요한데 공공데이터포털이나 네이버에서도 해당 정보를 제공하는 API가 없었다. 이전에 해외 영화 API를 사용했을 때는 영화 제목, 줄거리, 썸네일 등 다양한 정보가 모두 제공됐어서 당연히 국내 API도 비슷한 데이터를 가질 줄 알았어서 멘붕이었다.

한국 기준의 영화 리스트를 사용하고 싶어서 꼭 국내 API가 필요했는데 포기해야하나 싶은 찰나 KMDb에서 제공하는 API를 발견했다. 여긴 아는 사람도 잘 없는거 같고 자료도 많이 없어서 활용방법은 별도의 게시글로 만드려고 한다.

주의할 점은 API 설명 문서의 요청인자과 출력값 변수명이 좀 다른 경우가 있다. poster같은 경우도 문서에는 posterURL이라고 되어있는데 실제로는 posters임. 필요한 데이터는 문서의 변수명과 실제 데이터를 꼭 확인하자!

2. 박스오피스 리스트를 보여주고 싶은데

KMDb에서 제공하는 데이터는 그냥 영화 정보가 전부이다. 이렇게 API수급난에 빠질줄은 상상도 못하고 이미 메인화면에서 인기 영화들 촤르륵 멋있게 뜨는거 다 구상해놨는데 흑흑,,

아무리 생각해도 박스오피스를 포기할 수가 없어서 머리를 굴려봣다.

박스오피스 API는 영화 진흥 위원회에서 제공하는데 거긴 줄거리랑 포스터 정보가 없고... KMDb는 진짜 영화정보만 있고... 흠...

두개 섞어쓰면 되겠네!

방법은 쏘 씸플하다.
1. 일별 박스오피스 데이터를 먼저 받아와서
2. 응답데이터 중 KMDb요청인자로 써먹을 수 있을만한걸 뽑아내고
3. 뽑아낸 데이터를 KMDb 요청인자로 넣어서 영화 정보를 검색한다.

KMDb에서 박스오피스에 있는 영화와 정확히 일치하는 데이터를 꺼내와야 하므로 요청 인자를 잘 써먹는게 제일 중요했다. 두 API에 공통된 영화 코드가 있으면 좋았겠지만 그런건 없었음ㅜㅜ 나는 제목, 개봉일, 제작연도 세가지 응답 데이터를 요청 인자로 사용했다.

3. API 호출 횟수 제한

2번처럼 두 API를 섞어쓰면 내가 원하는 데이터는 가져올 수 있지만 호출 횟수 걱정을 안할수가 없었다.

KMDb의 호출 제한 횟수는 일일 1000회인데
박스오피스 목록을 들고올때 한번에 10번씩 호출하니까.. 페이지 백번만 새로고침하면 끝... 이렇게 보면 절대 많은 횟수가 아니다.

어떻게하면 호출을 덜 할수있을지 고민하다가 db를 활용해보기로 했다.

영화 목록을 가져올 때 먼저 db에 데이터가 있는지 확인하고, 없다면 api를 호출해서 데이터를 가져오고, 가져온 데이터를 db에도 저장한다. 이렇게하면 최초로 검색하는 영화가 아닌 이상 db에만 접근하게 되므로 API 호출 횟수를 많이 줄일 수 있다.

다만 최초 검색시에는 db접근과 api호출이 순차적으로 진행되므로 속도가 느려질 수 있다.

4. 최신 개봉 영화 필터링

API로 데이터를 뽑아낼 때 현재일을 기준으로 최신 개봉한 영화 데이터를 적당한 갯수만큼 가져와야했다.

처음에는 기간 검색용 API 인자 중 개봉일 시작을 의미하는 releaseDts 에 오늘 일자를 주고, listCount를 15개로 설정하는 방식으로 사용했다. 데이터가 꽤 많이 뽑아져서 하루에 이렇게 많은 영화들이 개봉하는구나! 하고 넘어갈 뻔 했는데 알고보니 개봉일이 YYYYMMDD 포맷이 아니라 YYYY 또는 YYYYMM인 데이터까지 검색되었던 것이었다. 이건 아직 개봉되지 않은 개봉 예정작들을 의미하는거라 나에겐 쓸모 없는 데이터라 검색 방법을 바꿔야했다.

두번째로 생각한 방법은 기간 검색 인자 중 개봉일 종료 인자인releaseDte만 단독으로 사용하는 거였다. 개봉일 종료 인자를 오늘로 설정하고 최신 순으로 데이터를 15개정도 뽑아내면 쉽게 해결될 것 같았다.

하지만 당연하게도 쉽게 해결 되지 않았음 ㅎ
정렬 인자 중 '최신 개봉순'정렬 방법이 없었다ㅜㅜ

결국 그냥 개봉 시작일인 releaseDts와 releaseDte를 함께 사용하되 listCount를 50개정도 뽑아서 가져오는 방법으로 진행했다. 50개정도를 뽑은 이유는 첫번째 방법에서 말한 것처럼 비정상 날짜 포맷까지 함께 검색되어버려서 그 데이터들을 걸러야했기 때문이다. 불필요한 데이터들이 은근 많아서 50개정도는 가져와야지 15~20개 정도의 리스트가 남더라.

그리고 최신 영황 데이터도 박스오피스 데이터와 마찬가지로 db에 저장해주었다. 이건 박스오피스 데이터처럼 호출 횟수를 줄이려고 한건 아니고, 영화 데이터를 차근차근 모아두면 추후에 쓸 일이 있을 것 같아서다.

아키텍처

관련 폴더구조

📦src
 ┣ 📂api
 ┃ ┗ 📜firebase.jsx 
 ┣ 📂components 
 ┃ ┣ 📜MovieCard.jsx
 ┃ ┣ 📜MovieDetailModal.jsx
 ┣ 📂pages
 ┃ ┣ 📜Home.jsx
 ┃ ┣ 📜Movies.jsx
 ┣ 📂store
 ┃ ┣ 📜movie-fetch.jsx
 ┃ ┗ 📜movie-store.jsx
 ┣ 📂util
 ┃ ┣ 📜data.jsx
 ┃ ┗ 📜date.jsx
 ┗ 📜setupProxy.js

• 상태 관리는 redux를 사용한다

라우팅

path='/' element=<Home/>

구현

firebase

// db로부터 데이터 찾기
export const searchMovies = async ({ title, releaseDate, movieCode }) => {
  const snapshot = await get(child(dbRef, "/movies"));
  if (snapshot.exists() && snapshot.val() !== null) {
    const values = Object.values(snapshot.val());

    return values.find((movie) => {
      if (movie.title === title && movie.releaseDate === releaseDate) {
        return movie;
      } else if (movie.title === title && movie.movieCode === movieCode) {
        return movie;
      } else {
        return null;
      }
    });
  } else {
    return null;
  }
};

// 데이터베이스에 저장
export const addMovie = async (movie) => {
  try {
    await set(ref(db, `/movies/${movie.id}`), movie);
  } catch (error) {
    return;
  }
};

movie-store

const { configureStore, createSlice } = require("@reduxjs/toolkit");

const moviesSlice = createSlice({
  name: "movies",
  initialState: { boxOffice: [], recent: [], myMovies: [] },
  reducers: {
    getRecentMovies: (state, action) => {
      state.recent = action.payload;
    },
    getBoxOfficeMovies: (state, action) => {
      state.boxOffice = action.payload;
    },
  },
});

export const store = configureStore({
  reducer: { movies: moviesSlice.reducer },
});

export const moviesAction = moviesSlice.actions;

movie-fetch

import axios from "axios";
import { addMovie, searchMovies } from "../api/firebase";
import { dataFormat } from "../util/data";
import { getTodayDate } from "../util/date";
import { moviesAction } from "./movie-store";

/** api 사용 */
const moviesClient = axios.create({
  baseURL: "/search_json2.jsp",
  params: {
    collection: "kmdb_new2",
    ServiceKey: process.env.REACT_APP_MOVIES_SERVICE_KEY,
    detail: "Y",
  },
});

const boxOfficeClient = axios.create({
  baseURL: "/searchDailyBoxOfficeList.json",
  params: {
    key: process.env.REACT_APP_BOX_OFFICE_KEY,
    targetDt: getTodayDate(),
  },
});


// 리덕스에 박스오피스 데이터 저장
export const getBoxOfficeMoviesFetch = () => {
  return async (dispatch) => {
    // 박스오피스 데이터를 불러오고
    const boxOfficeData = await getBoxOffice(); 
    if (boxOfficeData) {
      // 데이터가 있으면 해당 영화 정보를 검색한다 (없으면 db에 저장함)
      const moviesList = await getBoxOfficeMovies(boxOfficeData); 

      // 찾은 영화 정보를 리덕스에 업데이트한다
      dispatch(moviesAction.getBoxOfficeMovies(moviesList));
    }
  };
};

// 리덕스에 최신 영화 데이터 저장
export const getRecentMoviesFetch = () => {
  let movieList = []; //리덕스에 업데이트 될 리스트

  return async (dispatch) => {
    const response = await moviesClient.get("", {
      params: {
        listCount: 50,
        releaseDts: getPeriodDate(14), // 오늘로부터 14일 이전날짜
        releaseDte: getPeriodDate(), // 오늘날짜
      },
    });

    // db에 해당 데이터 있는지 확인하고 만약 데이터가 없으면 db에 저장
    const responseData = getResponseMovieData(response);
    if (responseData) {
      const responseData = getResponseMovieData(response);
      for (const data of responseData) {
        const formattedData = changeDataFormat(data);
        // releaseDate포맷이 비정상인 데이터를 거른다
        if (
          formattedData.releaseDate.length !== 8 ||
          formattedData.releaseDate.substring(6, 8) === "00"
        ) {
          continue;
        }

        movieList.push(formattedData);

        addMovie(formattedData);
      }
    }

    dispatch(moviesAction.getRecentMovies(movieList));
  };
};

// 박스 오피스 데이터를 들고옴
const getBoxOffice = async () => {
  const response = await boxOfficeClient.get("");
  const responseData = response.data.boxOfficeResult.dailyBoxOfficeList;
  return await responseData.map((data) => ({
    movieCode: data.movieCd,
    title: data.movieNm,
    releaseDate: data.openDt.replace(/-/g, ""),
  }));
};

// 박스오피스 영화 정보 검색
export const getBoxOfficeMovies = async (boxOfficeData) => {
  let movieList = []; //반환될 영화 데이터, redux state가 될거임

  for await (const data of boxOfficeData) {
    // db에 해당 영화가 있는지 검색
    const movie = await searchMovie(data);
    // db에 없으면 moviesClient api로 데이터 패칭
    if (!movie) {
      const response = await moviesClient.get("", {
        params: {
          title: data.title,
          releaseDts: data.releaseDate,
        },
      });

      const responseData = getResponseMovieData(response);
      // 응답 데이터가 있으면 db에 저장하고 movieList에 추가
      if (responseData && responseData.length > 0) {
        for (const data of responseData) {
          const formattedData = changeDataFormat(data);
          addMovie(formattedData);
          movieList.push(formattedData);
        }
      }
    } else { // db에 있으면 movieList에 추가
      movieList.push(movie);
    }
  }
  return movieList;
};

// api response에서 영화 정보 추출
const getResponseMovieData = (response) => {
  return response.data.Data[0].Result;
};

util/data

KMDb는 특정 영화를 지정해서 검색하면 제목에 !HS !HE 이런게 포함돼서 나옴. 정규표현식을 이용해서 db에 저장할때는 불필요한 글자나 공백은 제거해준다.

/** db에 저장할 데이터만 추출하는 메소드 */
export const dataFormat = (data) => {
  const {
    movieSeq,
    Codes: {
      Code: [{ CodeNo }],
    },
    title,
    genre,
    repRlsDate,
    prodYear,
    posters,
    plots: {
      plot: [{ plotText }],
    },
    runtime,
    rating,
    nation,
    titleEng,
    titleOrg,
    directors: {
      director: [{ directorNm }],
    },
    actors: { actor },
  } = data;

  /**정규표현식으로 제목 수정 */
  let titleForamt = title
    .replace(/!HS/g, "")
    .replace(/!HE/g, "")
    .replace(/^\s+|\s+$/g, "")
    .replace(/ +/g, " ");

  return {
    id: movieSeq,
    movieCode: CodeNo,
    genre,
    title: titleForamt,
    releaseDate: repRlsDate,
    prodYear,
    poster: posters.split("|")[0],
    summary: plotText,
    runtime,
    rating,
    nation,
    titleEng,
    titleOrg,
    director: directorNm,
    actors: actor.map((it) => it.actorNm),
  };
};

util/date

/** 날짜 정보 YYYYMMDD */
export const getPeriodDate = (period = 0) => {
  //오늘 날짜를 기준으로, -period 기간의 날짜를 반환
  const today = new Date();
  const dayAgo = new Date(today.setDate(today.getDate() - period));

  const date = new Date(dayAgo);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();

  return `${year}${month < 10 ? `0${month}` : month}${
    day < 10 ? `0${day}` : day
  }`;
};

구현결과

영화를 클릭하면 상세정보가 뜬다.

트러블 슈팅

1. CORS 에러

AxiosError: Network Error
at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:80954:14)

axios로 API를 호출할 때 발생.
API서버와 클라이언트 서버가 달라서 발생함.
서버는 손댈 수 없어서 클라이언트단에서 해결해야 했는데 검색했을때 나오는 withCredentials 옵션 방법으로는 전혀 해결이 안돼서 다른 방법이 필요했다.

참고자료 https://xiubindev.tistory.com/115

참고 블로그처럼 http-proxy-middleware를 사용해서 해결함

2. map에서 async/await사용하기

Array.map에서 async/await을 사용했는데 Promise배열이 반환됨

[Promsie, Promsie, Promise, ...]

map에서 비동기 처리를 하려면 Promise.all() Promise.allSettled() 처리가 필요하다고 한다. 참고 자료를 통해서 해결했었고 지금은 map 대신 for in을 사용하는 방향으로 바꿨다.

참고자료 https://velog.io/@minsangk/2019-09-06-0209-%EC%9E%91%EC%84%B1%EB%90%A8-eik06xy8mm