▼ Firebase 환경 설정하기 ▼
#02 React 프로젝트에서 Firebase 환경 설정하기
2023.11.21 - [Database] - FireBase 주요 서비스 기능 (Authentication , Firestore , Storage ) FireBase 주요 서비스 기능 (Authentication , Firestore , Storage ) 1. FireBase 개념 (1) 구글이 제공하는 서버리스(serverless) 플랫폼 ▶
zerotonine2da.tistory.com
▼파이어베이스 API 라이브러리 참고 자료 (사용법): 외우지 말고 찾아서 사용하기! ▼
JavaScript 프로젝트에 Firebase 추가
의견 보내기 JavaScript 프로젝트에 Firebase 추가 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 이 가이드에서는 웹 앱에서 또는 최종 사용자의 액세스를 위한
firebase.google.com
1. Authentication (인증) : 회원가입
(1) VS code 코드 작성
[firebase.js]
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
~~firebaseConfig~~
// Initialize Firebase
export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
▶ import & export 작업해주기
[App.js]
import { useEffect, useState } from 'react';
import { auth } from './firebase';
import { createUserWithEmailAndPassword } from 'firebase/auth';
const App = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const onChange = (event) => {
const {
target: { name, value },
} = event;
if (name === 'email') {
setEmail(value);
}
if (name === 'password') {
setPassword(value);
}
};
const signUp = (event) => {
//회원가입
event.preventDefault();
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
console.log('user', user);
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.log('error', errorCode, errorMessage);
});
};
return (
<div className="App">
<h2>로그인 페이지</h2>
<form>
<div>
<label>이메일 : </label>
<input type="email" value={email} name="email" onChange={onChange} required></input>
</div>
<div>
<label>비밀번호 : </label>
<input type="password" value={password} name="password" onChange={onChange} required></input>
</div>
<button onClick={signUp}>회원가입</button>
<button onClick={signIn}>로그인</button>
<button onClick={logOut}>로그아웃</button>
</form>
</div>
);
};
export default App;
▼ 회원가입 {signUp} 부분 리팩토링하면 아래와 같음 ( 이 방법을 추천)▼
const signUp = async (event) => {
//회원가입
event.preventDefault();
try {
const userCredential = await createUserWithEmailAndPassword(auth, email, password);
console.log('user', userCredential.user);
} catch (error) {
const errorCode = error.code;
const errorMessage = error.message;
console.log('error', errorCode, errorMessage);
}
};
1) async + await 로 변경
2) try ~catch문 적용
▼ createUserWithEmailAndPassword함수 사용법 ▼
▶ 사용 예시 : createUserWithEmailAndPassword(auth, 'test@gmail.com', '1234');
▶ 비동기적으로 작동 + promise를 반환함
▶ 성공시 : then ( (userCredential === 유저정보))
[★오류 발생 -> 파이어베이스 홈페이지가서 설정확인 필요 ]
(2) 파이어베이스 홈페이지에서 설정 (회원가입시 이메일/비밀번호 사용)
▶ Authentication 클릭 → "시작하기" 버튼 → Sign-in Mehtod에서 이메일/비밀번호 클릭 →사용설정 클릭 후 저장
▶ 새로고침 : 파이어베이스 홈페이지 User 부분에서 등록된 정보 확인 가능
2. Authentication (인증) : 사용자 인증정보 확인 및 로그인 상태 변경시 사용
[App.js]
import { useEffect, useState } from 'react';
import { auth } from './firebase';
import { createUserWithEmailAndPassword, onAuthStateChanged } from 'firebase/auth';
const App = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
useEffect(() => {
//홈페이지 열자마자 사용
onAuthStateChanged(auth, (user) => {
console.log('user', user);
});
//현재 로그인한 유저 정보
//auth.currentUser;
}, []);
1) 로그인 상태 변경시 onAuthStateChanged 사용
2) 현재 로그인한 유저 정보 auth.currentUser;
끝.
▼ Authentication (로그인 기능 구현) ▼
#04 React 프로젝트에서 Firebase 사용하기 : Authentication (로그인 기능 구현)
▼(회원가입 기능 구현) ▼ #03 React 프로젝트에서 Firebase 사용하기 : Authentication (회원가입 기능 구현) ▼ 2023.11.21 - [Database] - #02 React 프로젝트에서 Firebase 환경 설정하기 ▼ #02 React 프로젝트에서 Fi
zerotonine2da.tistory.com
