[1인 헤어샵 예약 시스템 구현기] 초기세팅과 firebase (기술스택: react, ts, redux-toolkit, styled-component + firebase)

부트캠프를 수료한 후 개인적으로 typeScript, redux-toolkit을 공부해서 프로젝트 리팩토링도 하고 개인 프로젝트도 했다.

기초적인 toDoList, 가위바위보 게임을 구현했었기에 더 깊게 파볼 수 있는 프로젝트를 하고싶었다.

이에 적절한 토이프로젝트가 뭐가 있을까? 고민하다가 1인 미용실 예약 시스템을 구현하기로 했다.

기술스택은 react, ts, redux-toolkit, styled-component + firebase 이정도!

항상 backend가 없어서 한정적인 데이터만 보여줄 수 있으니 아쉬웠는데 firebase로 예약정보를 관리해보려고 한다.

기대된다!!!! firebase과의 만남...

 

이 글에는 초기세팅과 firebase를 어떻게 세팅하는지 적어보려고한다.

 

https://jeongeuni.tistory.com/74

[1인 헤어샵 예약 시스템 구현기] firebase로 실시간 예약 시스템 구현하기

---

📌 1인 미용실 예약 서비스

나만 알아볼 수 있겠지만.. 나름 구상해봤다.

1인 헤어샵이며 페이지는 home, 예약하기, 예약확인 이렇게 구성되어있다.

---

📌 초기세팅

1. 타입스크립트 템플릿 다운받기

npx create-react-app typescript --template typescript- 설치

 

2. Router 다운받기

npm i react-router react-router-dom
npm i -D @types/react-router @types/react-router-dom

 

3. redux 다운받기

npm i @reduxjs/toolkit @types/react-redux

 

4. styled-component 다운받기

npm i --save styled-components
npm i --save-dev @types/styled-components
npm i styled-reset

 

5. eslint, prettier 다운받기

npm i -D eslint prettier
npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
npm i -D eslint-config-airbnb
npm i -D eslint-config-prettier eslint-plugin-prettier
npm i -D eslint-plugin-react eslint-plugin-react-hooks
npm i -D eslint-plugin-jsx-a11y eslint-plugin-import

이렇게 다운받고 eslint, prettier, tsconfig.json, 폴더구조 초기세팅을 한 후 git에 올렸다.

 

---

📌 firebase 설정하기

1. 먼저 코딩애플을 보자! 그럼 이해가 잘된다.

https://www.youtube.com/watch?v=bJ-33ANIScE&t=191s 

 

2. firebase에서 프로젝트를 추가해주자!

 

3. 그리고 웹에서 프로젝트를 진행할 것이니 </> 를 누른다.

4. vscode에 가서 firebase를 설치해주자.

npm i firebase

 

5. src폴더 아래에 firebase.ts를 만들고 세팅해주자. (js기반이면 firebase.js)

import firebase from "firebase/compat/app";
import "firebase/compat/firestore";

const firebaseConfig = {
 //자신의 것 복붙
};

firebase.initializeApp(firebaseConfig);

const firestore = firebase.firestore();

export { firestore };

 

6. index.tsx에서 firebase가 잘 들어갔는지 확인해보자.

import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import { App } from "./components/App";
import { GlobalStyle } from "./styles/Global.style";
import store from "./store/store";
import firestore from "./firebase";

console.log(firestore);

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <GlobalStyle />
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

7. 잘 찍히면 성공 : )