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

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

오류 대비 코드로 튜터님께서

if (!firebase.apps.length) {

    firebase.initializeApp(firebaseConfig);

}

를 알려주셨는데 계속 오류가 뜨네요....

LoginPage에 소셜로그인 구현 후 파이어베이스로 연동하려는데...잘 안되네요..ㅠㅠ

작성한 코드 및 에러 메세지

<FirebaseConfig>

import { initializeApp } from "firebase/app";

import firebase from "firebase/compat/app";

// 사용할 파이어베이스 서비스 주석을 해제합니다

import "firebase/compat/auth";

import "firebase/compat/database";

import "firebase/compat/firestore";

//import "firebase/compat/functions";

import "firebase/compat/storage";

// Initialize Firebase

//파이어베이스 사이트에서 봤던 연결정보를 여기에 가져옵니다

const firebaseConfig = {

  apiKey: "xxx",

  authDomain: "xxxx",

  databaseURL: "xxxm",

  projectId: "xxx",

  storageBucket: "xxxx",

  messagingSenderId: "xxx",

  appId: "xxx",

};

//사용 방법입니다.

//파이어베이스 연결에 혹시 오류가 있을 경우를 대비한 코드로 알아두면 됩니다.

if (!firebase.apps.length) {

    firebase.initializeApp(firebaseConfig);

}

export const firebase_db = initializeApp(firebaseConfig)

<LoginPage>

import * as React from 'react';

import * as WebBrowser from 'expo-web-browser';

import { ResponseType } from 'expo-auth-session';

import * as Google from 'expo-auth-session/providers/google';

import { initializeApp } from 'firebase/app';

import { getAuth, GoogleAuthProvider, signInWithCredential, onAuthStateChanged } from 'firebase/auth';

import { Button } from 'react-native';

import { firebase_db } from '../auth/FirebaseConfig';

import firebaseConfig from '../auth/FirebaseConfig'

// Initialize Firebase

initializeApp({

  firebase_db

});

WebBrowser.maybeCompleteAuthSession();

export default function LoginPage() {

  const [request, response, promptAsync] = Google.useIdTokenAuthRequest(

    {

      clientId: 'xxx',

    },

  );

  React.useEffect(() => {

    if (response?.type === 'success') {

      const { id_token } = response.params;

      const auth = getAuth();

      const credential = GoogleAuthProvider.credential(id_token);

      signInWithCredential(auth, credential);

    }

  }, [response]);

  onAuthStateChanged(auth, async (user) => {

    if (user) {

      const { uid, email, displayName, accessToken } = user;

      console.log("uid :", uid)

      console.log("email :", email)

      console.log("displayName :", displayName)

      console.log("accessToken :", accessToken)

    }

  });

  return (

    <Button

      disabled={!request}

      title="Login"

      onPress={() => {

        promptAsync();

      }}

    />

  );

}

<MainPage>

import React, { useEffect, useState } from 'react';

import {View, StyleSheet, Text, Image, TouchableOpacity} from 'react-native';

import highHeel from '../../../assets/highHeel.jpg'

import {AntDesign} from '@expo/vector-icons';

import LoadingPage from '../form/LoadingPage';

import styles from '../../styles/MainPageStyles';

import MyStack from '../stacknavigator/StackNavigator';

import LoginPage from '../form/LoginPage';

import { createStackNavigator } from "@react-navigation/stack";

import { TouchableHighlight } from 'react-native-gesture-handler';

import { SliderBox } from 'react-native-image-slider-box';

import headerImage from '../../../assets/headerImage.jpg'

// import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';

import { firebase_db } from '../auth/FirebaseConfig';

export default function MainPage({navigation}) {

    const [ready, setReady] = useState(true)

    useEffect(()=>{

        setTimeout(()=>{

            setReady(false)

        }, 3000)

    })

    state = {

        currentIndex : 1,

        imageList : [

            require('../../../assets/motivation.jpg'),

            require('../../../assets/lion.jpg'),

            require('../../../assets/writting.jpg')]

    }

   return ready ? <LoadingPage/> :  (

    <View style = {styles.container}>

        <View style = {styles.headerContainer}>

            <View style = {styles.headerImageContainer}>

                <Image source = {headerImage} style ={styles.headerImageStyle}/>

            </View>

            <View style = {styles.upperContainer}>

                <View style = {styles.uppercontainer01}>

                    <Image source = {highHeel}/>

                </View>

                <View style = {styles.upperContainer02}>

                    <Text style = {styles.headerText}>하루, 이틀 그리고 힐링</Text>

                </View>

            </View>

        </View>

        <View style = {styles.secondaryUpperContainer}>

            <View style = {styles.secondaryUpperContainer01}>

                <TouchableOpacity onPress={()=>{navigation.navigate('LoginPage')}}>

                <AntDesign name ="login" size = {24} color="black"/>

                </TouchableOpacity>

            </View>

            <View style = {styles.secondaryUpperContainer02}>

                <TouchableHighlight onPress={()=>{navigation.navigate('LoginPage')}} underlayColor = "blue">

                    <View style = {styles.menuContainer}>

                        <Text style = {styles.textStyle}>감동</Text>

                    </View>

                </TouchableHighlight>

                <TouchableOpacity>

                    <View style = {styles.menuContainer}>

                        <Text style = {styles.textStyle}>명언</Text>

                    </View>

                </TouchableOpacity>

                <TouchableOpacity>

                    <View style = {styles.menuContainer}>

                        <Text style = {styles.textStyle}>속담</Text>

                    </View>

                </TouchableOpacity>

                <TouchableOpacity>

                    <View style = {styles.menuContainer}>

                        <Text style = {styles.textStyle}>동기</Text>

                    </View>

                </TouchableOpacity>

            </View>

        </View>

        <View style = {styles.middleContainer}

        >

            <SliderBox

                autoplay = {true}

                circleLoop = {true}

                resizeMode = 'cover'

                images = {this.state.imageList}

                dotColor = 'rgba(0, 0, 0, 0)'

                inactiveDotColor = 'rgba(0, 0, 0, 0)'

                // ImageComponentStyle = {{width : wp('100%'), height : hp('30%')}}

                // currentImageEmitter = {(imageList) =>

                //         this.setState({currentIndex : index + 1})}

            />

                <View>

                     <Text style = {styles.middleText}>꿈을 이루고자 하는 용기만 있다면 모든 꿈을 이룰 수 있다.</Text>

                     <Text sytle = {styles.middleText01}>-월트 디즈니-</Text>

                </View>

        </View>

        <View style = {styles.lowerContainer}>

        </View>

    </View>

  )

}