[HTML] OpenAPI 다루기 - function, fetch

 'fetch' 는 엄밀히 말해 'Javascript' 의 메서드이지만 HTML 문서에서 외부의 리소스를 가져올 때 사용하게 되므로 일단은 'HTML' 카테고리에 정리해 보았다.

 

1. function

<script>
    function openApi() {
    	// 함수 실행 코드
    }
</script>

 

'함수' 를 정의할 때 사용되는 키워드

 Javascript 에서 함수를 정의할 때는 'function' 키워드와 함수명, 소괄호가 필요하다!

• Java 의 경우 '접근제어 반환타입 함수명(파라미터) { 함수 수행 코드};' 라면 Javascript 에서는 'function 함수명(파라미터) { 함수 수행 코드 };' 인 것이다.
• 'function 의 실행 코드는 누군가(?) 해당 함수를 호출하면 수행된다.
• Javascript 의 기능이므로 HTML 문서내 <script> 영역에 작성해야 생성한 함수가 제대로 작동한다.

 

 

2. fetch( )

<script>
    function openApi() {
        let url = 'http://spartacodingclub.shop/sparta_api/seoulair';	// 서울 미세먼지농도 OpenAPI
        fetch(url).then(res => res.json()).then(data => {
            let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM'];
            console.log(mise);
        })
    }
</script>

웹 브라우저 콘솔 창 결과

OpenAPI 의 일부 데이터

서버에서 리소스를 가져오는 프로세스를 수행

 HTML 문서 외부의 리소스(=자원, 데이터)를 가져올 때 사용한다!

• 예시를 보면 알겠지만 '서울시 미세먼지 농도' 에 대한 데이터를 다루는 OpenAPI 를 사용하였다. 외부의 데이터를 가져와 해당 데이터를 가공한 결과 데이터를 만든 것이다.
• Javascript 메서드이므로 HTML 문서의 <script> 영역 안에 작성해야 한다.
• 'fetch()' 의 '()' 안에는 'URL' 정보를 입력하여 외부 리소스와 HTML 문서를 연결(웹 통신 요청)한다.
• '.then(res => res.json())' 에서는 데이터를 'res' 라고 지칭할 것을 지정, 해당 이름으로 '.json' 화 한다.
• '.then(data => { })' 에서는 위에서 'json' 화한 데이터에 'data' 이란 이름을 붙여 '{ }' 안에서 해당 데이터를 다룬다.
• 'console.log()' 의 경우 웹 브라우저의 개발자 모드(=F12)의 콘솔에서 확인할 수 있는 로그를 출력해 준다.
• 내가 예시로 사용한 데이터는 한 데이터에 여러 데이터가 들어있는 구조이기에 Java 의 배열을 다루는 것처럼 '[ ]' 안에 데이터 항목이나 인덱스 값을 넣어 특정 데이터를 찾을 수 있게 작성했다. 예시는 가장 첫 번째 데이터의 미세먼지 농도를 가져와 콘솔에 출력한 것이다.

 

 

3. 정리

 걱정한 것과 다르게 상당히 쉽게 OpenAPI 소스를 HTML 문서에 가져와 사용할 수 있었다. 물론 필요한 소스를 제대로 다루려면 해당 소스에 대한 이해가 더 필요하고 그에 따라 데이터를 가공하는 Javascript 메서드에 대해서도 더 알아야 할 필요가 있지만 이번은 HTML 문서에서 어떻게 외부의 리소스를 가져오고 다루게 되는지 알아보기 위함이므로 이후에 추가적으로 다루게 될 일이 있다면 학습을 통해 정리하겠다.

---

참고 문서

• JS Tutorial - w3schools
• Web APIs - w3schools