* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

4주차 숙제 하던 중 막혀서 답안 보면서 해보고 있는데...

1.

숙제 2에서 Object.values()를 설정해서 하면 firebase db에 데이터가 없을때 오류 메시지가 뜹니다.

반면 Object.values() 설정없이 firebase db에 데이터가 없을때는 오류 메시지가 안뜹니다.

문제는 Object.values()가 있어야 찜삭제 후 앱화면이 새로고침 됩니다.

반면 Object.values()가 없으면 찜삭제 후 앱화면이 그대로 유지됩니다.

뭐가 문제일까요?

2.

그리고 가이드의 3)에서

navigation.navigate('LikePage')를 쓰면 된다고 했는데, 그럼 코드를 아래와 같이 입력하면 이론상 정상작동한다는 말인가요?

const remove = async (cidx) => {
    let userUniqueId;
    if(isIOS){
    let iosId = await Application.getIosIdForVendorAsync();
        userUniqueId = iosId
    }else{
        userUniqueId = await Application.androidId
    }
  
  console.log(userUniqueId)
      firebase_db.ref('/like/'+userUniqueId+'/'+cidx).remove().then(function(){
        Alert.alert("삭제 완료");
        navigation.navigate('LikePage')       
        
      })
  }

3.

reload 함수를 사용해보려고 reload 함수를 찾아서 location.reload()도 사용해 봤는데 이것도 안되더라구요. 해당 함수는 사용이 불가능한가요? 가능하다면 어떻게 사용해야되나요?

(처음에는 userUniqueId에 번호를 직접 입력해서 해봤습니다. 예: location.reload(), location.reload('LikePage'), location.reload('LikePage',{idx:content.idx}) 등등)

Object.value 포함:

오류 메시지:

Object.value 미포함:

오류 메시지 2:

질문3 관련 캡처:

작성한 코드 및 에러 메세지

LikeCard.js:

import React from 'react';
import {View, Image, Text, StyleSheet,TouchableOpacity, ScrollView, Alert} from 'react-native'
import {firebase_db} from "../firebaseConfig"
const isIOS = Platform.OS === 'ios';
import * as Application from 'expo-application';


//MainPage로 부터 navigation 속성을 전달받아 Card 컴포넌트 안에서 사용
export default function LikeCard({content,navigation,tip,setTip}){
    
  const remove = async (cidx) => {
    let userUniqueId;
    if(isIOS){
    let iosId = await Application.getIosIdForVendorAsync();
        userUniqueId = iosId
    }else{
        userUniqueId = await Application.androidId
    }
  
  console.log(userUniqueId)
      firebase_db.ref('/like/'+userUniqueId+'/'+cidx).remove().then(function(){
        Alert.alert("삭제 완료");       
        
        let result = tip.filter((data,i)=>{
          return data.idx !== cidx
        })


        console.log(result)
        setTip(result)
      })
  }


  
return(
        //카드 자체가 버튼역할로써 누르게되면 상세페이지로 넘어가게끔 TouchableOpacity를 사용
        <View style={styles.card}>
            <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>


                <ScrollView horizontal>
                <TouchableOpacity style={styles.aboutButton} onPress={()=>{navigation.navigate('DetailPage',{idx:content.idx})}}>
                  <Text style={styles.aboutButtonText}>자세히 보기</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.aboutButton} onPress={()=>{remove(content.idx)}}>
                  <Text style={styles.aboutButtonText}>찜 해제</Text>
                </TouchableOpacity>
                </ScrollView>
 
            </View>
        </View>
        
        
    )
}



const styles = StyleSheet.create({
    
    card:{
      flex:1,
      flexDirection:"row",
      margin:10,
      borderBottomWidth:0.5,
      borderBottomColor:"#eee",
      paddingBottom:10
    },
    cardImage: {
      flex:1,
      width:100,
      height:100,
      borderRadius:10,
    },
    cardText: {
      flex:2,
      flexDirection:"column",
      marginLeft:10,
    },
    cardTitle: {
      fontSize:20,
      fontWeight:"700"
    },
    cardDesc: {
      fontSize:15
    },
    cardDate: {
      fontSize:10,
      color:"#A6A6A6",
    },
    aboutButton: {
      backgroundColor:"white",
      width:100,
      height:40,
      borderRadius:10,
      borderWidth:1,
      borderColor:"deeppink",
      alignSelf:"flex-end",
      marginRight:20,
      marginTop:10
    },
    aboutButtonText: {
      color:"deeppink",
      textAlign:"center",
      marginTop:10
    }
})

LikePage.js:

import { setStatusBarNetworkActivityIndicatorVisible } from 'expo-status-bar';
import React,{useState,useEffect} from 'react';
import { StyleSheet, View, ScrollView,Platform} from 'react-native';
import LikeCard from '../components/LikeCard';
import {firebase_db} from "../firebaseConfig"
import Loading from '../components/Loading';
import * as Application from 'expo-application';
const isIOS = Platform.OS === 'ios';



export default function LikePage({navigation,route}) {
        
    const [tip, setTip] = useState([])
    
    const [ready,setReady] = useState(true)
    
    useEffect(()=>{
        
        navigation.setOptions({
            title:'꿀팁 찜',
            headerStyle: {
                backgroundColor: '#fff',
                shadowColor: "#fff",
            },
            headerTintColor: "#000",         
        })
        getLike()
    },[])
    
    const getLike = async () => {
        let userUniqueId;
        if(isIOS){
        let iosId = await Application.getIosIdForVendorAsync();
            userUniqueId = iosId
        }else{
            userUniqueId = await Application.androidId
        }


        console.log(userUniqueId)
            firebase_db.ref('/like/'+userUniqueId).once('value').then((snapshot) => {
              console.log("파이어베이스에서 데이터 가져왔습니다!!")
              let tip = snapshot.val();
              let tip_list = Object.values(tip)
              if(tip_list && tip_list.length > 0){
                // if(tip && tip.length > 0){
                // setTip(tip)
                setTip(tip_list)
                setReady(false)                
              }         
            });
             
    }
     


    return ( 
        // ScrollView에서의 flex 숫자는 의미가 없습니다. 정확히 보여지는 화면을 몇등분 하지 않고
        // 화면에 넣은 컨텐츠를 모두 보여주려 스크롤 기능이 존재하기 때문입니다. 
        // 여기선 내부의 컨텐츠들 영역을 결정짓기 위해서 height 값과 margin,padding 값을 적절히 잘 이용해야 합니다. 
        <ScrollView style={styles.container}>
        
            <View style={styles.cardContainer}>
            {/* 하나의 카드 영역을 나타내는 View */}
            {
            tip.map((content,i)=>{
                return (<LikeCard content={content} key={i} navigation={navigation} 
                    tip={tip} setTip={setTip}
                    />)
            })
            }
            
        </View>
    
        </ScrollView>
    
    )
}


const styles = StyleSheet.create({
    container: {
      //앱의 배경 색
      backgroundColor: '#fff',
    },
    title: {
      //폰트 사이즈
      fontSize: 20,
      //폰트 두께
      fontWeight: '700',
      //위 공간으로 부터 이격
      marginTop:50,
      //왼쪽 공간으로 부터 이격
      marginLeft:20
    },


    cardContainer: {
      marginTop:10,
      marginLeft:10
    },


    
  
  
  });