일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- 자바스크립트
- firebase
- project
- 티스토리챌린지
- React
- 태그
- 프로젝트
- 코딩
- 프로그래머스
- ReactNative
- javascript
- 코테
- 스프링
- expo
- node.js
- PCCE
- java
- Spring
- 코딩테스트
- 백엔드
- map
- 2025 프로그래머스 코드챌린지 2차 예선
- 리액트 네이티브
- 파이어베이스
- React Native
- 리액트네이티브
- 자바
- controller
- 오블완
- 리액트
- Today
- Total
양갱의 개발 블로그
[리액트네이티브] react-native 날씨 가져오기(Expo) 본문
앱에서 만드는 부분은 산책이라
날씨 api를 넣어야겠다고 생각함
그래서
날씨 api를 쓰려고 한다
날씨 정보 받아오기
우선 위도, 경도를 navigator 함수를 이용해 받아온다. 그리고 그 위치로 장소를 파악해 해당 장소의 날씨데이터를 전송해준다.weather.js 파일을 만들고 언제나 그렇듯 html 에 추가한다.navigator{:class="
velog.io
현재위치 가져오는 건
이미 모두 구현되어 있어서
위도경도에 따라 날씨 정보를 가져오면 됐다
openweather에서 api키를 발급받아야함
- 회원가입
https://openweathermap.org/api
Weather API - OpenWeatherMap
Please, sign up to use our fast and easy-to-work weather APIs. As a start to use OpenWeather products, we recommend our One Call API 3.0. For more functionality, please consider our products, which are included in professional collections.
openweathermap.org
2. api key받아오기
내 닉네임, 즉 마이페이지 부분을 클릭하면
Myservices가 있다
API keys를 클릭하여 키를 확인한다

3. 메인페이지에서 상단 메뉴바에서 API를 클릭
4. One Call API에서 API doc을 클릭
5. API call 하는 방법을 알 수 있음
https://api.openweathermap.org/data/3.0/onecall?lat={lat}&lon={lon}&exclude={part}&appid={API key}
이 코드를 사용하여 날씨를 가져올 수 있다
https://nomadcoders.co/react-native-for-beginners/lectures/3127
All Courses – 노마드 코더 Nomad Coders
초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요!
nomadcoders.co
여기도 참고하면서 코드를 짰지만
오류가 났다
그래서 메일을 찾아보니까
3.0은 무료 사용자는 사용할 수 없어서
2.5로 해야하고
weather?을 해야했다
아무튼 이렇게 해서 값을 가져왔다...
let location = await Location.getCurrentPositionAsync({});
const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${location.coords.latitude.toFixed(5)}&lon=${location.coords.longitude.toFixed(5)}&appid=${API_KEY}&units=metric`);
const res = await response.json()
console.log(res)
'프론트 > React Native, React, Expo' 카테고리의 다른 글
[리액트 네이티브] react native 확인 취소 알림창(Alert) 띄우기 (0) | 2023.07.07 |
---|---|
[리액트 네이티브] React-Native GPS로 사용자의 위치 가져와서 이동한 거리 선긋기 (Expo) (0) | 2023.07.07 |
[리액트네이티브] react-native firebase 연동 파이어베이스 연동 (0) | 2023.06.26 |
[리액트네이티브] react-native firebase firestore 데이터 읽기 (0) | 2023.06.26 |
[리액트네이티브] react-native header 헤더 꾸미기 (0) | 2023.06.26 |