✅오늘의 한 일

• 웹개발 종합반 강의 3주차 끝내기
• 자바 중급 1편 강의 듣고 블로그 정리

💻오늘의 학습

웹개발 종합반 강의 3주차

Fetch 적용하기

3주차는 서울시 미세먼지 OpenAPI 를 가져와 화면에 띄우는 과정을 실습했다. 다음과 같은 fetch의 기본 골격을 가지고 구 이름과 해당 구의 미세먼지 상태를 콘솔에 띄워보았다.

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

OpenAPI URL을 넣고, RealtimeCityAir 아래 있는 row 를 돌면서 여러 개의 구 이름과 미세먼지 상태를 가져오도록 했다.

<script>
    function hey() {
        let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
        fetch(url).then(res => res.json()).then(data => {
            let rows = data['RealtimeCityAir']['row'];
            rows.forEach(a => {
                let gu_name = a['MSRSTE_NM'];
                let gu_mise = a['IDEX_NM'];
                console.log(gu_name, gu_mise);
            });
                
        })
    }
</script>

따라서 hey() 메서드가 실행되면, 콘솔에 다음과 같이 출력된다. 이제 이렇게 불러온 정보를 이전에 배운대로 화면에 띄우기만 하면 된다. 혹은 if-else 문을 이용해 미세먼지 수치가 높은 구는 빨간색으로 표시하는 등의 작업을 할 수 있다.

자바 강의

이번주는 섹션6 ~ 섹션7까지 블로그 정리 완료! 하지만 '날짜와 시간' 섹션은 양이 너무 많아서 분량 조절을 실패했다. 그래서 스터디 발표는 섹션6만 진행하고, 스터디원들과 협의해서 다음주에 섹션7 ~ 섹션9 까지 공부해오는 걸로 했다.

📝오늘의 회고

잠을 더 자고 싶더라도 일찍 일어나서 조금이라도 몸을 움직여야겠다. 하루종일 앉아있으니 몸도 축축 처지고 머리도 아프다. 설상가상으로 코가 꽉 막혀서 숨을 못쉬어서 컨디션 최악..🫠 병원도 가고 비타민도 먹고 운동도 꾸준히 할 것! 이번 주 내로 웹개발 강의는 모두 끝내고 주말에 한 번 정리하면서 복습해야겠다.

📌내일의 할 일

• 웹개발 종합반 강의 듣기
• 자바 중급 1편 강의 듣기