[OMT] OPEN API 적극 활용하기
2023.06.09(일)
배포까지 완료해놓고 홈페이지의 Home화면부터 만들고 구상하기 시작했다. 이전에 데이터는 어떻게 활용할지 구상은 다 해두었기 때문에 데이터를 활용한 페이지들을 소개하고 활용 방법을 기록하고 싶다.
활용한 OPEN API
이 페이지에서는 일별 박스오피스 데이터를 받아왔다 아쉬운점은 포스터 URL이 없다는점..
KOFIC에서는 포스터 URL을 제공해주지 않기 때문에 박스오피스의 정보를 받아와 이곳에서 포스터를 받아올 생각을 했다.
각 데이터들의 API 활용법들은 홈페이지에 친절하게 설명해주고 있었다. 각 페이지의 KEY를 발급받고 포스트맨을 활용해서 이것 저것 정보를 받아왔다.
포스트맨
이제 데이터들을 받아올 수 있으니 가공해서 사용해야 했다.
데이터 활용하기
차근차근 정리를 해보자면 다음과 같다.
- yyyymmdd 형식으로 날짜를 변환해서 일별 박스오피스 정보 받아오기
- 받아온 박스오피스 정보의 영화 제목을 입력해서 영화 포스터 URL 받아오기
- 데이터 뿌리기
1. yyyymmdd 형식으로 날짜 변환하기
KOFIC에서 제공하는 일별 박스오피스는 오늘 날짜가 아닌 전날의 날짜를 입력해야 데이터를 받아올 수 있기 때문에 어제의 날짜를 yyyymmdd 형식으로 변환해야 했다.
function get_date_str(date: any) {
var sYear = date.getFullYear();
var sMonth = date.getMonth() + 1;
var sDate = date.getDate();
sMonth = sMonth > 9 ? sMonth : '0' + sMonth;
sDate = sDate > 9 ? sDate : '0' + sDate;
return sYear + sMonth + sDate - 1;
}
function get_today() {
return get_date_str(new Date());
}
이렇게 추출한 전날의 데이터를 KOFIC_URL을 통해 정보를 받아오고 내가 필요한 rank, movieNm, audiAcc 이 3개만 map을 활용해서 DailyBoxOffice에 담아주었다.
const Chart = () => {
const [movieChart, setMovieChart] = useState<DailyBoxOfficeItem[]>([]);
useEffect(() => {
axios
.get(`${URL}`, {
params: {
key: `${KEY}`,
targetDt: `${get_today()}`
}
})
.then((res) => {
let result = res.data.boxOfficeResult;
let extractedData = result.dailyBoxOfficeList.map(
(item: DailyBoxOfficeItem) => ({
rank: item.rank,
movieNm: item.movieNm,
audiAcc: item.audiAcc
})
);
setMovieChart(extractedData);
}, []);
이렇게 추출한 데이터의 movieNm (영화제목)을 바탕으로 포스터 URL을 받아와야 했다.
2. 포스터 URL 받아오기
const detailMovieInfo = extractedData.map((movie: any) => {
return axios.get(`${KMDB_URL}`, {
params: {
collection: 'kmdb_new2',
detail: 'Y',
title: movie.movieNm,
ServiceKey: `${KMDB_KEY}`
}
});
});
Promise.all(detailMovieInfo)
.then((responses) => {
const posters = responses.map((res) => {
const posters = res.data.Data[0].Result[0].posters;
return posters.split('|')[0];
});
setMoviePosters(posters);
})
.catch((error) => console.log(error));
})
.catch((error) => console.log(error));
detail을 Y로 설정하지 않으면 포스터 URL이 뜨지 않았기 때문에 Y로 설정하고 필요한 데이터인 URL만 추출하기 위해 데이터를 가공하는 작업을 거쳤다. 포스터URL은 메인 포스터를 제외한 6개? 정도의 다른 포스터들을 포함하고 있기 때문에 맨앞의 메인 포스터만 사용할 수 있게 가공했다.
데이터 활용 전체 코드
const [movieChart, setMovieChart] = useState<DailyBoxOfficeItem[]>([]);
const [moviePosters, setMoviePosters] = useState<string[]>([]);
// 일별 박스오피스 정보 받아오기
useEffect(() => {
axios
.get(`${URL}`, {
params: {
key: `${KEY}`,
targetDt: `${get_today()}`
}
})
.then((res) => {
let result = res.data.boxOfficeResult;
let extractedData = result.dailyBoxOfficeList.map(
(item: DailyBoxOfficeItem) => ({
rank: item.rank,
movieNm: item.movieNm,
audiAcc: item.audiAcc
})
);
setMovieChart(extractedData);
// 포스터 URL 받아오기
const detailMovieInfo = extractedData.map((movie: any) => {
return axios.get(`${KMDB_URL}`, {
params: {
collection: 'kmdb_new2',
detail: 'Y',
title: movie.movieNm,
ServiceKey: `${KMDB_KEY}`
}
});
});
Promise.all(detailMovieInfo)
.then((responses) => {
const posters = responses.map((res) => {
const posters = res.data.Data[0].Result[0].posters;
return posters.split('|')[0];
});
setMoviePosters(posters);
})
.catch((error) => console.log(error));
})
.catch((error) => console.log(error));
}, []);
3. 데이터 뿌려주기
이제 데이터들을 잘 뿌려줄 일만 남았다.
{movieChart.map((a: DailyBoxOfficeItem, i: number) => {
return (
<div className={styled.movies} key={a.rank}>
<img
src={moviePosters[i] || '/preparing.png'}
alt='movie poster'
className={styled.moviePoster}
/>
<strong className={styled.movieTitle}>{a.movieNm}</strong>
<div className={styled.moviesTxt2}>누적관객수: {a.audiAcc}</div>
</div>
);
})}
이런식으로 데이터를 뿌려주면 아래와 같은 결과물을 얻을 수 있었다.
🙆♂️ 결과물
오늘 react-slick을 활용해서 슬라이드를 완성시켜봤는데 이건 다음 포스트에서 다루어볼 것 같다. 굉장히 쉽게 슬라이드를 구현할 수 있었다.
이제 Home에서 남은 메인은 예고편 재생이 있다. 예고편에 대한 정보는 KMDb에 데이터가 있기 때문에 이를 활용해서 진행할 것 같다.
얼른 Home을 끝내고 나만의 영화 티켓 보관소를 만들고 싶다!!