React.js

Twitter Clone Project

🚀 Stack

react, firebase, react-router, create-react-app, github-pages

⚡️ Skill

• Email, Google, Github, Social Authentication
• Tweet CRUD
• Protected Pages
• Profile Page
• File Upload
• Deploy
• API Key Security

---

Firebase

• Firebase는 원래 데이터베이스였다.
• google에 인수된 후, 다양한 백엔드 기능들이 추가되며 확장되기 시작함.
  
  
• Cloud Firestore - 빌드
  
• Hosting - 호스팅.
• Cloud Storage - 이미지 업로드 구현.
• Authentication - 인증 구현.

cf. AWS amplify : Firebase와 유사. 비슷한 기능을 함.

언제 Firebase를 사용할지?

• 인증, 데이터베이스 쉽게 구현할 때.
• 실제 프로젝트에서는 쓰지 X.
  -> 결국 모든것이 실제 서버가 아닌 firebase(구글)에서 빌려서 쓰는 것 이므로.

• 구상 단계에서 아이디어를 테스트해보고자 할때 -> 빠르게 시작하여 구현해보는 용으로 사용함.

참고 - Firebase Pricing

• 대부분의 기능은 무료지만, 일부 기능은 유료 결제가 필요함.

---

프로젝트 세팅

1. create-react-app

$ yarn create react-app twitter-clone

2. github (remote add)

$ git remote add (레파지토리주소)
$ git add .
$ git commit -m 'init'
$ git push origin master

3. Firebase 새 프로젝트 생성

Firebase SDK 추가

• npm 사용

이미 npm 및 모듈 번들러(예: Webpack 또는 Rollup)를 사용 중인 경우 다음 명령어를 실행하면 최신 SDK를 설치할 수 있습니다.

$ npm install firebase

그런 다음 Firebase를 초기화하여 사용하려는 제품의 SDK를 사용하세요.

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyAOL5neJZRCAaviePQXYjcqpXFIGpbicPM",
  authDomain: "twitter-clone-yjin2.firebaseapp.com",
  projectId: "twitter-clone-yjin2",
  storageBucket: "twitter-clone-yjin2.appspot.com",
  messagingSenderId: "1017845620413",
  appId: "1:1017845620413:web:068f885597444bddee61d4"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

참고 - npm i firebase@9.6.1 해줌.

• src/firebase.js

import { initializeApp } from "firebase/app";

const firebaseConfig = {
    apiKey: "AIzaSyAOL5neJZRCAaviePQXYjcqpXFIGpbicPM",
    authDomain: "twitter-clone-yjin2.firebaseapp.com",
    projectId: "twitter-clone-yjin2",
    storageBucket: "twitter-clone-yjin2.appspot.com",
    messagingSenderId: "1017845620413",
    appId: "1:1017845620413:web:068f885597444bddee61d4"
};
  
export default initializeApp(firebaseConfig);

• index.jx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import "firebase/compat/storage";

console.log(firebase);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

🔻 console.log 결과