react-native에서 open weather api를 이용해 날씨 정보 가져오기

 

Weather API - OpenWeatherMap

위 사이트에서 무료 날씨 정보를 얻어올 것이다.

가입하고 Current Weather이나 3-hour Forecast 5 days 중 하나를 선택해 들어가 subscribe를 한다.

가만 읽어보니 이메일 인증은 필수인 것 같다. 최초 가입을 했다면 subscribe 후 가입한 이메일을 한 번 확인 할 것!

우측 상단에 내 영어 이름을 클릭해 [My API keys]로 들어가 나의 api 키를 복사해온다.

 

const response = await fetch(`https://api.openweathermap.org/data/2.5/forecast?lat=${latitude}&lon=${longitude}&appid=${API_KEY}`);


//결과
{"city": {"coord": {"lat": 숫자, "lon": 숫자}, "country": "KR", "id": 1835224, "name": "지역이름", "population": 인구수, "sunrise": 1693602141, "sunset": 1693648752, "timezone": 32400}, "cnt": 40, "cod": "200", "list": [{"clouds": [Object], "dt": 1693666800, "dt_txt": "2023-09-02 15:00:00", "main": [Object], "pop": 0, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693677600, "dt_txt": "2023-09-02 18:00:00", "main": [Object], "pop": 0, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693688400, "dt_txt": "2023-09-02 21:00:00", "main": [Object], "pop": 0, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693699200, "dt_txt": "2023-09-03 00:00:00", "main": [Object], "pop": 0.01, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693710000, "dt_txt": "2023-09-03 03:00:00", "main": [Object], "pop": 0.09, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693720800, "dt_txt": "2023-09-03 06:00:00", "main": [Object], "pop": 0.52, "rain": [Object], "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693731600, "dt_txt": "2023-09-03 09:00:00", "main": [Object], "pop": 0.99, "rain": [Object], "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693742400, "dt_txt": "2023-09-03 12:00:00", "main": [Object], "pop": 0.99, "rain": [Object], "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693753200, "dt_txt": "2023-09-03 15:00:00", "main": [Object], "pop": 0.71, "rain": [Object], "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693764000, "dt_txt": "2023-09-03 18:00:00", "main": [Object], "pop": 0.74, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693774800, "dt_txt": "2023-09-03 21:00:00", "main": [Object], "pop": 0, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693785600, "dt_txt": "2023-09-04 00:00:00", "main": [Object], "pop": 0, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693796400, "dt_txt": "2023-09-04 03:00:00", "main": [Object], "pop": 0.01, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693807200, "dt_txt": "2023-09-04 06:00:00", "main": [Object], "pop": 0.1, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693818000, "dt_txt": "2023-09-04 09:00:00", "main": [Object], "pop": 0.22, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 
1693828800, "dt_txt": "2023-09-04 12:00:00", "main": [Object], "pop": 0.18, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693839600, "dt_txt": "2023-09-04 15:00:00", "main": [Object], "pop": 0, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693850400, "dt_txt": "2023-09-04 18:00:00", 
"main": [Object], "pop": 0.28, "rain": [Object], "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693861200, "dt_txt": "2023-09-04 21:00:00", "main": [Object], "pop": 0.41, "rain": [Object], "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693872000, "dt_txt": "2023-09-05 00:00:00", "main": [Object], "pop": 0.32, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693882800, "dt_txt": "2023-09-05 03:00:00", "main": [Object], "pop": 0, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693893600, "dt_txt": "2023-09-05 06:00:00", "main": [Object], "pop": 0, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693904400, "dt_txt": "2023-09-05 09:00:00", "main": [Object], "pop": 0, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693915200, "dt_txt": "2023-09-05 12:00:00", "main": [Object], "pop": 0, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693926000, "dt_txt": "2023-09-05 15:00:00", "main": [Object], "pop": 0, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693936800, "dt_txt": "2023-09-05 18:00:00", "main": [Object], "pop": 0.09, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693947600, 
"dt_txt": "2023-09-05 21:00:00", "main": [Object], "pop": 0.36, "rain": [Object], "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693958400, "dt_txt": "2023-09-06 00:00:00", "main": [Object], "pop": 0.2, "rain": [Object], "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693969200, "dt_txt": "2023-09-06 03:00:00", "main": [Object], "pop": 0, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693980000, "dt_txt": "2023-09-06 06:00:00", "main": [Object], "pop": 0, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1693990800, "dt_txt": "2023-09-06 09:00:00", "main": [Object], "pop": 0.11, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1694001600, "dt_txt": "2023-09-06 12:00:00", "main": [Object], "pop": 0.11, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1694012400, "dt_txt": "2023-09-06 15:00:00", "main": [Object], "pop": 0, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1694023200, "dt_txt": "2023-09-06 18:00:00", "main": [Object], "pop": 0, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1694034000, "dt_txt": "2023-09-06 21:00:00", "main": [Object], "pop": 0, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1694044800, "dt_txt": "2023-09-07 00:00:00", "main": [Object], "pop": 0, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1694055600, "dt_txt": "2023-09-07 03:00:00", "main": [Object], "pop": 0, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1694066400, "dt_txt": "2023-09-07 06:00:00", "main": [Object], "pop": 0, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1694077200, "dt_txt": "2023-09-07 09:00:00", "main": [Object], "pop": 0, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}, {"clouds": [Object], "dt": 1694088000, "dt_txt": "2023-09-07 12:00:00", "main": [Object], "pop": 0, "sys": [Object], "visibility": 10000, "weather": [Array], "wind": [Object]}], "message": 0}

