1️⃣ 공공데이터
공공데이터(Open Data)란 데이터베이스, 전자화된 파일 등으로 공공기관에서 사용할 목적으로 처리된 자료 또는 정보이다
공공기관에서의 일상적 업무수행의 결과물로 생성 또는 수집/취득한 다양한 형태(텍스트, 이미지, 동영상 등)의 모든 자료이다.
공공데이터 제공
공공기관이 이용자로 하여금 기계판독이 가능한 형태의 공공데이터에 접근할 수 있게 하거나 이를 다양한 방식으로 전달하는 것
공공데이터 개방
공공기관이 이용자에게 정보를 재활용할 수 있도록 제공하고, 제공받은 정보를 상업적/비영리적으로 이용할 권한을 부여하는 것
2️⃣ 공공데이터 활용
정부에서 운영하고 있는 공공데이터를 제공하는 웹 애플리케이션으로 누구나 자유롭게 공공데이터를 확인하고 관련 내용을 활용하여 애플리케이션을 만들 수 있다
공공데이터 포털 사이트
3️⃣ 공공데이터 제공 형식
파일 다운로드 방식
CSV, XML, exls 형태의 파일로 데이터를 제공하는 것
사용자가 직접 파일을 다운로드 받아 사용할 수 있다.
OpenAPI 방식
HttpRequest요청을 보내면 서버가 데이터를 응답해주는 방식
이때 요청 해야되는 주소, 파라미터(요청시 전달값), 반환 데이터 등이 정해져 있으며 이 방식을 이용하기 위해서는 인증키를 발급 받아야 된다.
웹 애플리케이션 개발 시에는 해당 OpenAPI 방식을 권장한다.
xml, json 오픈 api도 어떤 url 요청해야하고, 전달해야 하는 값(파라미터)는 뭔지 다 정해져 있어서 원하는대로 원하는 url로 응답 데이터 가져오기
⇒ 마치 ajax랑 비슷하다
웹사이트 경우엔 오픈 api를 더 권장한다
인증키를 발급 받아야 한다
4️⃣ OpenAPI 방식
요청변수, 출력결과
- 요청변수(Request Parameter)
OpenAPI 서버에 요청 시 필요한 속성들을 나열한 것이다.
항목구분이 필수인 속성들은 반드시 key=value 형식으로 전달 해야만 한다. - 출력결과(Response Element)
OpenAPI 서버에 요청 결과 응답메세지에 포함된 데이터의 형식을 의미한다.
기본적으로 결과 코드, 결과 메시지 등을 포함하고 있으며 실제 필요로 하는 값들이 담겨 있는
형식이므로 API 문서를 잘 파악해서 구현하고자 하는 application과 연동해야 한다.
데이터 포맷 종류
• XML 형식
HTML과 같은 마크업 언어(Markup Language)로
웹에서 구조화된 문서를 전송 가능하도록 설계되어 각 요소들의 독립성을 보장함으로써
문서의 호환성, 내용의 독립성, 요소 변경의 용이성 등의 특성을 제공하는
사용자 정의 태그 문서
• JSON 형식
자바스크립트의 구문 형식으로 프로그래밍 언어나 플랫폼에 독립적이기 때문에
C, C++, C#, Java, JavaScript 등 많은 언어에서 이용가능
• CSV 형식
각 항목이나 내용마다 쉼표(comma)로 구분되어 저장
CSV형식의 파일은 텍스트 파일로 보존되며 문서처리기나 편집기에서 열람 및 편집 가능
엑셀에서 ‘다른 이름으로 저장＇시 파일 형식을 CSV 포맷으로 변환도 가능
• XLS 형식
마이크로소프트(MS)사의 엑셀 문서 형식으로
스프레드시트를 연결하고 통합하여 다양한 도형과 차트 등 자료를 작성하는 기능 제고
공공데이터 OpenAPI를 사용하기 위한 절차
- 공공데이터 포털(www.data.go.kr) 회원가입 후 로그인
- 사용하고자 하는 공공데이터 조회 및 선택
- OpenAPI 개발 계정 신청
- 개발하고자 하는 Application에서 공공데이터 연동 기능 구현
5️⃣ 공공데이터 포털 가입 & 서비스 신청
회원가입 후 로그인
오픈API 검색 후 활용신청
마이페이지
마이페이지 → 인증키 발급현황
6️⃣ 공공데이터 정보 분석
활용신청한 공공데이터 정보분석
응답데이터상세(참고문서에 명세)
7️⃣ 공공데이터 활용(Java Application)
HttpUrlConnection 객체 사용 절차
- 요청할 주소를 전달해서 java.net.URL 객체 생성하기
- 생성된 URL 객체를가지고 HttpUrlConnection 객체 얻어내기
- 요청 시 필요한 Header 설정하기
- 해당 OpenAPI 서버로 요청 보낸 후 입력 스트림을 통해 응답데이터 받기
- 다 사용한 스트림 객체 반납하기
8️⃣ 공공데이터 활용(Web Application)
비동기식으로 웹 애플리케이션에 적용하고자 할 때의 절차
- Jsp에서 현재 웹 애플리케이션 서버로 ajax 요청
- Controller에서 요청 받기 (이때 요청 시 전달값이 있다면 기록)
- HttpURLConnection 객체 활용해서 OpenAPI서버에 요청하여 응답데이터 받기
- 3번 과정에서의 응답데이터를 Client에게 다시 응답
- Client측에서 돌려받은 응답데이터를 가지고 파싱 작업 후 웹 페이지에 시각화 하기
9️⃣ 실제 해보기
한국환경공단 에어코리아 대기오염정보
get방식으로 파라미터 요청하기 → queryString으로 전달
인증키는 함부로 노출하면 안된다
사용 횟수 제한이 있기 때문에 조심해야 한다
여러 개중에서 이거 사용할 예정
-
JSON 버전
-
XML 버전
↑ 실질적인 정보는 item 안에 담겨있다
정보들 담기 위해서 DTO에 담았는데 이것도 마찬가지임
그럼 돌아오는 내용을 DTO & VO로 만들어주고 현재 리스트로 쫙 있으니깐 → ArrayList로 꺼내면 된다
조회 꼭 눌러주기
그래야지 요청주소가 변경됨
💡
- 활용승인 절차 개발단계 : 자동승인 / 운영단계 :
- 신청가능 트래픽 개발계정 : 500 / 운영계정 : 활용사례 등록시 신청하면 트래픽 증가 가능
- 요청주소 http://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty
- 서비스URL http://apis.data.go.kr/B552584/ArpltnInforInqireSvc
- 필수값 : 서비스키, 시도명
url += "&sidoName=서울”
이렇게 쓰면 안된다
왜냐하면, 서울 → 한글 깨지니깐
그래서 따로 encode처리로 + 연결시킨다
URLEncoder에서 제공하는 encode사용
url += "&sidoName=" + URLEncoder.encode("서울", "UTF-8");
서버말고 java로 실행시키면 만든 url 나올거임
http://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty?serviceKey=서비스키&sidoName=서울&returnType=xml
이 링크를 서버 켜서 url 넣어주면
에러나옴!
왜? 서비스키가 안 넣어줬으니깐!
그래서 서비스키 넣어주기
1) HttpURLConnection 객체를 활용해서 OpenAPI 요청 절차
(1) 요청 할 주소를 전달해서 java.net.URL 객체 생성하기
URL requestUrl = new URL(url);
(2) 생성된 URL 객체를 가지고 HttpUrlConnection 객체 얻어내기
HttpURLConnection urlConn = (HttpURLConnection)requestUrl.openConnection();
- 강제로 다운캐스팅 작업 필요
(3) 요청시 필요한 Header 설정하기
urlConn.setRequestMethod("GET");
(4) 해당 OpenAPI 서버로 요청 보낸 후 입력스트림을 통해 응답데이터 받기
BufferedReader br = new BufferedReader(new InputStreamReader(urlConn.getInputStream()));
- 한 줄 단위로 읽고 싶다 → BufferedReader를 사용
- 근데 이 BufferedReader는 보조스트림이어서 단독으로 사용 못함 → 기반 스트림(입력스트림)
- urlConn.getInputStream()
근데 InputStream, BufferReader는 바이트, 문자열
즉 서로 자료형이 달라서 바로 사용 못 함
중간에 연결해야한다
InputStreamReader 사용
💡 순서
BufferReader - InputStreamReader - InputStream
Tip💡 Scanner vs BufferedReader
Scanner는 타입을 가공하기에 속도가 느리지만 원하는 타입으로 받을 수 있기에 편리하다
BufferedReader는 타입이 무조건 String이기에 속도가 훨씬 더 빠르다
중간에 버퍼를 두어 한번에 묶어 보내는 것이 더 효율적이고 빠른 방법이다.
전역변수로 가져오기
① 한 줄로 가져오기 위해
String line;
② 한 문자열로 가져오기 위해
String responseText = ””;
while(조건문 true, false)만 들어와야 하는데
while( (line = br.readLine()) ≠ null){
① System.out.println("line" + line);
② 한문자열 모드
responseText += line;
(5) 다 사용한 스트림 객체 반납하기
br.close(); urlConn.disconnect();
자바 실행 확인
json으로 받고 싶으면?
url+=”&returnType=json”으로 변경
파싱 : 큰 자료에서 원하는 정보만 가공하고 뽑아 원하는 때에 불러올 수 있게 하는 것
JsonObject, JsonArray 이용해서 파싱할 수 있음
JsonObject는 gson이 필요함
💡 GSON : json 구조를 직렬화된 데이터를 java 객체
역직렬화, 직렬화 해주는 자바 라이브러리
왜 파싱하냐?
문자열은 못 꺼내니깐!
- response 속성 접근
// response 속성 접근 JsonObject responseObj = totalObj.getAsJsonObject("response"); System.out.println("responseObj : " + responseObj);
- body 속성 접근, body는 responseObj에서 가져오기// body 속성 접근 JsonObject bodyObj = responselObj.getAsJsonObject("body"); System.out.println("SbodyObj : " + bodyObj);하나씩 파고 들어가는 중 = 원하는 데이터로 접근중
totalCount 속성 접근
// totalCount 속성 접근
int totalCount = bodyObj.get("totalCount").getAsInt;
System.out.println("totalCount : " + totalCount);totalCount : int이기에 int로 저장
그리고 json이 아니기에 그냥 get
items은 배열
배열은 jsonArray로 가져오기
items 속성 접근
// items(JsonArray형태) 속성 접근
JsonArray itemArr = bodyObj.getAsJsonArray("items");
// System.out.println("itemArr : " + itemArr);배열 하나하나 안에 있는 자료형 : 객체
json 배열이라서 length가 아니라, 사이즈로 해야한다
안에 있는 객체 꺼내오는 법
ArrayList<Air> list = new ArrayList<Air>(); for(int i=0; i<itemArr.size(); i++) { JsonObject item = itemArr.get(i).getAsJsonObject();
Air air = new Air();
air.setStationName(item.get("stationName").getAsString());
air.setDataTime(item.get("dataTime").getAsString());
air.setKhaiValue(item.get("khaiValue").getAsString());
air.setPm10Value(item.get("pm10Value").getAsString());
air.setSo2Value(item.get("so2Value").getAsString());
air.setCoValue(item.get("coValue").getAsString());
air.setNo2Value(item.get("no2Value").getAsString());
air.setO3Value(item.get("o3Value").getAsString());
list.add(air);
}객체를 만들어서 넣어주기
✔️opendata(run) → AirPollutionJavaAppRun.java
public class AirPollutionJavaAppRun {
// 발급받은 인증키 변수 처리
public static final String SERVICEKEY = "~~~";
public static void main(String[] args) throws IOException { // UnsupportedEncodingException의 부모로 예외 처리
// OpenAPI 서버로 요청하고자 하는 url 작성
String url = "http://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty";
url += "?serviceKey=" + SERVICEKEY; // 서비스키가 제대로 부여되지 않았을 경우 => SERVICE_KEY_IS_NOT_REGISTERED_ERROR 발생
url += "&sidoName=" + URLEncoder.encode("서울", "UTF-8");
url += "&returnType=json";
// System.out.println(url);
// ** HttpURLConnection 객체를 활용해서 OpenAPI 요청 절차 **
// 1. 요청할 주소를 전달해서 java.net.URL 객체 생성하기
URL requestUrl = new URL(url);
// 2. 생성된 URL 객체를가지고 HttpUrlConnection 객체 얻어내기
HttpURLConnection urlConn = (HttpURLConnection)requestUrl.openConnection();
// 3. 요청 시 필요한 Header 설정하기
urlConn.setRequestMethod("GET");
// 4. 해당 OpenAPI 서버로 요청 보낸 후 입력 스트림을 통해 응답데이터 받기
BufferedReader br = new BufferedReader( new InputStreamReader( urlConn.getInputStream() ) ); // Reader 문자(2바이트) / InputStream 바이트(1바이트)
String responseText = "";
String line;
while((line=br.readLine()) != null) { // 한 줄씩 읽어 올 데이터가 있는 동안 반복
// System.out.println(line);
responseText += line;
}
// System.out.println(responseText);
/*
{
"response":
{
"body":
{
"totalCount":40,
"items":
[
{
"so2Grade":"1",
"coFlag":null,
"khaiValue":"52",
"so2Value":"0.003",
"coValue":"0.5",
"pm10Flag":null,
"o3Grade":"1",
"pm10Value":"15",
"khaiGrade":"2",
"sidoName":"서울",
"no2Flag":null,
"no2Grade":"2",
"o3Flag":null,
"so2Flag":null,
"dataTime":"2023-08-23 14:00",
"coGrade":"1",
"no2Value":"0.032",
"stationName":"정릉로",
"pm10Grade":"1",
"o3Value":"0.029"
},
{
"so2Grade":"1",
"coFlag":null,
"khaiValue":"-",
"so2Value":"0.002",
"coValue":"0.5",
"pm10Flag":null,
"o3Grade":"2",
"pm10Value":"3",
"khaiGrade":null,
"sidoName":"서울",
"no2Flag":null,
"no2Grade":"1",
"o3Flag":null,
"so2Flag":null,
"dataTime":"2023-08-23 14:00",
"coGrade":"1",
"no2Value":"0.013",
"stationName":"도봉구",
"pm10Grade":"1",
"o3Value":"0.039"
}, ...
]
}
}
}
*/
// JsonObject, JsonArray 이용해서 파싱할 수 있음 (gson 라이브러리 필요)
// json 데이터를 원하는 데이터만 추출하여 VO에 담기
// 응답데이터 text를 JsonObject화 시키는 작업 필요 (파싱)
JsonObject totalObj = JsonParser.parseString(responseText).getAsJsonObject();
// System.out.println("total : " + totalObj);
// response 속성 접근
JsonObject responseObj = totalObj.getAsJsonObject("response");
// System.out.println("response : " + responseObj);
// body 속성 접근
JsonObject bodyObj = responseObj.getAsJsonObject("body");
//System.out.println("body : " + bodyObj);
// totalCount 속성 접근
int totalCount = bodyObj.get("totalCount").getAsInt();
// System.out.println("totalCount : " + totalCount);
// items(JsonArray형태) 속성 접근
JsonArray itemArr = bodyObj.getAsJsonArray("items");
// System.out.println("itemArr : " + itemArr);
ArrayList<Air> list = new ArrayList<>();
for(int i=0; i<itemArr.size(); i++) {
// items에 담겨 있는 item 객체 하나씩 추출
JsonObject item = itemArr.get(i).getAsJsonObject();
// System.out.println(item);
Air air = new Air();
air.setStationName(item.get("stationName").getAsString());
air.setDataTime(item.get("dataTime").getAsString());
air.setKhaiValue(item.get("khaiValue").getAsString());
air.setPm10Value(item.get("pm10Value").getAsString());
air.setSo2Value(item.get("so2Value").getAsString());
air.setCoValue(item.get("coValue").getAsString());
air.setNo2Value(item.get("no2Value").getAsString());
air.setO3Value(item.get("o3Value").getAsString());
list.add(air);
}
// System.out.println("list : " + list);
// list에 담긴 VO 객체 확인
for(Air air : list) {
System.out.println("air : " + air);
}
// 5. 다 사용한 스트림 객체 반납하기
br.close();
urlConn.disconnect();
}
}✔️webapp → index.jsp(html)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<title>대기오염 공공데이터</title>
</head>
<body>
<h1>실시간 대기 오염 정보</h1>
지역 :
<select id="location">
<option>서울</option>
<option>부산</option>
<option>대전</option>
</select>
<button id="btn1">해당 지역 대기 오염 정보</button>
<br>
<br>
<table border="1" id="result1">
<thead>
<tr>
<th>측정소명</th>
<th>측정일시</th>
<th>통합대기환경수치</th>
<th>미세먼지농도</th>
<th>아황산가스농도</th>
<th>일산화탄소농도</th>
<th>이산화탄소농도</th>
<th>오존농도</th>
</tr>
</thead>
<tbody></tbody>
</table>
<hr>
<h1>실시간 지진해일 긴급 대피장소</h1>
<button id="btn2">실시간 지진해일 긴급 대피장소 정보</button>
<br>
<br>
<table border="1" id="result2">
<thead>
<tr>
<th>시도명</th>
<th>시군구명</th>
<th>대피지구명</th>
<th>대피장소명</th>
<th>주소</th>
<th>경도</th>
<th>위도</th>
<th>수용가능인원수</th>
<th>대피소 분류명</th>
</tr>
</thead>
<tbody></tbody>
</table>
✔️webapp → index.jsp(js)
<script>
$(function() {
$("#btn1").click(
function() {
/* 응답 데이터를 json 형식으로 응답받을 때
$.ajax({
url : "air",
data : {location : $("#location").val()},
success : function(data) {
// console.log(data);
// console.log(data.response.body.items)
const itemArr = data.response.body.items;
let value = "";
for(let item of itemArr){
// console.log(item);
value += "<tr>"
+ "<td>" + item.stationName + "</td>"
+ "<td>" + item.dataTime + "</td>"
+ "<td>" + item.khaiValue + "</td>"
+ "<td>" + item.pm10Value + "</td>"
+ "<td>" + item.so2Value + "</td>"
+ "<td>" + item.coValue + "</td>"
+ "<td>" + item.no2Value + "</td>"
+ "<td>" + item.o3Value + "</td>"
+ "</tr>"
}
$("#result1 > tbody").html(value);
}, error : function() {
console.log("통신 실패");
}
}) */
// -----------------------------------------------------------------------------
// 응답 데이터를 xml 형식으로 받을 때
$.ajax({
url : "air",
data : {
location : $("#location").val()
},
success : function(result) {
console.log(result);
// $(요소명).find(매개변수)
// - 기준이 되는 요소의 하위 요소들 중 특정 요소를 찾을 때 사용
// - html, xml은 같은 markup language이기 때문에 사용 가능하다.
// console.log($(result).find("item"));
// xml 형식의 응답 데이터를 받았을 때
// 1. 넘겨 받은 데이터를 $() 제이쿼리화 시킨 후
// 응답 데이터 안에 실제 데이터가 담겨 있는 요소 선택하기
const itemArr = $(result).find("item");
// 2. 반복문을 통해 실제 데이터가 담긴 요소들에 접근해서 동적으로 요소 만들기
let value;
itemArr.each(function(index, item) {
// console.log(item);
console.log($(item).find("stationName")
.text());
value += "<tr>" + "<td>"
+ $(item).find("stationName")
.text() + "</td>" + "<td>"
+ $(item).find("dataTime").text()
+ "</td>" + "<td>"
+ $(item).find("khaiValue").text()
+ "</td>" + "<td>"
+ $(item).find("pm10Value").text()
+ "</td>" + "<td>"
+ $(item).find("so2Value").text()
+ "</td>" + "<td>"
+ $(item).find("coValue").text()
+ "</td>" + "<td>"
+ $(item).find("no2Value").text()
+ "</td>" + "<td>"
+ $(item).find("o3Value").text()
+ "</td>" + "</tr>"
})
// 3. 동적으로 만들어낸 요소를 화면에 출력
$('#result1 > tbody').html(value);
},
error : function() {
console.log("통신 실패");
}
}) // ajax 끝
})
$("#btn2").click(
function() {
$.ajax({
url : "shelterList",
success : function(result) {
console.log(result);
console.log(result.TsunamiShelter[1].row);
const shelterArr = result.TsunamiShelter[1].row;
let value = "";
for(let shelter of shelterArr){
console.log(shelter);
value += "<tr>"
+ "<td>" + shelter.sido_name + "</td>"
+ "<td>" + shelter.sigungu_name + "</td>"
+ "<td>" + shelter.remarks + "</td>"
+ "<td>" + shelter.shel_nm + "</td>"
+ "<td>" + shelter.address + "</td>"
+ "<td>" + shelter.lon + "</td>"
+ "<td>" + shelter.lat + "</td>"
+ "<td>" + shelter.shel_av + "</td>"
+ "<td>" + shelter.shel_div_type + "</td>"
+ "</tr>"
}
$("#result2 > tbody").html(value);
},
error : function() {
console.log("통신 실패");
}
})
}
)
})
</script>
</body>
</html>2) jquery ajax 방식
$("#btn1").click(function(){
$.ajax({
url : "air", // 주소는 내 마음대로 정할 수 있다
data : {location : $("#location").val()},
success : function(data){ console.log(data) },
error : function(){ console.log("통신 실패") }
})
})✔️opendata(controller) → openAPIController.java
@Controller
public class OpenAPIController {
// 발급받은 인증키 변수 처리
public static final String SERVICEKEY = "내서비스키";
// json 형식으로 대기오염 OpenAPI 활용하기
@ResponseBody
// @RequestMapping(value = "air", produces = "application/json; charset=UTF-8")
public String airMethod(String location) throws IOException {
// OpenAPI 서버로 요청하고자 하는 url 작성
String url = "http://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty";
url += "?serviceKey=" + SERVICEKEY; // 서비스키 추가
url += "&sidoName=" + URLEncoder.encode(location, "UTF-8"); // 지역명 추가(한글이 들어가면 인코딩 처리해야 함)
url += "&returnType=json"; // 리턴 타입
url += "&numOfRows=10"; // 결과 개수
// 1. 작성된 url 정보를 넣어서 url 객체 생성
URL requestUrl = new URL(url);
// 2. 생성된 URL 객체로 URLConnection 생성
HttpURLConnection urlConn = (HttpURLConnection) requestUrl.openConnection();
// 3. 요청 시 필요한 Header 설정하기
urlConn.setRequestMethod("GET");
// 4. 해당 OpenAPI 서버로 요청 후 입력 스트림을 통해서 응답데이터 읽어 오기
BufferedReader br = new BufferedReader( new InputStreamReader( urlConn.getInputStream() ) );
String responseText = "";
String line;
while((line=br.readLine()) != null) {
responseText += line;
}
// 5. 다 사용한 스트림 반납 및 연결 해제
br.close();
urlConn.disconnect();
System.out.println(responseText);
return responseText;
}요청 받았으니깐 반환해준다
반환하고 화면 만들어서 tbody 안에 넣어주면 된다
redirect도 돌아가는건 아님,
완전 돌아가는 방법은 @ResponseBody임
근데, 한글이 들어가 있으니깐 produces 사용해야 한다
@RequestMapping(value = "air", produces = "application/json; charset=UTF-8")
dto처리 이런거 필요없고, 그냥 요청만 전달하면 된 것
이제 값 오는 거 확인하면 화면 만들어주기
↑ 값 오는 것 확인 이제 화면에 뿌려주기let value = ""; for (let item of itemArr) { value += "<tr>"; + "<td>" + item.stationName + "</td>" + "<td>" + item.dataTime + "</td>" + "<td>" + item.khaiValue + "</td>" + "<td>" + item.pm10Value + "</td>" + "<td>" + item.so2Value + "</td>" + "<td>" + item.coValue + "</td>" + "<td>" + item.no2Value + "</td>" + "<td>" + item.o3Value + "</td>" + "</tr>" }jquery에선 html(value) 사용
tbody안에 넣기
$("#result1 > tbody").html(value);
3) xml 방식
✔️opendata(controller) → openAPIController.java
// xml 형식으로 대기오염 OpenAPI 활용하기
@ResponseBody
@RequestMapping(value="air", produces="text/xml; charset=UTF-8")
public String airPollution(String location) throws IOException {
// OpenAPI 서버로 요청하고자 하는 url 작성
String url = "http://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty";
url += "?serviceKey=" + SERVICEKEY; // 서비스키 추가
url += "&sidoName=" + URLEncoder.encode(location, "UTF-8"); // 지역명 추가(한글이 들어가면 인코딩 처리해야 함)
url += "&returnType=xml"; // 리턴 타입
url += "&numOfRows=20"; // 결과 개수
// 1. 요청할 주소를 전달해서 java.net.URL 객체 생성하기
URL requestUrl = new URL(url);
// 2. 생성된 URL 객체로 URLConnection 생성
HttpURLConnection urlConn = (HttpURLConnection) requestUrl.openConnection();
// 3. 요청 시 필요한 Header 설정하기
urlConn.setRequestMethod("GET");
// 4. 해당 OpenAPI 서버로 요청 후 입력 스트림을 통해서 응답데이터 읽어 오기
BufferedReader br = new BufferedReader( new InputStreamReader( urlConn.getInputStream() ) );
String responseText = "";
String line;
while((line=br.readLine()) != null) {
responseText += line;
}
// 5. 다 사용한 스트림 반납 및 연결 해제
br.close();
urlConn.disconnect();
System.out.println(responseText);
return responseText;
}
// xml 형식으로 지진해일 대피소 OpenAPI 활용하기
@ResponseBody
@RequestMapping(value = "shelterList", produces = "application/json; charset=UTF-8")
public String shelterList() throws IOException {
System.out.println("test");
String url = "http://apis.data.go.kr/1741000/TsunamiShelter3/getTsunamiShelter1List";
url += "?ServiceKey=" + SERVICEKEY;
url += "&pageNo=1";
url += "&numOfRows=20";
url += "&type=json";
URL requestUrl = new URL(url);
HttpURLConnection urlConn = (HttpURLConnection) requestUrl.openConnection();
urlConn.setRequestMethod("GET");
BufferedReader br = new BufferedReader( new InputStreamReader(urlConn.getInputStream()) );
String responseText = "";
String line;
while((line=br.readLine()) != null) {
responseText += line;
}
br.close();
urlConn.disconnect();
System.out.println(responseText);
return responseText;
}
}
✔️webapp → index.jsp(js)
const itemArr = $(result).find("item");
// 2. 반복문을 통해 실제 데이터가 담긴 요소들에 접근해서 동적으로 요소 만들기
let value;
itemArr.each(function(index, item) {
// console.log(item);
console.log($(item).find("stationName")
.text());
value += "<tr>" + "<td>"
+ $(item).find("stationName")
.text() + "</td>" + "<td>"
+ $(item).find("dataTime").text()
+ "</td>" + "<td>"
+ $(item).find("khaiValue").text()
+ "</td>" + "<td>"
+ $(item).find("pm10Value").text()
+ "</td>" + "<td>"
+ $(item).find("so2Value").text()
+ "</td>" + "<td>"
+ $(item).find("coValue").text()
+ "</td>" + "<td>"
+ $(item).find("no2Value").text()
+ "</td>" + "<td>"
+ $(item).find("o3Value").text()
+ "</td>" + "</tr>"
})
// 3. 동적으로 만들어낸 요소를 화면에 출력
$('#result1 > tbody').html(value);
},
error : function() {
console.log("통신 실패");
}
}) // ajax 끝
})
xml로 가져오면 이렇게 나온다
#document가 나온 이유 = result
그래서
console.log($(*result*).find("item"))
each()메소드는 배열과 length 속성을 갖는 배열과 유사 배열 객체들을 index를 기준으로 반복
💡 순서는 비슷한데, xml vs json 차이
find() 함수와 children() 함수의 차이점
- find() 함수는 선택된 태그(객체)의 모든 자식태그들을 검색해서 찾는 것
- children() 함수는 선택된 태그(객체)의 바로 1단계 아래 자식을 찾는것.
4) json 방식
$("#btn1").click(function () {
응답 데이터를 json 형태로 받을 때
$.ajax({
url: "air", // 주소는 내 마음대로 정할 수 있다
data: { location: $("#location").val() },
success: function (result) {
// console.log(result.response.body.items);
const itemArr = result.response.body.items;
let value = "";
for (let item of itemArr) {
value += "<tr>"
+ "<td>" + item.stationName + "</td>"
+ "<td>" + item.dataTime + "</td>"
+ "<td>" + item.khaiValue + "</td>"
+ "<td>" + item.pm10Value + "</td>"
+ "<td>" + item.so2Value + "</td>"
+ "<td>" + item.coValue + "</td>"
+ "<td>" + item.no2Value + "</td>"
+ "<td>" + item.o3Value + "</td>"
+ "</tr>"
}
$("#result1 > tbody").html(value);
},
error: function () { console.log("통신 실패") }
})
$("#btn1").click(function () {
$.ajax({
url: "air", // 주소는 내 마음대로 정할 수 있다
data: { location: $("#location").val() },
success: function (result) {
console.log(result);
const itemArr = $(result).find("item");
let value = "";
// 2. 반복문을 통해 실제 데이터가 담긴 요소들에 접근해서 동적으로 요소 만들면 된다
itemArr.each(function (index, item) {
value += "<tr>"
+ "<td>" + $(item).find("stationName").text() + "</td>"
+ "<td>" + $(item).find("dataTime").text() + "</td>"
+ "<td>" + $(item).find("khaiValue").text() + "</td>"
+ "<td>" + $(item).find("pm10Value").text() + "</td>"
+ "<td>" + $(item).find("so2Value").text() + "</td>"
+ "<td>" + $(item).find("coValue").text() + "</td>"
+ "<td>" + $(item).find("no2Value").text() + "</td>"
+ "<td>" + $(item).find("o3Value").text() + "</td>"
+ "</tr>"
})
// 3. 동적으로 만들어낸 요소를 화면에 출력
$('#result1 > tbody').html(value);
},
error: function () {
console.log("통신 실패");
}
}) // ajax 끝
})
백틱(템플릿 리터럴) 사용으로!
Hello! My Name is oYJo