JavaScript_day3

#3.8 ~ #3.11

아래 강의 중 '바닐라 JS로 크롬 앱 만들기'를 보고 배운 것과 모르는 것을 찾아 정리한 내용입니다.

https://academy.nomadcoders.co/courses

Academy

 

 

1. NaN (Not a Number)

5개의 배경사진을 1~5의 숫자로 저장한 뒤 random 함수를 통해 사진을 불러오는 과정에서 파일을 찾을 수 없다는 오류가 났다. 그리고 그 오류에는 NaN이라는 메세지가 있었다. 찾아보니 숫자가 아니라는 뜻의 오류 메세지였다. 

 

콘솔 창을 통해 디버깅을 해보니 Math의 random 메서드를 부르는 과정에서 NaN 오류가 났던 것이다. random은 메서드로 Math.random() 이렇게 호출을 해야 하는데, 실수로 Math.random 이렇게 호출을 해서 숫자가 아닌 값이 나온 것이다. 이 실수를 통해 자바스크립트의 표준 내장 객체인 NaN에 대해 알 수 있었다.

console 화면

 

 

2. API (Application Programming Interface)

응용 프로그램 프로그래밍 인터페이스(API)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 즉, 다른 서버로부터 쉽게 데이터를 가져올 수 있는 수단이라고 보면 된다. API를 제공하는 웹사이트를 통해 우리는 데이터를 얻을 수 있고, 이렇게 자바스크립트를 이용해서 특정 웹사이트(url)을 호출하는 것이 자바스크립트가 강력해진 이유라고 할 수 있다. 가져온 데이터를 새로고침 없이 나의 웹사이트에 적용시킬 수 있기 때문이다. 예를 들어 우리가 웹사이트를 새로고침하지 않고도 실시간으로 메일이 오는것을 보면 쉽게 이해할 수 있다. 

 

그럼 어떻게 데이터를 얻는가? fetch라는 것을 사용한다. fetch()안에 가져올 데이터를 https://와 함께 넣어주면된다. 여기서 주의할 것은 따옴표(' ')가 아니라 백틱(` `)을 이용한다는 것이다. 추가적으로, 데이터가 넘어오는데는 시간이 걸리는 경우가 있다. 나의 웹사이트로 데이터가 완전히 들어오지 않았는데 다음 동작이 작동하면 문제가 생기기 때문에 이를 제어하는 것이 필요하다. 이때 사용하는 것이 then 이다. then은 데이터가 우리한테 완전히 넘어왔을 때 함수를 하나 호출

하는 기능을 한다. fetch가 완료된 이후 then이 실행된다.

 

이 강의에서는 현재 위치 정보를 불러오기 위해 navigator API를 사용했다. openweathermap이라는 사이트에서 데이터를 받아올 것이고, 이를 사용하기 위해서는 API의 key값이 필요하다. 

function getWeather(lat, lng) {
    fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`
    )
    .then(function(response) {
        return response.json();
    })
    .then(function(json){
        const temperature = json.main.temp;
        const place = json.name;
        weather.innerText = `Temp: ${temperature}℃ @ Loct: ${place} `
    });
}

 

#reference

https://ko.wikipedia.org/wiki/API