본문 바로가기
Backend/Servlet & JSP

[오픈 API ①] 공공 데이터 불러오기 (웹 개발 / 백엔드 / JSON / JSP / servlet / API / Gson)

by 비전공자 기록광 2021. 3. 21.
반응형

 

우리가 뭔가를 만들고자 할때 필요한 데이터들이 있다. 

 

데이터를 직접 크롤링 하는 건 많은 돈과 노력 시간이 든다. 그럴때 찾는게 무료데이터, 공공데이터가 있다.

 

공공데이터포털 (data.go.kr)

 

공공데이터 포털

국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datase

www.data.go.kr

서울 열린데이터광장 (seoul.go.kr)

 

서울 열린데이터광장

모든 서울시민을 위한 공공데이터 열린데이터광장에서 서울시와 연계 기관이 공개한 공공데이터를 확인하실 수 있습니다. 서울시와 관련된 다양한 공공데이터를 확인해 보세요.

data.seoul.go.kr

이 외에도 카카오 디벨로퍼, 네이버 디벨로퍼 등 다양하게 오픈 api 를 제공하는 사이트들이 있다.

 

개발자들이 오픈 API 를 쓰는 이유는 앞서 말했듯이 직접 크롤링하는 것보다 좋고, 매번 DB에 최신 데이터를 업데이트 하는 것보다 효율적이기 때문이다.

 

 

이번에는 공공데이터 사이트에서 오픈 API 데이터를 가져와 화면에서 보여주는 실습을 해보겠다. 

 

1. 필요한 데이터를 찾아서 다운받기 

나는 서울시 공공도서관의 정보를 받아오기로 했다.

 

서울특별시 공공도서관 현황정보> 데이터셋> 데이터 이용하기 | 서울열린데이터광장 (seoul.go.kr)

 

서울특별시 공공도서관 현황정보

서울특별시 각 자치구의 공공도서관의 현황정보 입니다.
도서관명, 구명, 주소, 전화번호, 홈페이지주소, 운영시간, 정기휴관일, 위치정보 등을 제공합니다.

data.seoul.go.kr

 

위의 이용방법대로 회원가입 후 인증키를 신청하고

샘플 URL 에 인증키와 요청하는 인자를 넣어 주고 다운받으면 된다.

나는 json 파일로 실습을 진행할 거라 json으로 해줬다.

 

 

++내용추가

 

만약 나는 다른 프로젝트에서 쓸 게 아니고 딱 실습할 데이터만 필요하다면 여기서 다운받아서 해도 된다. 

대신 업데이트가 안되는 점은 감안해야한다.

 

2. Dynamic web project를 새로 만들고 WebContent에 'json'파일을 만들어 다운받은 json 넣어주기

다운받은 서울시 공공도서관 정보 데이터.json을 프로젝트의 WebContent에 넣어줬다. 

그리고 이를 쉽게 원하는 데이터만 뽑아 쓸 수 있게 도와줄 라이브러리를 하나 넣어줬다.

내가 도서관 위치 정보와 전화번호 정보만 쓰고 싶다고 할때 그냥 당장 이 lib.json을 사용할 수 없다.

이럴때 위치 정보와 전화번호 정보만 뽑아서 가공 처리를 해야한다. 

 

gson 은 구글에서 만든 오픈 소스 자바 라이브러리로 json를 java object로 직렬화 혹은 그 반대로 역직렬화를 해준다.

 

3. 데이터 불러올 화면 준비

browser.html

 

controller인 servlet도 하나 만들어준다. 이번에는 xml 방식이 아닌 어노테이션 방식으로 해보겠다. 

그다음 Finish가 아닌 Next를 눌러 매핑을 바꿔준다.

 

 

libServlet.java

이러한 서블릿이 새로 생겼다. 

여기에 인코딩과 요청받을 변수까지 선언해준다. 

 

browser.html 로 가서 요청을 list 로 보내준다.

 

 

list 요청에 따라 libServlet에서 바로 liblist.jsp로 보내줬다.

 

 

liblist.jsp

이 jsp의 테이블에 json 데이터를 읽어와서 화면에 뿌려주겠다.

 

 

5. 데이터 불러오기

이제 json 데이터를 불러오려는데

① liblist.jsp에 직접 코드를 작성해서 데이터를 가져와줘도 되고

② 외부에 작성된 코드로 데이터를 불러와줘도 된다. 

 

내가 한건 후자의 방식이다.

 

jQuery 를 써서 불러오려고 jQuery를 다운받아 js 파일에 준비해줬다.

 

 

js 파일에 lib01.js 를 만들어주고 liblist.jsp 로 불러오기로 했다.

 

 

lib01.js

여기에는 이제 lib.json에 담긴 데이터 중 내가 원하는 데이터만 불러오는 코드를 작성하면 된다.

 

우리가 먼저 json에 들어있는 데이터의 구조를 보자면

 

'DESCRIPTION' 키와 값(json 데이터 1개),

'DATA' 키와 값(json 데이터 배열)

 

이렇게되어있다.

 

 

이걸 이제 getJSON( ) 으로 lib.json에 담긴 json을 data에 담고 

또 각각 key와 val 로 저장해줬다.

 

 

그리고 키 값에 맞게 

만약 'DESCRIPTION' 이면 liblist.jsp에서 미리 만들어준 <thead>에 넣어줄 값들을 적어준다. 

 

 

여기서 'DESCRIPTION' 내용이 잘려서 안보이지만 이렇다. 여기서 몇 개만 골라서 써줬다. 

 

"DESCRIPTION" : {"CHARGER_EMAIL":"담당자이메일","XCNTS":"위도","FOND_YEAR":"설립연도","LBRRY_SE_NAME":"도서관 구분명","LBRRY_INTRCN":"도서관 소개","FXNUM":"팩스번호","TFCMN":"교통편","TEL_NO":"전화번호","ADRES":"주소","FLOOR_DC":"층별 설명","GU_CODE":"구 코드","FDRM_CLOSE_DATE":"정기 휴관일","LON_GDCC":"대출안내","CODE_VALUE":"구명","OP_TIME":"운영시간","MBER_SBSCRB_RQISIT":"회원가입요건","LBRRY_SEQ_NO":"도서관 일련번호","HMPG_URL":"홈페이지 URL","YDNTS":"경도","LBRRY_NAME":"도서관명"},

 

또 키에는 'DESCRIPTION' 말고 'DATA' 도 있으니

'DESCRIPTION' 아닌 경우의 데이터도 받아온다.

 

근데 일단 'DATA'의 값들은 배열이기때문에 list 변수와 str 변수를 정의해줬다.

그리고 for 문으로 <tbody> 에 넣어줬다.

 

이 역시 잘려서 안보이지만 똑같이 보고 넣어주면 된다. (대소문자 구분 잘할 것)

 

 

여기까지 하고 실행을 해주면 이렇게 데이터가 잘 뜬다.

 

반응형

댓글