[스파르타코딩클럽] 웹개발 종합반 - 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);
});

이 함수들을 만들어 적용해 준 결과

 

다음과 같이 일정시간마다 자동으로 날씨, 시간, 명언을 업데이트해 주는 웹페이지를 만들 수 있었다.