react와 ant design, firebase로 Admin 만들기 1 세팅

빠르게 간다.

 

1. 세팅

// 리액트 초기 세팅

$ npx create-react-app my-admin-site

$ cd my-admin-site

 

// 앤트디자인이랑 파이어베이스 세팅

npm install antd firebase

 

// 앤트디자인 적용

'index.css' 파일을 삭제하고, 대신 'src' 폴더에 'index.less' 파일을 생성한 후 다음 내용을 추가

@import '~antd/dist/antd.less';

 

index.js 수정

// 기존 CSS 파일 import 문을 삭제하고, LESS 파일을 import

import "./index.less";

 

// firebase 설정

firebase 들어가서 프로젝트 생성, 'firebase.js' 파일을 'src' 폴더에 생성하고,

웹앱 만들기 하면 설정 스크립트를 준다. 그거를 붙여넣는다. 'firebase.js' 파일에 다음 내용이 들어가야된다

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

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id"
};

firebase.initializeApp(firebaseConfig);

export default firebase;

 

//firebase 배포 설정

먼저 Firebase CLI 를 설치해야된다. 이미 했으면 패스

$ npm install -g firebase-tools

 

cmd에서 cd 명령어로 프로젝트 폴더 들어가서 firebase login 으로 로그인한뒤

firebase init 으로 초기 설정을 해준다. 

중간에 폴더 public으로 할거냐고 물어보는데 build 폴더로 해두면 나중에 리액트로 npm run build 했을때 같은 폴더에서 바로 "firebase deploy --only hosting:프로젝트 이름" 해서 배포할 수 있으므로 편하다.