이런식으로 날씨 정보를 요청하면 된다.

 

처음에는 16day 날씨 정보를 받고싶어서 요청했는데 

{"cod": 401, "message": "Invalid API key. Please see https://openweathermap.org/faq#error401 for more info."}

api 키는 분명 있는데 잘못된 api 키라고 해서 당황하고, 많이 헤맸다...

무료가 따로 있다는 것을 잊지 말자...

 

 

어찌됐건 날씨 하루의 정보만 볼 수 있게 해보자

const response = await fetch(`https://api.openweathermap.org/data/2.5/forecast?lat=${latitude}&lon=${longitude}&appid=${API_KEY}`);
const json = await response.json();
console.log(json.list[0]);

//결과
{"clouds": {"all": 67}, "dt": 1693666800, "dt_txt": "2023-09-02 15:00:00", "main": {"feels_like": 299.13, "grnd_level": 1006, "humidity": 85, "pressure": 1012, "sea_level": 1012, "temp": 299.13, 
"temp_kf": 3.66, "temp_max": 299.13, "temp_min": 295.47}, "pop": 0, "sys": {"pod": "n"}, "visibility": 10000, "weather": [{"description": "broken clouds", "icon": "04n", "id": 803, "main": "Clouds"}], 
"wind": {"deg": 93, "gust": 0.92, "speed": 0.73}}

 

니꼬쌤과 최대한 동일하게 정보를 보여주려면 weather 부분을 가져와서 써야할 것 같다.

온도는 temp로 저장되어 있는데, 299.13으로 되어있는 것을 보니 조치를 취해줘야 할 것 같다.

 

const response = await fetch(`https://api.openweathermap.org/data/2.5/forecast?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`);
const json = await response.json();
setDays(json.list);
    
//결과
{"clouds": {"all": 67}, "dt": 1693666800, "dt_txt": "2023-09-02 15:00:00", "main": {"feels_like": 22.83, "grnd_level": 1006, "humidity": 85, "pressure": 1012, "sea_level": 1012, "temp": 22.32, "temp_kf": 0, "temp_max": 22.32, "temp_min": 22.32}, "pop": 0, "sys": {"pod": "n"}, "visibility": 10000, "weather": [{"description": "broken clouds", "icon": "04n", "id": 803, "main": "Clouds"}], "wind": {"deg": 93, "gust": 0.92, "speed": 0.73}}

바로 가장 뒤에 unit을 metric으로 넣어 주면 된다.

 

days.map((day, index)=>{
	console.log(day.weather[0].main);
	<View key={index} style={styles.day}>
		<Text style={styles.temp}>{day.main.temp}</Text>
		<Text style={styles.description}>{day.weather[0].main}</Text>
		<Text style={styles.description}>{day.weather[0].description}</Text>
	</View>
})

day.main.temp에는 온도가 찍히고,

day.weather에는 [{"description": "overcast clouds", "icon": "04n", "id": 804, "main": "Clouds"}] 이런식으로 day의 길이만큼 찍힌다.