Firebase 란?
파이어베이스는 구글에서 개발이 됐고, 모바일이나 웹어플리케이션을 만들기 위한 플랫폼이다.
대부분의 앱을 만들 때 필요한 부분은
위와 같이 모든 어플리케이션을 만들 때 필요한 부분들을 자동으로 만들어 주는 플랫폼이다.
Firebase의 특징
Firebase 사용하기
- firebase 검색 및 url 접속 후
시작하기
클릭
- 프로젝트 만들기 클릭
- 프로젝트 이름 입력 체크박스 체크
- 프로젝트를 위한 애널리틱스 (선택) 체크
- 애널리틱스 구성 설정
- 프로젝트만들기가 된다. 생성되면 계속버튼을 누른다.
- 생성된 firebase와 웹프로젝트를 연결해야하는데 홈 화면에서 웹을 눌러준다.
- 웹 앱에 firebase 추가 가 나오는데, 여기서 닉네임 작성 후 앱 등록
- firebase SDK 추가가 나오는데, script말고 npm 사용으로 한다.
- 최상위 경로에서 인스톨한다.
npm install firebase --save
로 설치src
> firebase.js
생성 후*코드를 작성해준다.
import { initializeApp } from 'firebase/app'; import "firebase/auth"; //인증 import "firebase/database"; //데이터베이스 import "firebase/storage"; //스토리지 const firebaseConfig = { apiKey: "AIzaSyB1fL6awRoAhLW4TTC5_JCdW1XgDrIUXV8", authDomain: "project-chat-f7b52.firebaseapp.com", projectId: "project-chat-f7b52", storageBucket: "project-chat-f7b52.appspot.com", messagingSenderId: "118617657626", appId: "1:118617657626:web:6b846c4aa85b6e7fcc5ca3", measurementId: "G-RF8DY5ZXR6" }; const app = initializeApp(firebaseConfig); export default app;
const { register, watch, formState: { errors }, handleSubmit } = useForm();
useFrom
을 사용하므로 form
의 onSubmit
은 handleSubmit
으로 만들어서 변수에 넣어준다. 그리고 그 안에 함수를 생성해서 만들어준다.
예)
<form onSubmit={handleSubmit(onSubmit)}>
handleSubmit(onSubmit)
함수는 아래와 같다
onSubmit 함수👇
const onSubmit = async (data) => {
try {
setLoading(true)
const auth = getAuth();
let createdUser = await 👉createUserWithEmailAndPassword(auth, data.email, data.password)👈
console.log('createdUser',createdUser);
await updateProfile(auth.currentUser, {
displayName: data.name,
photoURL: `http://gravatar.com/avatar/${md5(createdUser.user.email)}?d=identicon`
})
//Firebase 데이터베이스에 저장해주기
set(ref(getDatabase(), `users/${createdUser.user.uid}`), {
name: createdUser.user.displayName,
image: createdUser.user.photoURL
})
setLoading(false)
} catch (error) {
setErrorFromSubmit(error.message)
setLoading(false)
setTimeout(() => {
setErrorFromSubmit("")
}, 5000);
}
}
원리는 firebase에서 가져온
import { getAuth, createUserWithEmailAndPassword, updateProfile } from "firebase/auth";
에 createdUser
변수를 담아서 보낸다.
- 회원가입 페이지를 만들고 있었다. 여기서 submit을 누르게 되면 아래와 같이 오류가 뜬다.
- firebase에서 설정이 필요하다
프로젝트 -> Authentication -> Sign-in-method -> 이메일 / 비밀번호 클릭
(로그인 방법을 추가하는곳)
- 이메일 사용설정 체크박스를 활성화 후 저장
- 사용설정 확인 후 다시 회원가입 페이지에서 해본다.
- 회원가입 페이지에서 firebase로 정보를 보내주는지 확인
console.log('createdUser', createdUser)
로 가입 정보가 나오게 된다.
- firebase에서도 유저의 정보가 잘 들어왔는지 확인 Authentication > Users 에서 확인
잘 들어와있다.
- Reacltime Database 클릭
- 시작하기 -> 미국 클릭 후 다음
- 테스트 모드에서 시작
- 데이터 베이스 생성 완료
- 이런식으로 테이블로 정보가 들어오게 된다.
MYSQL
INSERT INTO users(email, displayName, photoURL)
VALUES(abc@naver.com, abc, gravatar...)
MongoDB
UserModel.create({email:"abc@naver.com",
displayName: "abc",
photoURL: "gravatar"})
Firebase
firebase.database().ref("users").child(userId).set({
name:displayNme,
avatar:photoURL})
- 데이터베이스 저장 코드
set(ref(getDatabase(), `users/${createdUser.user.uid}`), {
name: createdUser.user.displayName,
image: createdUser.user.photoURL
})
- 전체코드
const onSubmit = async (data) => {
try {
setLoading(true)
const auth = getAuth();
let createdUser = await createUserWithEmailAndPassword(auth, data.email, data.password)
console.log('createdUser',createdUser);
await updateProfile(auth.currentUser, {
displayName: data.name,
photoURL: `http://gravatar.com/avatar/${md5(createdUser.user.email)}?d=identicon`
})
//Firebase 데이터베이스에 저장해주기
set(ref(getDatabase(), `users/${createdUser.user.uid}`), {
name: createdUser.user.displayName,
image: createdUser.user.photoURL
})
setLoading(false)
} catch (error) {
setErrorFromSubmit(error.message)
setLoading(false)
setTimeout(() => {
setErrorFromSubmit("")
}, 5000);
}
}
- firebase 실시간 데이터베이스