외부 API를 이용하여 정보를 가져오고 그 정보 중에 내가 필요한것만 뽑아서 사용해보자! 그리고 input 태그로 사용자가 입력한 입력값에 맞는 정보를 화면에 보여줄것!! 외부 API 활용법에 대하여..!
영화진흥원위원회 API
1. 키 발급 받기
영화진흥원 API라고 검색하면 가장 상단에 뜨는 홈페이지에 접속. 회원가입 후 로그인해준다. 키 발급/관리 메뉴에 들어가서 키 발급받기 버튼을 누르면 다음과 같은 화면이 뜬다. 
사용목적은 공부목적과 같이 간단히 적어주고 관리명에는 아무거나 쓰면 된다. 그리고 문항에 동의 후 발급하기를 누르면 발급 완료! 발급된 키는 url에 쓰일 예정이므로 꼭 발급이 필요하다.
2. 제공하는 서비스 둘러보기
open API -> 제공 서비스 메뉴로 가서 내가 어떤 정보를 쓸지 보고 필수값들은 뭔지 확인한다. 현재 실습에서는 일별 박스오피스에서 key(발급받은키 값을 입력합니다.)와 targetDt(조회하고자 하는 날짜를 yyyymmdd 형식으로 입력합니다.)가 필수값이고 다양한 정보 중에서 rank(해당일자의 박스오피스 순위를 출력합니다.)와 movieNm(영화명(국문)을 출력합니다.)를 사용할 것이다.
코드
1. index.js 파일
const express = require('express'); // express 등록
const app = express();
const PORT = 8888;
app.set('view engine', 'ejs'); // ejs를 사용하겠다.
app.set('views', './views'); // views를 views 폴더에 저장하겠다.
app.get('/', (req, res) => {
res.render('result', {title: '영화 API 가져와서 실행하기'})
}) // '/'경로로 진입하면 result 파일을 보여줄것이다.
app.listen(PORT, () => {
console.log(`${PORT}포트 실행`);
})javascript 파일에서 궁금한 점이 있다면 이전 포스터를 참고!!
2. result.ejs 파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<!-- ajax를 사용하기 위해 jquery CDN 가져오기 -->
</head>
<body>
<h1>
<%= title %>
</h1>
<form name="register">
<input type="date" name="date" id="date"> <br>
<button type="button" onclick="getMovies();">영화 정보 가져오기</button> <br>
</form>
<div class="result"></div>
<script>
const resultBox = document.querySelector('.result');
// resultBox: 결과를 표시할 div 요소를 선택
// yyyy-mm-dd형태를 yyyymmdd형태로 바꿔주는 함수
function convertDate(dateInput) {
if (dateInput) {
const dateParts = dateInput.split('-');
const year = dateParts[0];
const month = dateParts[1];
const day = dateParts[2];
return year + month + day;
} else {
return '';
}
}
function getMovies() {
console.log('click');
const form = document.forms['register'];
// console.log(form.date.value); // 2024-06-18
let dateValue = form.date.value;
let date = convertDate(dateValue);
// console.log(date); // 20240618
// 사용할 data 설정(정의)
const data = {
key: '내가 발급 받은 키',
targetDt: date,
};
$.ajax({
type:'get',
url: 'https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json',
data,
success: function(data) {
// console.log(data);
let dataResult = data.boxOfficeResult;
// console.log(dataResult);
// console.log(dataResult.dailyBoxOfficeList); // 배열
let moveiList = dataResult.dailyBoxOfficeList;
// for(let i = 0; i < moveiList.length; i++) {
// console.log(moveiList[i].movieNm);
// console.log(moveiList[i].rank);
// }
let movieInfo = '';
moveiList.forEach((movie, index) => {
movieInfo += `영화 이름은 ${movie.movieNm}이고 오늘의 순위는 ${movie.rank}위 입니다.<br><br>`;
});
// rank는 배열로 되어있기 때문에 반복문을 이용하여 값을 가져와야함.
resultBox.innerHTML = movieInfo;
resultBox.style.color = 'green'
}
})
}
</script>
</body>
</html>-
yyyy-mm-dd형태를 yyyymmdd형태로 바꿔주는 함수
function convertDate(dateInput) { if (dateInput) { const dateParts = dateInput.split('-'); const year = dateParts[0]; const month = dateParts[1]; const day = dateParts[2]; return year + month + day; } else { return ''; } }dateInput을 매개변수로 사용자가 날짜를 선택하여 dateInput값이 존재하면 if문이 실행된다. dataInput값(2024-06-18)을 '-'를 기준으로 분리하여 배열(dateParts)로 저장한다. 분리된 연(year), 월(month), 일(day)을 합쳐서 yyyymmdd 형식의 문자열로 반환한다.
-
버튼 클릭시 실행하는 getMovies()함수
const data = { key: '내가 발급 받은 키', targetDt: date, };여기서 key값은 내가 발급 받은 걸 적어주고! targeDt는 yyyymmdd형태의 날짜니까 아까 위에서 정의해둔 date를 사용하면된다. 즉, 제공서비스 메뉴에 나와있는 필수값들을 정의해주면 된다.!
다음은 가장 중요한 ajax 코드를 살펴보자!
여기에서 url은 외부 API를 가져오면 되는데 open API -> 제공 서비스 메뉴 페이지에 가장 아래부분을 보면 예시가 있어 참고해주면 되는데 ? 뒤는 data로 받게 될 부분이니 생략해서 작성해야한다.
success부분은 요청이 성공했을 때 수행하는 코드이다. 여기서 집중!!!
변수에 넣어주는 값들을 잘 지정해줘야하는데 여기는 console.log()를 찍어보면서 어떤 값을 넣어줘야하는지 판단해야한다. 아래 이미지를 참고!
-
결과 페이지
마무리하며...
백엔드 개념이 정말 쉽지않은거같다. 여기에서 핵심은 내가 가져오고 싶은 정보가 어떤 형태로 되어있는지 파악하는게 중요하다. 그래서 console.log()를 열심히 찍어보면서 익히자!!
출처
[새싹 X 코딩온] 영등포 캠퍼스 6기 입문자도 가능한 웹 개발자 부트캠프 강의 교안
https://www.kobis.or.kr/kobisopenapi/homepg/main/main.do
