💻파이어베이스를 이용하여 회원가입,로그인구현하기

firebase를 이용하면 백엔드 서비스를 제공받을 수 있다
로그인, 회원가입 기능을 쉽게 해주기 때문에 이용할 수 있음

Firebase공식문서
파이어베이스 홈페이지

🐥1. 홈페이지에서 프로젝트 만들기

</>

클릭 - 순서에 맞게 앱 닉네임 작성 후 SDK 정보를 받을 수 있다.
( 프로젝트 개요 옆의 설정 이모티콘 클릭 - 일반 에서도 api키를 확인할 수 있음 )

설치 명령어

npm install firebase
yarn add global firebase-tools

CLI 설치

yarn add global firebase-tools

firebase.js에 넣어주기

import { initializeApp } from "firebase/app";

import { getAuth } from "firebase/auth";

//api키 넣기
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messageingSenderId: "",
  appId: "",
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

🐥로그인,회원가입 ui만들기

🐥firebase와 연결하기

회원가입 구현하기

로그인,회원가입시 화면이 변경되어야함 => useState를 쓴다.

콘솔에 내용이 연결 된것을 확인 할수 있음

import { createUserWithEmailAndPassword } from "firebase/auth";

User정보를 이메일과 비밀번호를 통해서 만들어주는 api 파이어베이스에서 제공하는것이다.

회원가입 버튼 연결하기

회원가입 버튼 클릭시에 실행 되어야 하므로 회원가입 버튼에 onClick 속성을 이용한다.

                onClick={() => {
                  createUserWithEmailAndPassword(auth, email, password);
                }}

파이어 베이스에 회원 정보가 뜨는 것을 확인 할 수 있음

auth = firebase.js에서 import해온 것
email, password = useState를 사용해서 입력,변경한 것들
try {에러날 수 있는 상황}
catch{ 에러시 작동하는 내용 } = >

완성된 코드

//변동 되는 부분은 useState로 만들고
const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');

//onchange는 따로 만들어줌 
  const onChange = (event) => {
    const {
      target: { name, value }
    } = event;
    if (name === 'email') {
      setEmail(value);
    }
    if (name === 'password') {
      setPassword(value);
    }
    if (name === 'confirmPassword') {
      setConfirmPassword(value);
    }
  };

//회원가입 입력창 유효성 검사
  const Signup = async (e) => {
    e.preventDefault();
    if (!email) {
      alert('이메일을 입력해주세요');
    } else if (!password || !confirmPassword) {
      alert('비밀번호를 입력해주세요');
    } else if (password !== confirmPassword) {
      alert('비밀번호가 일치하지 않습니다');
    }

//가입관련 오류메세지 안내 

    if (password === confirmPassword) {
      try {
        const userCredential = await createUserWithEmailAndPassword(auth, email, password);
        alert('회원가입에 성공했습니다.');
        setEmail('');
        setPassword('');
        setConfirmPassword('');
        navigate('/');
        console.log(userCredential); //user정보 확인하기
      } catch (error) {
        console.error(error.code); //에러메세지 확인하기
        if (error.code === 'auth/email-already-in-use') {
          alert('이미 사용된 이메일입니다.');
        } else if (error.code === 'auth/weak-password') {
          alert('비밀번호가 6자리 이하입니다.');
        } else if (error.code === 'auth/invalid-email') {
          alert('이메일 형식을 확인 해주세요.');
        } else {
          alert('회원가입에 실패 했습니다.');
        }
      }
    }
  };

💻CRUD구현하기

데이터 베이스 만들기
(테스트 모드로 시작 ,Cloud Firestore 위치를 asia-northeast3 (Seoul)로 설정)

데이터 추가하기

👩🏼‍💻firebase.js 에 관련 코드 추가하기

import { initializeApp } from "firebase/app";
...
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
	...
};

const app = initializeApp(firebaseConfig);
...
export const db = getFirestore(app);

useEffect(() => {
    const fethData = async () => {
    // 데이터베이스에 저장한 컬렉션이"posts"인 애들을 데려오게하기 
      const querySnapshot = await getDocs(collection(db, "posts"));
      querySnapshot.forEach((doc) => {
        console.log(`${doc.id} => ${doc.data()}`);
      });
    };
    fethData();
  }, []);

useEffect를 사용해서 확인하면

잘 가져와젔다!