웹개발 기초(Fetch)

요청 보내기

Fetch 기본 골격

fetch("여기에 URL을 입력") // 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET!
	.then(res => res.json()) // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다
	.then(data => { 
		console.log(data) // 개발자 도구에 찍어보기
}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다

우리가 검색하고 엔터 치는것을 생각하면 됨.

데이터 처리

<script>
        fetch("http://spartacodingclub.shop/sparta_api/seoulair") // 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET!
            .then(res => res.json()) // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다
            .then(data => {
                let rows = data['RealtimeCityAir']['row']	// 실시간 도시 공기의 열에 접근하겠다.
                rows.forEach(element => {			// 반복문으로 하나씩 모든 구의 공기 정보를 조회하겠다.
                    console.log(element['MSRSTE_NM'])	// 구 조회
                    console.log(element['IDEX_MVL'])	// 미세먼지 수치 조회
                });
            }) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다
</script>

Fetch 연습

<script>
        function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulair")
                .then(res => res.json())
                .then(data => {
                    let rows = data['RealtimeCityAir']['row']
                    $('#names-q1').empty()      // names-q1에 예시로 적어놨던거 지우기
                    rows.forEach(element => {
                        let gu_name = element['MSRSTE_NM']
                        let gu_mise = element['IDEX_MVL']

                        // console.log(gu_name, gu_mise)
                        let temp_html = `<li>${gu_name}: ${gu_mise}</li>`       // console로 조회했던거 화면으로 프린트하기 위해 준비
                        $('#names-q1').append(temp_html)        // 프린트할곳 id선택해서 append하기
                    });
                })
        }
</script>