react + firebase 웹 개발 기본(직접정리)

react + firebase 개발을 하기 위한 기본적인 내용들을 정리하고 있습니다.

Table of contents

• react vs code 환경
  • extensions
• react 프로젝트 생성하기
  • npx create-react-app으로 최초 생성
• github upload
• firebase hosting 에 배포
• react 기본 코드
  • component 추가하기
• firebase functions 연동하기
  • 배포하기
  • 로컬 테스트
  • 배포된 react웹의 url로 연결하기
  • react 코드에서 호출하기(callable 방식)
    • firebase 환경 코드
    • firebase 함수 작성(functions/index.js 에 작성)
    • firebase 함수를 call하는 코드 작성(react 코드)
• firebase firestore 연동하기
• tailwind 사용하기
  • 설치하기

react vs code 환경

extensions

Auto Rename Tag(Jun Han)

Code Spell Checker(Street Side Software)

Prettier

ES7+ React/Redux/React-Native snippets(dsznajder)

react 프로젝트 생성하기

npx create-react-app으로 최초 생성

※ 참고: https://ahnslab.com/029-start-react-without-next/

npx create-react-app {프로젝트폴더명}

npm start (실행하기)

github upload

※ 참고: https://ahnslab.com/029-start-react-without-next/

git init

git add .

git commit -m “initial commit”

git branch -M main

git remote add origin {git repository 주소}

git push -u origin main

firebase hosting 에 배포

※ 참고: https://ahnslab.com/029-start-react-without-next/

(react 프로젝트 최상위에서 수행)

firebase login

firebase init

firebase.json 에서 public 디렉토리를 build 디렉토리로 지정 (“public”: “build”)

npm run build (react 프로젝트를 빌드)

firebase deploy (배포하기)

주어지는 url로 접속 테스트 (~~.web.app 과 같은 url로 제공됨)

react 기본 코드

component 추가하기

src/components/Test.js 추가

function Test() {
    return (
        <div>
            Test Area
        </div>
    )
}

export default Test;

src/App.js 수정

import Test from './components/Test';

function App() {
  return (
    <div className="App">
      <Test/>
    </div>
  );
}

export default App;

firebase functions 연동하기

※ 참고: https://ahnslab.com/023-firebase-functions-custom-domain/

firebase 웹 대쉬에서 functions 사용 선택

요금제 업그레이드(Blaze로 해야함, 결제카드 등록 필요)

(react 프로젝트 최상위에서 수행)

firebase init functions (firebase 코드 초기화 세팅)

-> firebase.json 에 “functions” 항목 추가됨 -> functions/index.js 등 파일 생성됨

functions/index.js에서 사용할 function을 코딩함

배포하기

firebase deploy --only functions (function만 deploy, 빌드 절차 따로 없음)

로컬 테스트

firebase emulators:start (로컬 구동하여 테스트하기, 127.0.0.1:5000/{함수명})

배포된 react웹의 url로 연결하기

기존에 배포한 react 웹의 url로 function을 직접 호출하려면, firebase.json 의 rewrites 를 사용한다.

"rewrites": [
      {"source": "/helloWorld", "function": "helloWorld"},
      {"source": "**","destination": "/index.html"}
]

react 코드에서 호출하기(callable 방식)

※ 참고 : https://firebase.google.com/docs/web/setup?hl=ko

firebase 대쉬에서 프로젝트 설정 > 내 앱 > 추가하기(샘플코드 복사하기)

firebase 환경 코드

프로젝트에 src/services/firebase.config.js 추가하고 샘플코드 복사

import { initializeApp } from "firebase/app";
import { getFunctions, connectFunctionsEmulator } from 'firebase/functions'; // functions  사용

const firebaseConfig = {
  apiKey: "~",
  authDomain: "~",
  projectId: ~",
  storageBucket: "~",
  messagingSenderId: "~",
  appId: "~"
};

const app = initializeApp(firebaseConfig);
export const fbFunctions = getFunctions(app); // functions 사용시
// connectFunctionsEmulator(fbFunctions, "127.0.0.1", 5001);  // local 테스트 시

firebase 함수 작성(functions/index.js 에 작성)

샘플

const {onCall} = require("firebase-functions/v2/https");

exports.helloWorld = onCall(
    (req, res) => {
        return {
            result: 'helloWorld'
        }
});

firebase 함수를 call하는 코드 작성(react 코드)

샘플

import { fbFunctions } from '../services/firebase.config'
import { httpsCallable } from "firebase/functions";

const helloWorld = httpsCallable(fbFunctions, "helloWorld");
  helloWorld()
      .then((result)=>{
          console.log(result);
});
    

firebase firestore 연동하기

firebase 웹 대쉬에서 ‘Firestore Database’(‘데이터베이스 만들기’) 사용 선택

위치 선택 가능(asia-northeast3(seoul))

테스트 모드에서 시작(대쉬보드 Cloud Firestore -> ‘규칙’ 에서 수정 가능)

src/services/firebase.config.js 에 코드 추가

import { getFirestore } from "firebase/firestore";

export const fbDB = getFirestore(app);

react 컴포넌트에서 아래와 같이 사용

import { fbDB } from '../services/firebase.config'

tailwind 사용하기

설치하기

npm i -D tailwindcss

npx tailwindcss init

tailwind.config.js 수정

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.css 수정

@tailwind base;
@tailwind components;
@tailwind utilities;