--> 서버가 제공하는 도메인을 그대로 사용하는 형식으로 진행
API를 통해 날씨 데이터 가져오는 순서
1) 현재 위치(좌표) 데이터 필요, 가져오기
--> 어디의 날씨인지 알아야 하기 때문
2) 위치 데이터를 이용하여 현재 위치 날씨 데이터 가져오기
https://velog.io/@odesay97/%EC%95%B1%EA%B3%BC-%EC%84%9C%EB%B2%84-%EB%82%A0%EC%94%A8-%EC%84%9C%EB%B2%84-%EC%99%B8%EB%B6%80-API-2-API%EC%A0%81%EC%9A%A9
--> 외부 API 요청 작업은 try catch문으로 감싸줘야한다.
리액트 네이티브
1) 현재 위치(좌표) 데이터 필요, 가져오기
위치 정보를 제공해주는 함수를 expo에서 다운
공식 문서 (https://docs.expo.dev/versions/latest/sdk/location/)
expo install expo-location
--> 위치 데이터 가져오는 코드 예시
import React,{useState,useEffect} from 'react';
import main from '../assets/main.png';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';
import data from '../data.json';
import Card from '../components/Card';
import Loading from '../components/Loading';
import { StatusBar } from 'expo-status-bar';
import * as Location from "expo-location";
export default function MainPage({navigation,route}) {
console.disableYellowBox = true;
//return 구문 밖에서는 슬래시 두개 방식으로 주석
//기존 꿀팁을 저장하고 있을 상태
const [state,setState] = useState([])
//카테고리에 따라 다른 꿀팁을 그때그때 저장관리할 상태
const [cateState,setCateState] = useState([])
//컴포넌트에 상태를 여러개 만들어도 됨
//관리할 상태이름과 함수는 자유자재로 정의할 수 있음
//초기 상태값으로 리스트, 참거짓형, 딕셔너리, 숫자, 문자 등등 다양하게 들어갈 수 있음.
const [ready,setReady] = useState(true)
useEffect(()=>{
//뒤의 1000 숫자는 1초를 뜻함
//1초 뒤에 실행되는 코드들이 담겨 있는 함수
setTimeout(()=>{
//헤더의 타이틀 변경
navigation.setOptions({
title:'나만의 꿀팁'
})
//꿀팁 데이터로 모두 초기화 준비
let tip = data.tip;
setState(tip)
setCateState(tip)
getLocation()
setReady(false)
},1000)
},[])
const getLocation = async () => {
//수많은 로직중에 에러가 발생하면
//해당 에러를 포착하여 로직을 멈추고,에러를 해결하기 위한 catch 영역 로직이 실행
try {
//자바스크립트 함수의 실행순서를 고정하기 위해 쓰는 async,await
await Location.requestPermissionsAsync();
const locationData= await Location.getCurrentPositionAsync();
console.log(locationData)
} catch (error) {
//혹시나 위치를 못가져올 경우를 대비해서, 안내를 준비합니다
Alert.alert("위치를 찾을 수가 없습니다.", "앱을 껏다 켜볼까요?");
}
}
const category = (cate) => {
if(cate == "전체보기"){
//전체보기면 원래 꿀팁 데이터를 담고 있는 상태값으로 다시 초기화
setCateState(state)
}else{
setCateState(state.filter((d)=>{
return d.category == cate
}))
}
}
let todayWeather = 10 + 17;
let todayCondition = "흐림"
//처음 ready 상태값은 true 이므로 ? 물음표 바로 뒤에 값이 반환(그려짐)됨
//useEffect로 인해 데이터가 준비되고, ready 값이 변경되면 : 콜론 뒤의 값이 반환(그려짐)
return ready ? <Loading/> : (
/*
return 구문 안에서는 {슬래시 + * 방식으로 주석
*/
<ScrollView style={styles.container}>
<StatusBar style="black" />
{/* <Text style={styles.title}>나만의 꿀팁</Text> */}
<Text style={styles.weather}>오늘의 날씨: {todayWeather + '°C ' + todayCondition} </Text>
<TouchableOpacity style={styles.aboutButton} onPress={()=>{navigation.navigate('AboutPage')}}>
<Text style={styles.aboutButtonText}>소개 페이지</Text>
</TouchableOpacity>
<Image style={styles.mainImage} source={main}/>
<ScrollView style={styles.middleContainer} horizontal indicatorStyle={"white"}>
<TouchableOpacity style={styles.middleButtonAll} onPress={()=>{category('전체보기')}}><Text style={styles.middleButtonTextAll}>전체보기</Text></TouchableOpacity>
<TouchableOpacity style={styles.middleButton01} onPress={()=>{category('생활')}}><Text style={styles.middleButtonText}>생활</Text></TouchableOpacity>
<TouchableOpacity style={styles.middleButton02} onPress={()=>{category('재테크')}}><Text style={styles.middleButtonText}>재테크</Text></TouchableOpacity>
<TouchableOpacity style={styles.middleButton03} onPress={()=>{category('반려견')}}><Text style={styles.middleButtonText}>반려견</Text></TouchableOpacity>
<TouchableOpacity style={styles.middleButton04} onPress={()=>{navigation.navigate('LikePage')}}><Text style={styles.middleButtonText}>꿀팁 찜</Text></TouchableOpacity>
</ScrollView>
<View style={styles.cardContainer}>
{/* 하나의 카드 영역을 나타내는 View */}
{
cateState.map((content,i)=>{
return (<Card content={content} key={i} navigation={navigation}/>)
})
}
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
//앱의 배경 색
backgroundColor: '#fff',
},
title: {
//폰트 사이즈
fontSize: 20,
//폰트 두께
fontWeight: '700',
//위 공간으로 부터 이격
marginTop:50,
//왼쪽 공간으로 부터 이격
marginLeft:20
},
weather:{
alignSelf:"flex-end",
paddingRight:20
},
mainImage: {
//컨텐츠의 넓이 값
width:'90%',
//컨텐츠의 높이 값
height:200,
//컨텐츠의 모서리 구부리기
borderRadius:10,
marginTop:20,
//컨텐츠 자체가 앱에서 어떤 곳에 위치시킬지 결정(정렬기능)
//각 속성의 값들은 공식문서에 고대로~ 나와 있음
alignSelf:"center"
},
middleContainer:{
marginTop:20,
marginLeft:10,
height:60
},
middleButtonAll: {
width:100,
height:50,
padding:15,
backgroundColor:"#20b2aa",
borderColor:"deeppink",
borderRadius:15,
margin:7
},
middleButton01: {
width:100,
height:50,
padding:15,
backgroundColor:"#fdc453",
borderColor:"deeppink",
borderRadius:15,
margin:7
},
middleButton02: {
width:100,
height:50,
padding:15,
backgroundColor:"#fe8d6f",
borderRadius:15,
margin:7
},
middleButton03: {
width:100,
height:50,
padding:15,
backgroundColor:"#9adbc5",
borderRadius:15,
margin:7
},
middleButton04: {
width:100,
height:50,
padding:15,
backgroundColor:"#f886a8",
borderRadius:15,
margin:7
},
middleButtonText: {
color:"#fff",
fontWeight:"700",
//텍스트의 현재 위치에서의 정렬
textAlign:"center"
},
middleButtonTextAll: {
color:"#fff",
fontWeight:"700",
//텍스트의 현재 위치에서의 정렬
textAlign:"center"
},
cardContainer: {
marginTop:10,
marginLeft:10
},
aboutButton: {
backgroundColor:"pink",
width:100,
height:40,
borderRadius:10,
alignSelf:"flex-end",
marginRight:20,
marginTop:10
},
aboutButtonText: {
color:"#fff",
textAlign:"center",
marginTop:10
}
});
1) expo-location의 모든 도구를 불러옴
import * as Location from "expo-location";
--> expo-location의 모든 도구를 가져와 Location변수에 담음
2) 위치정보를 불러오는 함수를 만듬
const getLocation = async () => {
//수많은 로직중에 에러가 발생하면
//해당 에러를 포착하여 로직을 멈추고,에러를 해결하기 위한 catch 영역 로직이 실행
try {
//자바스크립트 함수의 실행순서를 고정하기 위해 쓰는 async,await
await Location.requestPermissionsAsync();
const locationData= await Location.getCurrentPositionAsync();
console.log(locationData)
} catch (error) {
//혹시나 위치를 못가져올 경우를 대비해서, 안내를 준비합니다
Alert.alert("위치를 찾을 수가 없습니다.", "앱을 껏다 켜볼까요?");
}
}Location.requestPermissionsAsync(); --> 위치정보를 가져오기 위해 사용자에게 Permission을 요청
--> 사용자가 거부했을 경우 에러발생으로 인식하고 catch부분으로 넘어감
Location.getCurrentPositionAsync(); --> 사용자가 Permission을 줬다는 가졍하에 현재 위치를 가져옴
async, await 문법 --> 함수의 순서를 고정시키는 선언
아래에 후술
async, await 문법
JavaScript의 문법으로
무거운 기능(외부에 API를 요청하거나, 내부의 파일을 가져오거나 등의 네트워크에 간섭하거나, 파일 시스템에 간섭하는 기능들)을 사용했을 때 발생하는 문제를 방지하기 위한 문법이다.
--> 무거운 기능을 수행할 때 여러 기능(함수)들을 두면 순서를 지키지 않는 문제가 발생할 수 있다.JavaScript는 효율성을 중시해서 순차적이 아니라 준비가 완료된 기능부터 수행해버리기 떄문에 무거든 기능을 실행할 경우 코드가 꾜여버리는(오버헤드) 문제가 발생할 수 있다.
이를 방지하기 위해 함수 앞에 async, await를 지정해서 순차적으로 코드가 실행되도록 선언하는 것이다.
--> 해당 문법을 사용할 함수 앞에 async를 선언하고, 그 함수 안에 실행순서가 고정되어야 하는 함수 앞에 await를 선언하면 된다.
const getLocation = async () => {
//수많은 로직중에 에러가 발생하면
//해당 에러를 포착하여 로직을 멈추고,에러를 해결하기 위한 catch 영역 로직이 실행
try {
//자바스크립트 함수의 실행순서를 고정하기 위해 쓰는 async,await
await Location.requestPermissionsAsync();
const locationData= await Location.getCurrentPositionAsync();
console.log(locationData)
} catch (error) {
..... ---> 해당 문법을 사용할 함수 앞에 async선언 + 그 함수 내부에 실행순서를 고정해야 되는 함수들에 대해 await 선언
--> 즉, 위에서는 위치정보에 대한 Permission을 요청하는 함수가 위치정보를 가져오는 함수보다 항상 먼저 실행되야한다.(순차적으로 실행되어야 한다.) 따라서 async, await를 선언하여 순서가 꼬이지 않도록 하는 것이다.
--> Location.requestPermissionsAsync() 함수에 대해 사용자가 Permistion을 허락하는 동안,
먼저 준비된 Location.getCurrentPositionAsync() 함수가 위치정보를 받으려는 시도를 하는 것을 막는 것이다.
--> 만약에 async, await을 사용하지 않아, 이렇게 Location.getCurrentPositionAsync()함수가
먼저 실행되어 버린다면, Permission을 받지 못한 상태이므로
데이터를 받지 못했다는 결과값을 먼저 출력해버린다.
const func = async function(){
await func01()
await func02()
}
const func = async () => {
await func01()
await func02()
}
const func = async () => {
await func01()
await func02()
}
ㅎㅎ