[스파르타코딩클럽] 웹개발 종합반 - 2주차 (2-8~HW)
먼저 JSON에 대하여 배웠다.
JSON은 다른 프로그래밍 언어들 사이에서 통신할 때 사용하는 데이터 양식이다.
JSON은 dictionary와 유사하게 Kye:Value로 이루어져 있다
클라이언트는 서버에게 두 가지 요청을 할 수 있는데, GET과 POST 두 가지가 있다.
GET 은 데이터 조회(Read)를 요청할 때
POST는 대이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때 사용된다.
GET의 사용
주소의 내용 중, '?'와 '&'표시가 있다.
? 는 이후에 전달할 정보들이 있다는 표기이며, &은 추가적으로 전달할 정보들이 있다는 의미이다.
예를 들어 google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8는
q = 아이폰, 즉 검색어가 아이폰이라는 정보와
sourceid =chrome, 브라우저가 크롬이라는 의미
ie=UTF-8은 인코딩 정보가 UTF-8이라는 의미가 포함된 것이다.
이러한 방식으로 정보를 전달하는 것을 백엔드와 프런트엔드 개발자가 미리 정해둔 약속이다.
fetch의 사용방법
fetch("주소"). then(변수명 => 변수명. json()). then(data => {console.log(data)})로 어떤 데이터가 있는지 출력가능하다.
GET 요청은 url뒤에 데이터를 붙여서 가져간다.
반대로 POST 요청은 data:{}에 넣어서 데이터를 가져간다.
fetch문을 사용하여, url로부터 데이터를 받아온 후, forEach와 같은 함수들을 사용하여 원하는 정보를 실시간으로 표기할 수 있다. 그렇기에 jquery 함수들에 대하여 잘 숙지하고 있어야 한다.
다음은 실시간으로 api들로부터 불러온 데이터들을 반영해 주는 코드이다.
function 현재시간표시() {
const 현재시간 = new Date();
const 시 = 현재시간.getHours();
const 분 = 현재시간.getMinutes();
$('#clock').text(`${시}시 ${분}분`);
}
function 명언표시() {
let url = "https://api.quotable.io/random";
fetch(url)
.then(res => res.json())
.then(data => {
$('#author').text(data['author']);
$('#content').text(data['content']);
});
}
function 날씨표시() {
let weather_url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
fetch(weather_url)
.then(res => res.json())
.then(data => {
$('#weather_icon').attr('src', data['icon']);
$('#weather_status').text(`${data['city']}, ${data['temp']}`);
});
}
$(document).ready(function () {
명언표시();
날씨표시();
setInterval(현재시간표시, 1000);
setInterval(명언표시, 10000);
setInterval(날씨표시, 3600000);
});
이 함수들을 만들어 적용해 준 결과
다음과 같이 일정시간마다 자동으로 날씨, 시간, 명언을 업데이트해 주는 웹페이지를 만들 수 있었다.