Fetch API, JSON, GET 요청 / jQuery ready(), toggle()

내일배움캠프: Node.js_4기

3일차 TIL

~오늘의 수강 과목~

1. 사전캠프: 왕초보 웹개발 종합반 3주차 (이범규 튜터님)

_ Fetch API, JSON, GET 요청

_ 제이쿼리 메서드: ready(), toggle()

 

2. 특강: TIL 기초 (예병수 튜터님)

_ TIL의 목적, 작성법

---

Fetch API

데이터를 요청

API는 보안문제로 허락된 곳으로의 접근만 가능하지만

OpenAPI는 누구나 접근하고 가져올 수 있다

 

JSON

서울시 미세먼지 OpenAPI

서버 -> 클라이언트

데이터를 전달하는 표준 형식

(표준 형식이 필요한 이유: 데이터를 마구잡이로 전달하면 헷갈리기 때문)

key : value 형식으로 딕셔너리와 유사

쉽게 말해 텍스트 데이터를 긁어오는 방식

 

GET 요청

클라이언트 -> 서버

Daum 영화 웹페이지 주소로 보는 예시

분홍~하늘: 서버 주소 / 주황: 영화 정보

분홍색: 서버의 위치(=우리은행 용산지점)

하늘색: API(=은행 창구의 이름)

주황색: 데이터(=은행 창구에 가져가는 것) 'movieId는 68593번이다' 라는 의미

 

---

ready()

웹페이지가 전부 로드되면 자바스크립트가 실행될수 있도록 함

$(document).ready(function () {
	alert('안녕하세요');
})

해당 코드에서는 웹페이지가 로드되면 '안녕하세요' 창이 뜬다

 

toggle()

두 상태 사이를 전환 가능한 동작

해당하는 영역이 보이는 경우에는 보이지 않게 숨기고 <-> 숨겨져서 보이지 않는 경우에는 보일 수 있도록 전환

분홍색 [추억 저장하기] 버튼을 누르면 민트색 #postingbox 영역이 숨겨진다

버튼을 클릭해서 숨긴 뒤 검사하기로 #postingbox 코드를 확인해보면 display:none; 코드가 추가된 것을 확인 가능

 

 

---

과제: 서울의 기온을 OpenAPI로 가져와 웹페이지에 표시해보기

 

완성

 

$(document).ready(function () {
    let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
    fetch(url).then(res => res.json()).then(data => {
        let temperature = data['temp']
        $('#msg').text(temperature);
    })
})

 

HTML 코드

사용된 API

 

이전까지는 실습 과제가 나오면 바로 강사님을 따라가다가, 이번 실습과제부터는 완성된 예시를 보고 강의를 멈춘 다음 스스로 생각해서 작성하는 방식으로 해봤다.

코드는 맞게 입력했으나, console.log를 통해 데이터가 제대로 들어갔는지 확인하는 과정을 거치지 않았다.

앞으로의 습관을 위해서라도 기능 구현 전 잊지 말고 한번씩 확인해보기로!

 

---

이번 파트 역시 이론보다는 예시에 집중하며 복잡하게만 느껴졌던 데이터를 받는 행위에 대한 해석을 조금이나마 쉽게 알수있었다.

 

내일의 목표

1. 웹개발 종합반 강의 4주차 끝내기
2. 웹개발 종합반 강의 4주차 복습
3. 웹개발 종합반 강의 5주차 시작
4. 컴퓨터 앞에 10분 일찍 앉아보기

 

앞으로의 목표

1. TIL 작성 시간 단축
2. 집중할 수 있는 시간을 더 늘려보기 다시한번 강조!