웹개발 종합 - 자바스크립트

오늘 데일리미션은 SQL 과제의 복습이었기 때문에 미뤄두었던 인강의 진도를 나가기로 했다. 그리고 마침 오늘 진도가 자바스크립트를 활용하여 웹페이지를 꾸미는 것이기 때문에 오늘의 TIL주제로 적절할 것 같다는 생각이 들었다.

 

과제는 다음과 같다.

데일리 모토

데일리모토에 실시간 서울 날씨 API를 적용해보세요.

 

수업을 진행하면서 제작한 데일리 모토 사이트의 우측상단에 현재 서울의 날씨를 적용하면 된다.

let weather_url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
        fetch(weather_url)
            .then(res => res.json())
            .then(data => {
                console.log(data);

 

weather_url을 해당 서버으로 정의한다. 그리고 fetch를 통해서 해당 서버로부터 데이터를 가져온다. 그리고 그 응답을 JSON으로 변환 한 후 data 변수에 저장을 해서 콘솔창에 출력하도록 한다.

데일리 모토의 콘솔창

 

데이터가 정상적으로 콘솔창에 표시되는 것을 확인했다. 이제 해당 데이터를 프론트에 표시되도록 하면 된다.

 

우선 vscode로 돌아와서 현재온도를 표시하고 있는 부분을 찾아서 그 부분에 id를 설정해주자.

<p>날씨 맑음, 20ºC</p>
<p id = 'quoteweather'>날씨 맑음, 20ºC</p>

 

그 다음으로 temp라는 변수에 위에서 구한 현재온도를 입력한 후 설정한 id에 표시하도록 설정하면 된다.

let temp = data['temp']
                $('#quoteweather').text(`날씨 맑음, ${temp}°C`)

온도가 표시된 데일리 모토

 

마지막으로 현재 온도가 변화할 때 즉시 반영할 수 있도록 작성한 구문을 함수로 만들어준다. 

function currenttemp() {
            let weather_url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
            fetch(weather_url)
                .then(res => res.json())
                .then(data => {

                    let temp = data['temp']
                    $('#quoteweather').text(`날씨 맑음, ${temp}°C`)
                })
        }

 

이제 지속적으로 온도를 업데이트 하기 위해서 30분(180,000밀리초)마다, 그리고 페이지가 실행될때 자동으로 해당 함수가 작동하도록 설정을 해주면 된다.

setInterval(currenttemp, 1800000);
        currenttemp();