개발일지

앱개발 4주차 개발일지 [스파르타 코딩클럽]

윤광철 2022. 11. 28. 18:03

[ 4주차 오늘 배울 것 ]

- 우리는 구글의 파이어베이스라는 서버리스를 통해 구현해볼 것

[ 우리 앱에서의 서버 ]

- useEffect는 화면 그려진다음 바로 실행되는 함수니까 여기에 서버 API를 사용하면 데이터를 준비할 수 있음.

[ 날씨 서버 외부 API - 휴대폰 위치 가져오기 ]

1) 현재 위치 데이터 필요, 가져오기 -> 2) 위치 데이터를 이용해 현재 위치 날씨 데이터 가져오기

- 위치 정보 접근 허용 팝업 화면 구현 : expo-location 도구 이용 (expo install expo-location)

 

 

 

 

 

 

 

원래 자바스크립트는 함수가 여러개 있으면 먼저 실행되는 순서대로 함수를 실행시켜 보여주는데 개발자가 원하는 순서가 따로 있다면 async / await를 사용해서 순서를 고정시키는것. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

expo를 통해 위치 권한을 가져오는 함수를 썼고, 그 결과 현재 위치를 큰 딕셔너리로 locationData에 담겼음. 그 딕셔너리안에 위도, 경도가 담겨있는데 공식문서를 보면서 그 위도, 경도를 꺼내온 것.

 

[ 날씨 서버 외부 API - API 적용 ]

- 우리가 사용할 날씨 관련 API 공식문서 링크 : https://openweathermap.org/api

- 서버가 제공하는 도메인 형식의 API를 사용하려면 사용을 위한 도구가 필요한데 우리는 axios(expo, react-native도구 아니고 어떤 개발자가 만듦)를 쓸 것.

- 모든 자바스크립트 도구들은 npm이라는 저장소에 있으므로 npm axios라고 검색하면 관련정보 쫙나옴.

- 메인페이지 코드를 보면 const API_KEY = "cfc258c75e1da2149c33daffd07a911d"; 가 있는데 우리가 이용하는 외부서비스인 weather api를 이용하려면 [회원가입 -> api키 발급] 을 받아야하는데 이를 스파르타 코딩클럽에서 제공해줌.

- await axios.get(주소)를 통해 API를 요청하고 있음. -> 코드 작성방법은 다 공식문서에 나와있음.

[ 서버를 사용만 하자! 서버리스 ]

 

[ 파이어베이스(firebase) 소개 ]

[ 파이어베이스를 앱에 연결하기 ]

- 파이어베이스입장에서는 우리코드가 자바스크립트로 되어있기 때문에 웹이라고 인식함.(자바스크립트는 웹언어이기때문) 그래서 파이어베이스 사이트에서 [앱에 Firebase를 추가하여 시작하기]에서 웹을 선택해야함.

 

- firebaseconfig파일 생성 후 코드스니펫 복사함. 이 파일 자체가 키에 해당. 우리는 이 파일을 통해서 firebase의 서비스(=서버리스) 기능 사용할 수 있음.

[ 파일 스토리지(storage) ]

- 이미지를 외부저장소에 저장하고, 이미지가 저장되어있는 외부저장소 주소를 이용해서 불러오는거 해볼것.

 

[ 리얼타임 데이터베이스 - 설정 ]

- 리얼타임 데이터베이스 : 우리가 배운 리스트, 딕셔너리 구조, 즉 JSON 형태로 저장/관리되는 데이터베이스 서비스. NOSQL이라고도함. 이 서비스를 사용할 땐, 파이어베이스에서 제공해주는 함수들을 이용하기만 하면 데이터 저장.수정.삭제가 가능.

 

- 이미지 저장 -> 파일 저장소 스토리지

- JSON 데이터 -> 리얼 타임 데이터베이스

 

- JSON 가져오기를 눌러서 sparta-myhoneytip-jun에 있는 data.json파일을 가져오면 가져온내용이 저 안에 들어감. 

 

- 이미지를 스토리지에 올리고 저기 tip에서 이미지 부분을 그 스토리지에서 할당받은 이미지주소로 바꾸면 됨.

 

- 기존과의 차이는, 이제 앱에서 사용하는 데이터를 변경하고 싶으면 우리는 파이어베이스의 리얼타임 데이터베이스의 내용만 바꾸면 앱을 다운받은 사용자 모두에게 바뀐내용이 적용됨.

[ 리얼타임 데이터베이스 - 전체 데이터 읽기 ]

- 이제 해야할 것은 나만의 꿀팁 데이터를 파이어베이스 리얼타임데이터베이스에서 가져와서 상태관리를 해야한다는 것.

