API를 사용하려면 API를 잘 알아야 하니까!
공공데이터포털에 접속한 후, 자전거 사고 다발 정보 서비스 API를 신청하여 사용해보도록 하겠음.
- API 사용이 목적이므로 html, css, js파일 정도로 정말 간단명료하게 만들었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document!!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>부흥부흥 자전거 사고 다발 지역</h1>
<script src="main.js"></script>
</body>
</html>
//index.html
2. js파일에 api 호출 함수를 만들것이다!
function getData() {
//url을 먼저 선언하는 이유 : 백엔드에 데이터를 요청할 때 url을 통해 요청할 수 있다.
const url =''
}
공공데이터포탈 - 마이페이지 > Open API > 활용신청 현황 > 상세보기 눌러보면
이렇게 뜨는데
일반 인증키(Encoding)의 인증키를 기억해 두고 따로 메모를 해둡시다.
const API_KEY = 'gwPJ1caaVMawpqTElNnvyCGTm%2FHVjczmbWF%2FqpMDcf1lXT6zDz5TO32ZAhl4w6jyg11nsUte%2FAGWyyLNnKMZ9w%3D%3D'
function getData() {
//url을 먼저 선언하는 이유 : 백엔드에 데이터를 요청할 때 url을 통해 요청할 수 있다.
const url =''
}
Q. API 활용 신청은 해놨는데, 그러면 어떤 주소를 복사해서 붙여넣기를 해야... API url을 사용한 것일까나?
A. 해당 API 활용 상세에 가면
해당 API 서비스의 제목이 왕크게 써져있고
아래애 base URL과 API 목록 주소가 써져있다.
http://baseURL / API 목록 주소
이런 조합으로 써주면 url 완성이다. (http://는 꼭 써줘야한다!!)
API를 활용하려면, url 말고도 꼭 필수로 데려와야 할 변수들까지 기재를 해줘야만 활용이 가능하다.
API : "헤이! 개발자야! 이 값들을(요청변수들을) url에 같이 넣어서 보내주겠니?"
나 : "네.."
필수로 꼭 기재해야할 변수는 미리 다 API에서 정해주었으니 (* required라고 적혀진 변수는 다 필수라고 보면 됨)
그 변수들마저 적어준다.
필수로 넣어야 할 값 : 1. 인증키(우리가 따로 적어놓고 API_KEY에 저장해둔 그 인증키) 2.연도값 3.시도 4.구군 5.검색건수 6.페이지 번호
const url =`http://apis.data.go.kr/B552061/frequentzoneBicycle/getRestFrequentzoneBicycle?ServiceKey=${API_KEY}&searchYearCd=2015&siDo=11&guGun=680&type=json&numOfRows=10&pageNo=1`
이제 다 됐음!
호출만 해주면 된다!!
//api를 호출하는 javascript 코드
async function getData() {
//url을 먼저 선언하는 이유 : 백엔드에 데이터를 요청할 때 url을 통해 요청할 수 있다.
//API를 사용할 때 필수로 데려와야할 변수들까지 다 챙겨서 url 선언해줘야 함(API에서 미리 다 정해놓음)
const url =`http://apis.data.go.kr/B552061/frequentzoneBicycle/getRestFrequentzoneBicycle?ServiceKey=${API_KEY}&searchYearCd=2015&siDo=11&guGun=680&type=json&numOfRows=10&pageNo=1`
//API 호출하는 방법
const response = await fetch(url)
//await ..? 이게 무슨 말이야?ㅠㅠ
//await : url 호출을 조금은 기다려 줘야한다(데이터 양에 따라 빨리 올수도 늦게 올수도 있으니까)는 의미로
//await라는 말을 쓴 것, await 함수를 쓰려면 getData() 펑션 함수에 async 선언을 꼭 해줘야한다
//url을 호출하여 데이터를 받았어!! 그 데이터를 response라는 변수에 넣어준 상태!!
const data = await response.json()
//우리가 url을 호출하여 받아온 데이터 'response'중에 json만 추려서 data라는 변수에 넣겠다는 뜻
const response = await fetch(url)
const data = await response.json()
//이 두 줄이 api를 부르는 가~~장 기본적인 명령어다!! 외워주면 좋아요~
//api가 잘 호출되었는지 console.log에 찍어볼거임
console.log("data",data);
}
//여기서 끝이 아님
//getData함수를 불러와서 언급해줘야 찐 실행이 되겠져?
getData();
3.
index.html 파일을 run해주면 크롬 웹페이지가 뿅 하고 뜬다.
그 뒤에 크롬 개발자모드 - 콘솔로 들어가게 되면 데이터가 이렇게 뜬다~
Array(5)를 하나하나 열어보면은?
이렇게 서울, 강남구의 자전거 사고 다발구역에 대한 정보가 들어가있다!!
api를 잘 불러온거임!!
그런데 저기에 써져있는
숫자는 뭘 뜻하는거지?
occrrnc_cnt, se_dnv_cnt 등등,..무슨 의미인거지?
이렇게 궁금한 게 생겼을 때 무엇을 찾아보면 되냐면!!
api문서에서 '출력결과'를 찾아보면 됨!!
상세페이지에 있는 api 한글파일을 열어보면은 응답 메세지 명세부분에 나와있다
사고건수,사상자수, 사망자수부터 사고다발지역의 경도,위도도 나와있다.
위의 경도와 의도 정보를 가지고 지도에 찍어서 보여줄 수도 있다(심화)
api에서 받아온 경도,위도 정보로 구글 지도에 보여주는 기능 구현해보기!
1. 구글지도에 해당 위치 정보를 띄워주기 위하여 필요한 '기본세팅' 준비하기 - html파일 & css 파일 & 구글 맵스 API
구글지도를 사용해야하니깐, 구글지도에 지도 api를 요청을 할 수 있는 api url 소스 필요함
홈페이지안에서 지도를 나타내줄 '자리' 필요하다.
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document!!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>부흥부흥 자전거 사고 다발 지역</h1>
<script src="main.js"></script>
<div id="map">지도를 보여줄 어떠한 공간을 위해 적음</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=<API키 비밀!!>&callback=initMap"></script>
</body>
</html>
//style.css
#map{
width: 100%;
height: 100vh;
background-color: gray;
}나는 아이티윌 교육기관 수강 당시에 구글 맵스 api를 발급받은 적이 있어서, 그 api 주소를 가져왔다.
홈페이지안에서 지도를 나타내줄 자리를 div 노드를 통해서 만들어 주었고,
style.css 파일에서 map의 크기와 컬러를 #map로 설정해주었다.
2. javascript로 지도를 나타낼 함수 drawMap함수를 만들어주기 - main.js 파일
'백엔드 개발 > 미니 플젝' 카테고리의 다른 글
| [미니 프로젝트] vol2. 'UNIVerse' css,js 연동 오류 문제 해결법 (0) | 2023.12.05 |
|---|---|
| [미니 프로젝트] vol2. 'UNIVerse' 프로젝트 세팅 + git 연동 (0) | 2023.11.23 |
| [미니 프로젝트] vol1. 전국 대학 커리큘럼 비교 서비스 기획 (0) | 2023.11.19 |
