영화진흥위원회 API 사용하기 : Fetch API

Notice

Recent Posts

Recent Comments

Link

Git Hub ❤︎

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

JOYLOG

영화진흥위원회 API 사용하기 : Fetch API 본문

D E V E L O P E R 💻/Back-end

영화진흥위원회 API 사용하기 : Fetch API

주힝 2020. 9. 11. 18:12

이번 포스팅에서는

Json으로 영화진흥위원회의 오픈 API를 활용할 것이다.

html파일에 static을 연결하고 json 파일을 연결해두면 준비완료!

index.html

index.json

두 개의 파일과 웹개발 환경을 준비하였고, 이번 학습에서는 json 파일 수정만 있을 예정이다

"영화진흥위원회 오픈API"

http://www.kobis.or.kr/kobisopenapi/homepg/apiservice/searchServiceInfo.do

영화진흥위원회 오픈API

www.kobis.or.kr

위 주소, 영화진흥위원회 오픈API에서 영화목록을 가져올 것이고,

페이지를 보면 요청 인터페이스, 응답 구조 등이 어떻게 지정되어 있는지 볼 수 있다.

우리는 이번 시간 위를 활용해 원하는 API를 활용한다.

회원가입을 해서 본인의 키를 발급받아야 API를 활용할 수 있다. ⭐

key를 발급받아야하는 이유는 내가 누구인지 신분을 확인받고 API를 사용해야하기 때문!

일종의 신분 확인 프로세스라고 이해하면 된다.

"코드"

index.html

<!-- index.html -->
<!-- static 파일들과 연결하였고, API로 얻은 정보들을 html로 보내기위해 id가 a인 div를 만들어 놓음 -->
<!-- script에 json 연결 -->


<!DOCTYPE html>
{% load static %}
<!-- static 폴더와 연결 -->
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="a">
    </div>
    <script src = "/static/js/index.js"> //javaScirpt
    </script>
    
</body>
</html>

index.json

>> 영화이름, 국가, 장르, 제작연도를 불러오는 코드이다.

이 코드를 이해하기 위해선

JavaScript에서 DOM에 대한 이해가 필요할 것 같다고 생각하였다

아래 코드에서는

document.createElement('p')를 이용하여

가져온 정보들을 새로생긴 p태그에 넣어주어

html에 보내는 작업을 하고 있다

//index.json

var key = "?key=개인의키" // key 앞에 <?key=>를 붙여야함 : prameter
var itemPerPage = "&itemPerPage=20" //20개를 가져올것이라서
const url = "http://www.kobis.or.kr/kobisopenapi/webservice/rest/movie/searchMovieList.json"
            + key
            + itemPerPage 
var item_int = 20

var title = document.getElementById('a') //html에서 id a에 해당하는 것
fetch(url)
            .then(response=>response.json())
            .then(function(msg){ //아래부터는 html로 가져오기 위한 코드
                for(var i =0; i<item_int; i++){
                    var div = document.createElement('div');
                    var low_div = document.createElement('div')
                    var title_div = document.createElement('div')
                    var br = document.createElement('br');

                    var mp = document.createElement('p');
                    mp.id = 'movieNm'
                    var np = document.createElement('p');
                    np.id = 'nationAlt'
                    var gp = document.createElement('p');
                    gp.id = 'genreAlt'
                    var pp = document.createElement('p');
                    pp.id = 'prdtYear'
                    title_div.id = 'title_div'
                    low_div.id = 'low_div'
                    div.id = 'movies'
                    short_url = msg.movieListResult.movieList[i]
                    console.log(short_url);
                    div.appendChild(title_div)
                    div.appendChild(low_div)
                    title.appendChild(div);
                    var movieNm = document.createTextNode(short_url.movieNm);
                    var nationAlt = document.createTextNode(short_url.nationAlt);
                    var genreAlt = document.createTextNode(short_url.genreAlt);
                    var prdtYear = document.createTextNode(short_url.prdtYear);
                    
                    mp.appendChild(movieNm);
                    np.appendChild(nationAlt);
                    gp.appendChild(genreAlt);
                    pp.appendChild(prdtYear);

                    title_div.appendChild(mp);
                    low_div.appendChild(br);
                    low_div.appendChild(np);
                    low_div.appendChild(gp);
                    low_div.appendChild(pp);




                }
                        
            });

++ 추가로 이해를 돕기위해 다른 분께서

영화이름만 가져올 수 있는 코드를 보내주셨다

        fetch(url)
            .then(response=>response.json())
            .then(function(msg){
                // msg가 어떻게 생겨먹었나?
                console.log(msg);

                // i<10 난 10개만 변수로 부여해도 괜찮아요 10대신
                for(let i = 0; i<10; i++){
                    // console에 찍은 msg 속으로 들어가보면 movieListResult -> MovieList 를 확인할 수 있어요
                    // 해당 내용을 short_url에 담아요 for문이니깐 본인이 원하는 횟수만큼
                    short_url = msg.movieListResult.movieList[i];
                    
                    //short_url이 어떻게 생겨먹었나?
                    console.log(short_url);
                    
                    // 영화제목을 id = "a" div태그에 추가해주기 short_url 중에서 movieNm을 movieNm이라는 변수에 담았어요
                    let movieNm = document.createTextNode(short_url.movieNm);
                    title.appendChild(movieNm);

                    // 줄바꿈을 위한 br태그 _ 없어도됨
                    let br = document.createElement('br');
                    title.appendChild(br);

                }
            });