인프런 커뮤니티 질문&답변

사전 설정은 다 제대로 한 것 같은데 회원가입하면 실패도 아니고 오류 로그가 뜹니다.. ㅠㅠapi 오류라고 해서 콘솔 sdk도 다 다시 설정해 보았는데 자꾸 오류가 뜹니다... ㅠㅠ 해결 부탁드립니다. 

제 파이어베이스 API sdk입니다. 

useSignup.js

import { useState } from 'react'
import { appAuth } from '../firebase/config'
import { createUserWithEmailAndPassword, updateProfile } from 'firebase/auth'

export const useSignup = () => {
    // 에러 정보를 저장합니다. error 상수에 저장 기본값 null
    // setError -> 상태를 업데이트 하기 위한 것 
    const [error, setError] = useState(null);
    // 현재 서버와 통신중인 상태를 저장합니다.
    // isPending이 ture면 통신중
    const [isPending, setIsPending] = useState(false);

    // signup 훅을 만듭니다. email, password, displayName 세가지 매개변수를 갖습니다.
    const signup = (email, password, displayName) => {
        setError(null); // 아직 에러가 없으니 null 입니다.
        setIsPending(true); // 통신중이므로 true입니다.


        // 파이어베이스에서 회원가입을 도와주는 함수 (도큐먼트에 있음)
        // 비밀번호 설정으로 유저 정보를 등록합니다. config에서 import 받아야합니다.
        createUserWithEmailAndPassword(appAuth, email, password)
            .then((userCredential) => {
                // 회원가입
                // 성공했을 때, Signed in
                // 유저정보를 user에 담아옴
                const user = userCredential.user;
                console.log(user);

                // 회원 정보를 정상적으로 받지 못하면 실패입니다. -> 경고 띄우기
                if (!user) {
                    throw new Error('회원가입에 실패했습니다.');
                }
                

                // 회원 정보 업데이트
                // 회원가입이 완료되고 유저 정보에 닉네임(displayName)을 업데이트합니다. import 받아야합니다.\
                // appAuth.currentUser를 통해 현재 로그인 정보를 받아옴
                updateProfile(appAuth.currentUser, { displayName })
                    .then(() => {
                        setError(null);
                        setIsPending(false);
                    }).catch((err) => { //예외 처리
                        setError(err.message);
                        setIsPending(false)
                        console.log(err.message);
                    });
            })

            .catch((err) => {
                // 예외 처리
                setError(err.message);
                setIsPending(false);
                console.log(err.message);
            });
    }

    // 에러값, 통신여부, signup 함수(밖에서 사용할 수 있도록) 리턴
    return { error, isPending, signup }
}

config.js

// 계정과 관련된 파이어베이스 설정 -> 깃허브에 올리면 안됨
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
};

// Initialize Firebase 인증 초기화
// firebase 초기화
const app = initializeApp(firebaseConfig);
const appAuth = getAuth();
// firestore 초기화
const appFireStore = getFirestore(app);

// 나중에 다른 곳에서도 사용 가능하게 빼놓는 것
export{appAuth, getFirestore}

.env

REACT_APP_API_KEY = AIzaSyAIgKLWTMyx_t8VhSzEUB3XQF755FGB7_c
REACT_APP_AUTH_DOMAIN = mydiary-ccb8c.firebaseapp.com
REACT_APP_PROJECT_ID = mydiary-ccb8c
REACT_APP_STORAGE_BUCKET = mydiary-ccb8c.appspot.com
REACT_APP_MESSAGING_SENDER_ID = 1047629886497
REACT_APP_APP_ID = 1:1047629886497:web:59ffb871ffeb3054261f60