WIL _ visit jeju(비짓 제주) open API 활용

visit jeju가 제공하는 오픈 API를 활용하여 관광지 등록하기

1. Open API 신청하기

• 오픈 api는 공공데이터 포털이라는 사이트를 통해 검색
• https://www.data.go.kr/

공공데이터 포털

• 검색해서 찾기 어려울 실까봐 제주도는 visit jeju라는 사이트에서 오픈 api 키를 신청해야하기에 아래 링크로 접속
• https://www.visitjeju.net/kr/visitjejuapi

비짓제주 관광정보 OPEN API

 

 

• 여기서 사용신청 바로가기 버튼을 눌러 신청을 하여 문제가 없다면 1~2일 내로 오픈키가 메일로 공유된다

 

2. Open API KEY 활용하기

• 오픈 api키를 신청하였던 사이트에 보면 '활용가이드 다운로드'가 있다.
• 파일을 다운해보면 갖가지 정보들이 기재되어있고 그중에 json 정보를 보고싶다면 5페이지로 이동!
• 요청/응답메시지 예제의 REST(URI)의 링크를 복사하여 [APIKEY] 라는 부분 대신 송부받은 api key를 삽입한다.
• 그리고 웹창에 띄우면 json 모양으로 보이게 된다.

활용가이드 5p

open api key를 활용하여 보여지는 소스

3. 연습하기 _ 제주도 관광 정보 종합

• open api에 있는 제주도의 정보들을 모두 불러와서 웹페이지로 띄워 보았다.
• 필요했던 [사진, 주소, 키워드, 설명] 만을 불러서 카드로 보여주었다.
• 다만 여기서 몰랐던 부분은 json으로 보여질 때 값의 상/하위 값이 있어 혼동이 있었다.
• 아래를 보면 알겠지만 이미지는 그냥 'imgpath'만을 지정하면 불러와지지 않고 상위 폴더인 'photoid'와 'repPhoto'부터 불러와야 한다.

let rows = response['items']
for (let i = 0; i < rows.length; i++) {
    let title = rows[i]['title']
    let introduction = rows[i]['introduction']
    let img = rows[i]['repPhoto']['photoid']['imgpath']
    let address = rows[i]['roadaddress']
    let tag = rows[i]['alltag']

    let temp_html = `<div class="col">
                        <div class="card h-100">
                            <img src="${img}" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">${title}</h5>
                                <p class="card-text">주소:${address}</p>
                                <p>Keyword:${tag}</p>
                                <p class="mycomment">${introduction}</p>
                            </div>
                        </div>
                    </div>`
    $('#cards-box').append(temp_html)
}

 

4. 추가되었으면 하는 기능

• 1p에 최대 12개 정도만 보이고 페이지를 넘기면서 보는 기능
• 키워드나 관광지 이름 검색 기능
• 읍별로 카테고리 나눠서 볼 수있는 기능
• 주소를 클릭하면 네이버 지도로 연결되는 기능
• 관광지 이름을 클릭하면 네이버에서 바로 검색되어진 페이지가 연결되는 기능