Firebase

Firebase 사용하기

Firebase를 사용하기 위해서는 우선 Firebase 홈페이지로 이동해서 로그인을 해줘야 한다.

로그인을 마친 뒤에 홈페이지에서 Firebase 프로젝트 항목을 볼 수 있는데, 프로젝트 추가를 눌러 프로젝트를 추가한다.

프로젝트의 이름을 지정해주고, 자신 구글 계정에서 개발자 콘솔에서 만든 상위 리소스 선택 항목을 선택해서 계속 버튼을 활성화 해준다.

Google 애널리틱스는 해도되고 안해도 무방하다. 나는 그냥 사용 설정을 했다.

애널리틱스 구성을 선택해주고, 프로젝트 만들기를 선택해주면

기다리면

프로젝트가 준비되었다고 뜨고 프로젝트가 생성된다!

이제 생성된 프로젝트로 이동하면 추가하여 시작하기 항목이 뜨는데, 내가 만들려고 하는 프로젝트에 따라서 선택해주면 된다.

앱 닉네임을 설정하고 앱 등록을 누르면 Firebase SDK 추가 항목으로 넘어간다.

이제 SDK를 추가해줘야 하는데 일단 나의 경우에는 React를 사용하기 때문에 npm을 사용해서 firebase를 설치해준다.

$ npm install firebase --save

이제 아까의 Firebase SDK로 돌아와서 블록처리된 부분을 복사해서 vscode로 이동한다.

vscode의 src 폴더 내에 firebase.js 파일을 만들고 복사한 부분을 붙여넣고 아래와 같이 firebase 관련한 라이브러리를 임포트 해준다.

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/database";
import "firebase/storage";

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
  apiKey: "AIzaSyDLjdngMM-Ul4DT5P1wX8eGyHk62tLW2x8",
  authDomain: "react-firebase-chat-app-de444.firebaseapp.com",
  projectId: "react-firebase-chat-app-de444",
  storageBucket: "react-firebase-chat-app-de444.appspot.com",
  messagingSenderId: "921164170041",
  appId: "1:921164170041:web:668bf874e465ad74e11ee8",
  measurementId: "G-ZEQE11L9GB",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();

React-bootstrap

install

$ npm install react-bootstrap bootstrap --save

추가적으로 해당 내용을 상황에 따라 index.js나 App.js 파일에 import 해주면 된다.

{/* The following line can be included in your src/index.js or App.js file*/}

import 'bootstrap/dist/css/bootstrap.min.css';

icon 사용

React Icons

해당 링크로 이동하면 별다른 설정 없이도 다양한 아이콘들을 사용할 수 있다.

$ npm install react-icons --save

React hook form

Home

로그인 회원가입 폼을 작성할 때 유효성 검사를 하게 되는데 그것들을 쉽게 설정해줄 수 있는 모듈이다.

install

$ npm install react-hook-form

홈페이지로 이동해서 get started 부분을 선택한 뒤에 폼을 선택해서 사용할 수 있다.