[Javascript] JSON과 open weather map API : 날씨 정보 가져오기

에고공 요새 자전거를 타느라 바빠서 블로그에 신경을 못 썼다. 오랜만에 글을 쓴다. 큐큐

 

코드를 작성할 때 통신 기능을 구현하는 경우가 많기 때문에 API 이해도가 높아야 한다. 그래서 open weather map API를 활용하면서 JSON 데이터를 다루는 법을 공부해보려고 한다.

JSON 이란?

JSON은 Javascript Object Notation의 줄임말이다. JSON은 문자 기반의 데이터 교환 형식이다. typeof 로 JSON의 데이터 타입을 확인하면 string이 나온다.

 

JSON의 구조는 객체 리터럴 작성법을 따르기 때문에 마치 객체처럼 생겼다. 하지만 객체와 달리 키에 꼭 큰따옴표가 있어야 하며, 값에도 꼭 작은 따옴표가 아닌 큰따옴표를 사용해야 한다. 그리고 데이터를 교환하기 위해 사용하는 형식이기 때문에 undefined, NaN, Infinity와 같은 값들은 사용할 수 없다.

 

{
	"language" : "javascript",
   	"laptop" : "mac M2"
}

 

JSON 매서드

통신을 할 때 응답으로 보통 JSON 파일이 온다. 이 파일을 원하는 대로 가공하기 위해서는 자바스크립트의 객체로 바꿔줘야 한다. 반대로 자바스크립트의 값이나 객체를 요청 헤더에 담아 보내려면 JSON 문자열로 변환을 해야 한다. 이 두 가지를 위해 필요한 매서드가 JSON.parse()와 JSON.stringify() 이다. 처음에는 stringify와 parse를 어떤 상황에서 사용해야하는지 헷갈렸는데 JSON의 타입이 문자열이고, JSON 문자열화해야 할 때 JSON.stringify()를 사용한다는 걸 이해하니 더이상 헷갈리지 않는다!

 

JSON.parse()와 JSON.stringify()

 

만약 result.json()을 하면 자동으로 응답이 JSON으로 구문 분석되기 때문에 JSON.parse()를 사용할 필요가 없다. 아래 코드에서 1과 2는 모두 같은 결과물이 출력된다. 

 

// 1
fetch(
  "https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${APIKEY}"
)
  .then((res) => res.text())
  .then((result) => JSON.parse(result));

// 2
fetch(
  `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${APIKEY}`
)
  .then((res) => res.json())
  .then((result) => {
    console.log(result);
  });

Сurrent weather and forecast - OpenWeatherMap

 

API Call 방법

사이트에서 Current Weather Data API 문서를 살펴보자.

 

https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}

파라미터 세부설명

 

파라미터 중에서 lat과 lon, 그리고 API key는 필수적이다.

lat 은 위도, lon 은 경도이고 API key는 사이트에 회원가입하면 얻을 수 있다.

 

위도와 경도는 임시로 하드코딩해놓았는데 다음에 쓸 글에서 현 위치 정보의 날씨를 가져오는 코드를 작성할 예정이다.

 

const APIKEY = "APIKEY를 넣으면 된다."
const lat = 37.65835063513225;
const lon = 126.83203459217358;

fetch("https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${APIKEY}')
	.then((res) => res.json())
  	.then((result) => console.log(result))

 

temp에서 온도가 297.97로 표현된 걸 보면 우리나라에서 쓰는 섭씨 온도가 아니라는 걸 알 수 있다. 섭씨 단위로 바꾼 결과를 보려면 파라미터에서 units을 활용하면 된다.  {APIKEY} 뒤에 &units=metric 을 써주면 미터법으로 계산된 온도를 확인할 수 있다. url만 하단과 같이 쓰면 된다.

 

 ` https://api.openweathermap.org/data/2.5/weatherlat=${latitude}&lon=${longitude}&appid=${APIKEY} &units=metric`

 

블로그 글을 쓸 때마다 너무 열심히 써서 지칠 때가 있었다. 앞으로는 분량을 좀 줄이되 자주 쓰도록 노력해야겠다. 홧팅~!!