이를 위해서는 1) 전체 데이터를 가져오게끔 해주는 파이어베이스 제공 함수 사용방법과 2) 가져올 데이터가 어떠한 이름으로 리얼타임 데이터베이스에 저장되어 있는지를 알아야함.

1) 파이어베이스는 API사용방법이 주소/함수가 있는데 함수에 해당함.

2) 나만의 꿀팁 저장위치 : https://sparta-myhoneytip-jun-dd3eb-default-rtdb.asia-southeast1.firebasedatabase.app/tip

 

- 우리가 앞으로 파이어베이스 기능을 사용하려면 무조건 firebaseConfig.js파일에 있는 키를 해당페이지로 가져와야함. 

config파일 하단에 export const firebase_db = firebase.database()코드가 있는데 이를보면 firebase전체코드를 하나로 뭉쳐서 밖으로 export하고 있음. 이는 우리가 만든 페이지에서 파이어베이스 서비스를 사용하기 위함. 그래서 mainpage를 보면 import {firebase_db} from "../firebaseConfig" 라는 코드가 있는데, 이는 우리가 사용하는 메인페이지에서 파이어베이스를 불러오고 있는것. 이 형태를 기억해야함.  

[ 리얼타임 데이터베이스 - 특정 데이터 읽기 ]

- 현재는 카드를 누르면 카드에 있는 모든 꿀팁데이터(content)를 상세페이지로 넘겨주고 있음. 우리는 상세페이지로 데이터 넘겨줄때 모든 데이터를 넘겨주는게 아니고, 우리가 원하는 데이터만 넘겨주고 싶음.

//MainPage로 부터 navigation 속성을 전달받아 Card 컴포넌트 안에서 사용
export default function Card({content,navigation}){
    return(
        //카드 자체가 버튼역할로써 누르게되면 상세페이지로 넘어가게끔 TouchableOpacity를 사용
        <TouchableOpacity style={styles.card} onPress={()=>{navigation.navigate('DetailPage',content)}}>
            <Image style={styles.cardImage} source={{uri:content.image}}/>
            <View style={styles.cardText}>
                <Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>
                <Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>
                <Text style={styles.cardDate}>{content.date}</Text>
            </View>
        </TouchableOpacity>
    )
}

1) Card.js 코드 수정부분을 보면 기존의

<TouchableOpacity style={styles.card} onPress={()=>{navigation.navigate('DetailPage', content)}}>

였던 코드가

<TouchableOpacity style={styles.card} onPress={()=>{navigation.navigate('DetailPage',{idx:content.idx})}}>
로 변함. 이는 카드 버튼을 누를때 전체데이터를 넘겨주는게 아니라 카드의 idx만 넘겨주는것.

2) DetailPage.js에서 바뀐코드를 보면 

useEffect(()=>{
        console.log(route)
        navigation.setOptions({
            title:route.params.title,
            headerStyle: {
                backgroundColor: '#000',
                shadowColor: "#000",
            },
            headerTintColor: "#fff",
        })
        //넘어온 데이터는 route.params에 들어 있습니다.
        const { idx } = route.params;
        firebase_db.ref('/tip/'+idx).once('value').then((snapshot) => {
            let tip = snapshot.val();
            setTip(tip)
        });
    },[])

로 바뀜. 파이어베이스의 api형태인 firebase_db.ref~로 코드를 작성해줌. 이때 +idx를 추가함으로써 tip방안에 해당 인덱스 방으로 들어가서 tip으로 저장해둠.

[ 리얼타임 데이터베이스 - 쓰기 ]

import * as Application from 'expo-application';
const isIOS = Platform.OS === 'ios';


let uniqueId;
if(isIOS){
  let iosId = await Application.getIosIdForVendorAsync();
  uniqueId = iosId
}else{
  uniqueId = Application.androidId
}

console.log(uniqueId)

- 우리가 만든 앱이 마켓에 배포되고, 사용자들은 안드로이드 or ios 둘 중 하나임. Platform.OS에서 OS는 우리가 내려받는 기기의 운영체제가 IOS인지 안드로이드인지 확인하는 함수.

 

 

 

 

 

 

 

On press할때  like함수가 실행되도록 함.

 

여기서 set함수는 공식문서에 나와있는 함수로, 여러번 팀찜하기를 눌러도 동일한 유니크 아이디가 있다면 찜한내용이 덮어쓰기가 되어 저장됨.  그니까 파이어베이스에 데이터 저장하려면 ref로 구체적인 방이름 적어주고 set함수로 그 내용을 지칭해주면 파이어베이스에 데이터가 저장됨.

 

 

 

 

 

숙제하면서 느낀거 : 화면이 바뀔려면 상태변경을 무조건 시켜줘야한다.