[앱개발 종합반] 4주차 개발일지

1. 배운 내용

외부 API를 이용해서 특정 데이터 활용하기

파이어베이스 이용해서 파일 스토리지와 리얼타임 데이터베이스 사용해보기

 

2. 새로 알게 된 내용

1) 파이어베이스에서 파일 스토리지 사용법

- 파일 저장소에 이미지 및 사용할 파일을 올려두고, 필요할 때마다 꺼내 쓰는 용도로 사용함.

- 파이어베이스 메뉴에서 Storage 메뉴 접속 후 시작하기 눌러서 시작한다.

- 폴더도 생성할 수 있고, 폴더에서나 루트 위치에 파일을 업로드할 수 있다.

- 파일을 올리면 이미지가 저장된 주소를 제공해주어서 해당 주소로 이미지 태그 url에 첨부해주면 된다.

 

 

2) 파이어베이스에서 리얼타임 데이터베이스 사용법

- JSON 형태로 저장/관리되는 데이터베이스 서비스이다.

- 파이어베이스에서 제공해주는 함수들을 이용하기만 하면 데이터 저장/수정/삭제가 가능하다.

- 파이어베이스 메뉴에서 Realtime Database 메뉴 접속 후 시작하기 눌러서 시작한다. (이때 규칙은 모두 비공개로)

- 만들어졌으면 접속 후 규칙 탭에서 규칙을 모두 true로 수정해주고 게시한다.

- 이전에 있던 json 파일을 가져와서 데이터를 업로드해준다.

 

* 전체 데이터 읽기

useEffect(()=>{
  //헤더의 타이틀 변경
  navigation.setOptions({
  title:'나만의 꿀팁'
  })
  
  firebase_db.ref('/tip').once('value').then((snapshot) => {
    console.log("파이어베이스에서 데이터 가져왔습니다!!")
    let tip = snapshot.val();
    setState(tip)
    setCateState(tip)
    getLocation()
    setReady(false)
  });
},[])

 

* 특정 데이터 읽기

//MainPage로 부터 navigation 속성을 전달받아 Card 컴포넌트 안에서 사용
export default function Card({content,navigation}){
  return(
    //카드 자체가 버튼역할로써 누르게되면 상세페이지로 넘어가게끔 TouchableOpacity를 사용
    <TouchableOpacity style={styles.card} onPress={()=>{navigation.navigate('DetailPage',{idx:content.idx})}}>
    <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>
  )
}

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("찜 완료!")
  });
}

 

 

3. 느낀 점

이번 주차는 파이어베이스를 활용해서 파일 저장소에 파일을 업로드하고 주소로 꺼내서 사용하는 방법과 데이터베이스를 JSON 형태로 관리하는 방법에 대해서 배웠다. 파이어베이스를 사용해본 적 없어서 새로 배우는 부분이 많았다 !