이 콤보에 대해 들어본 것은 이번이 처음이 아닐 것입니다. yov가 이 콤보의 유용성에 대해 들어본 것도 처음입니다.
단결을 위해

React:는 다음과 같은 빠른 시작 스크립트를 사용하여 웹 사이트 구축 프로세스를 단순화하는 Javascript/Typescript 라이브러리입니다.

npx create-react-app my-app --template typescript
TypeScript 반응 템플릿을 스핀업하려면

Firebase는 대부분의 웹 요구 사항을 위한 서비스 백엔드 유틸리티로 호스팅된 소프트웨어를 위한 "서버리스"솔루션입니다. 이 자습서에서는 로컬 테스트를 위해 firestore, 인증, 클라우드 기능 및 해당 에뮬레이터 사이트를 사용합니다. 그들은 우리가 만들려고 하는 예와 같은 정적 웹사이트를 위한 호스팅 솔루션도 가지고 있습니다.

React-query-firebase: react-query를 감싸서 firebase 작업을 위한 사용자 지정 후크를 제공하는 반응 패키지입니다.

(선택 사항) Tailwind는 유틸리티 우선 CSS 프레임워크입니다.

우리는 직원들이 새로운 프로젝트 아이디어를 식별하고 승인을 구하는 작업장을 시뮬레이트하는 간단한 프로젝트 관리자를 구축할 것입니다.

UI 설정

단순화를 위해 Ui 섹션의 시작 파일을 복제하기만 하면 됩니다.

git clone https://github.com/tigawanna/starter-files-for-project-manager.git

종속성을 얻기 위해 npm i를 실행합니다.

또는

시작을 위해 아래 스크립트를 실행하십시오.
npx create-react-app my-app --template tailwindcss-typescript
그런 다음 다른 필수 종속 항목을 설치합니다.

npm i firebase
npm install react-router-dom@6 
npm i  react-query
npm i  @react-query-firebase/firestore
npm i  @react-query-firebase/auth
npm i @react-query-firebase/functions

먼저 라우팅을 설정합니다.

import React from 'react';
import './App.css';
import { Routes, Route } from "react-router-dom";
import { BrowserRouter } from 'react-router-dom';
import { Toolbar } from './components/Toolbar/Toolbar';
import { Project } from './components/Projects/Project';
import { Home } from './components/Home/Home';

function App() {
  return (
    <div className="h-screen w-screen overflow-x-hidden ">
      <BrowserRouter>
      <div className="fixed top-[0px] right-1 w-full z-30">
      <Toolbar />
      </div>
      <div className="w-full h-full mt-16 ">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/project" element={<Project />} />
         </Routes>
      </div>
      </BrowserRouter>
    </div>
  );
}

export default App;

Toolbar.tsx:

import React from 'react'
import { GrHome } from "react-icons/gr";
import { IconContext } from "react-icons/lib";
import { Link } from "react-router-dom";
import { FaUserCircle } from 'react-icons/fa';
interface ToolbarProps {

}

export const Toolbar: React.FC<ToolbarProps> = () => {
return (
 <div className='w-full bg-slate-500 h-16'>
<IconContext.Provider value={{ size: "25px", className: "table-edit-icons" }} >
 <div className='flex flex-grow flex-3'>
     <div className='m-1 w-full p-3 bg-slate-800'>
     <Link to="/"><GrHome /></Link>
     </div>
     <div className='m-1 w-full p-3 bg-slate-600'>
     <Link to="/project">Project</Link>
     </div>
     <div className='m-1 w-fit p-3 bg-slate-700'><FaUserCircle/></div>

</div>   
</IconContext.Provider>
 </div>
);
}

src 폴더 안에 구성 요소 및 firebase 디렉터리를 추가한 후 폴더 구조는 다음과 같아야 합니다. 그런 다음 구성요소 및 firebaseConfig.ts 내부에 Home.tsx 및 Project.tsx용 디렉토리를 생성합니다.

firebase를 설정하려면 먼저 the firebase console 을 방문해야 합니다. seyup 프로세스 후 아래에서 사용할 자체 firebaseConfig json 개체를 받게 됩니다.

firebaseComfig.tsx:

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore"
import { GoogleAuthProvider,getAuth} from "firebase/auth";


const firebaseConfig = {
    apiKey: "your Api key",
    authDomain: "your Auth domain",
    databaseURL: "your databaseUrl",
    projectId: "your project name",
    storageBucket: "your storage bucket",
    messagingSenderId: "your sender id",
    appId: "your app id"
  };

const app = initializeApp(firebaseConfig);

export const db = getFirestore();
export const provider = new GoogleAuthProvider();
export const auth = getAuth(app)

Ui 섹션의 시작 파일git clone https://github.com/tigawanna/starter-files-for-project-manager.git
Firestore, 인증 및 기능이 포함된 Firebase 프로젝트도 생성해야 합니다.
set up process
종속성을 얻기 위해 npm i를 실행합니다.

project repo link