스파르타 코딩 클럽 내일 배움단 - 앱개발 4주차

스파르타 코딩 클럽 내일 배움단 9일차 일지

힘들다.... 어렵다.... 막힌다.... 하지만 거의 끝났다...

이번 챕터 자체는 꽤 할만 했던 챕터인데, 숙제에서 시간이 엄청 오래 끌렸다.

이제는 코드나 내용이 너무 길어져서 핵심만 적어야 겠다.

그래도 어제부터 극소수 시간 제외하고는 전부 앱개발 공부에 투자해서 조금이나마 감이 잡힌것 같다.

앱개발 5주차까지 끝나면 복습도 하면서 리액트도 기초를 좀 공부를 해봐야 할 것 같다.

 

학습 내용

1. 앱과 서버

2. 파이어베이스 개요

 

1. 앱과 서버

동작방식

앱에서 서버에 데이터를 요청하거나 데이터를 보내려면 서버가 정한 규칙에 따라 대화 요청을 해야 한다.

정한 규칙에 따라 요청을 하지 않으면 응답이 오지 않는다.

서버 쪽에서 정한 규칙을 우린 보통 API(Application Programming Interface)라고 부른다.

서버에서 제공하는 도메인을 이용할 수도 있고, 서버에서 제공하는 함수를 이용할 수도 있다.

 

※ 주로 서버에서 앱으로 데이터를 전달할때는 JSON 형태로 데이터를 전달해준다.

 

리액트 네이티브에서 서버와 통신이 필요한 시점

- useEffect 사용시, 사용자가 어떠한 동작을 할 때 (저장, 조회 등)

 

API 사용

- 서버에서 제공하는 도메인 형식의 API를 사용하려면 axios 라는 모듈을 설치해줘야 한다.

yarn add axios

 

Axios 사용법 - react-native-axios - npm (npmjs.com)

react-native-axios

 

2. 파이어베이스

파이어베이스란?

구글에서 제공하는 서버리스(Serverless) 서비스 입니다.

서버에 대한 지식이 없어도 서버의 기능을 사용할 수 있게 해줍니다.

 

파이어베이스

파이어베이스 사이트를 가입한 뒤, 앱 생성 후 접속 코드를 받고 cmd에서 파이어베이스 모듈을 설치해줍니다.

expo install firebase

 

파이어베이스 설정 정보 파일(firebaseConfig.js)을 만들어줍니다

< firebaseConfig.js >

//import * as firebase from 'firebase/app';
import firebase from 'firebase/app';

// 사용할 파이어베이스 서비스 주석을 해제합니다
//import "firebase/auth";
import "firebase/database";
//import "firebase/firestore";
//import "firebase/functions";
import "firebase/storage";

// Initialize Firebase
//파이어베이스 사이트에서 봤던 연결정보를 여기에 가져옵니다
const firebaseConfig = {
  apiKey: "AIzaSyBKG2xY91x23W8PF1231k5OUJ5o9kHSKYQeNWUw",
  authDomain: "sparta-psytest-gun.firebaseapp.com",
  databaseURL: "https://sparta-psytest-gun.firebaseio.com",
  projectId: "sparta-psytest-gun",
  storageBucket: "sparta-psytest-gun.appspot.com",
  messagingSenderId: "781790378482",
  appId: "1:78179037128482:web:ddbca5330779f67b947136b",
  measurementId: "G-3F5L9F3340Q3"
};

//사용 방법입니다. 
//파이어베이스 연결에 혹시 오류가 있을 경우를 대비한 코드로 알아두면 됩니다.
if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
}

export const firebase_db = firebase.database()

 

데이터 가져오기

  useEffect(()=>{
	   
    //뒤의 1000 숫자는 1초를 뜻함
    //1초 뒤에 실행되는 코드들이 담겨 있는 함수
    setTimeout(()=>{
        //헤더의 타이틀 변경
        navigation.setOptions({
            title:'나만의 꿀팁'
        })
        firebase_db.ref('/tip').once('value').then((snapshot) => {
          console.log("파이어베이스에서 데이터 가져왔습니다!!")
          let tip = snapshot.val();
          setState(tip)
          setCateState(tip)
          getLocation()
          setReady(false)
        });
        // setTimeout(()=>{
        //     let tip = data.tip;
        //     setState(tip)
        //     setCateState(tip)
        //     getLocation()
        //     setReady(false)
        // },500)
    },1000)

    
  },[])

 

상세페이지 이동하면서 데이터 넘기기

< components/Card.js >

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

< pages/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)
        });
    },[])

 

꿀팁 찜 구현하기

    const like = () => {
        
        // like 방 안에
        // 특정 사용자 방안에
        // 특정 찜 데이터 아이디 방안에
        // 특정 찜 데이터 몽땅 저장!
        // 찜 데이터 방 > 사용자 방 > 어떤 찜인지 아이디
        const user_id = Constants.installationId;
        firebase_db.ref('/like/'+user_id+'/'+ tip.idx).set(tip,function(error){
            console.log(error)
            Alert.alert("찜 완료!")
        });
    }