Cute Dog Bopping Head
본문 바로가기

웹앱7

[React] 간단한 날씨 웹앱 만들어보기 - 내 위치의 날씨 가져와서 화면에 표시하기(2) openweathermap을 사용해서 기온을 가져오는 것까지 완료했다. 그럼 이제는 이모티콘을 사용해서 날씨를 나타내 줄 차례! (기온을 제외하고, cloudy, misty, sunny 등 날씨를 표현하는 단어..! 대기 상태라고 하나요,.?) 먼저 data속의 weather를 찾아보자. 날씨는 저렇게 weather 배열 안, 첫번째 object의 main에 있다 ("haze" 부분) 해당 부분을 가져오기 위해서는, temp를 가져왔던 것처럼 data.weather[0].main을 가져오면 되는 것! export default class extends React.Component { state = { isLoading: true }; getWeather = async (latitude, longitude.. 2021. 5. 1.
[React] 간단한 날씨 웹앱 만들어보기 - 내 위치의 날씨 가져와서 화면에 표시하기(1) 위치를 가져오는 것까지 했다. 그럼 다음은 뭐다? 해당 위치의 날씨를 가져오기! 온도를 먼저 가져와보도록 한다. 원래는 fahrenheit 으로 되어있기 때문에, 한국식으로 celsius로 바꿔준다. url에 간단하게 &units=metric으로 바꿔주면 된단다 const { data } = await axios.get( `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric` ); // 쌍따옴표, 홑따옴표 아니고 1 옆에 있는 백틱 ` 을 사용. 그래야 안에 변수 넣어줄 수 있음 그리고 이제, 해당 위치의 온도를 가져오는 component 짜기. Weather... 2021. 4. 27.
[React] 간단한 날씨 웹앱 만들어보기 - openweathermap 에서 날씨 API 가져오기, axios 사용 이전에 longitude, latitude를 가져오는 과정을 다뤘었는데, 이를 이용해서 해당 위치의 날씨 정보를 가져오는 API가 있다고 한다. Openweathermap이 그것! 위도와 경도를 저장해주는 코드로 조금 고쳐주고, import React from "react"; import { Alert } from "react-native"; import Loading from "./Loading"; import * as Location from "expo-location"; const API_KEY = "나의 API 키!!!!!!!!"; export default class extends React.Component { state = { isLoading: true }; getLocation = asy.. 2021. 4. 26.
[React] 간단한 날씨 웹앱 만들어보기 - Loading.js 와 Location 로딩 화면을 만드는 것부터 시작한다. 아주 간단...! 이게 Loading.js import React from "react"; import { StyleSheet, Text, View } from "react-native"; export default function Loading() { return ( Getting Weather ... ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "flex-end", paddingHorizontal: 20, paddingVertical: 100, backgroundColor: "#B2CCFF", }, text: { color: "#2C2C2C", fontSize: 20, .. 2021. 4. 12.

티스토리툴바