React Firestore

1. React 설치

npx create-react-app my-app

참고: https://reactjs.org/docs/create-a-new-react-app.html

 

2. Material-UI (the world's most popular React UI framework) 설치

npm install @material-ui/core

npm install @material-ui/icons

 

3. open source WYSIWYG editor 설치

npm install react-quill

 

4. Firebase 설치

npm install firebase

 

5. Firebase 웹사이트 접속

a. 계정이 없다면 가입하기

b. 프로젝트 추가하기 (질문에 맞게 답변하면서 가입)

c. Dashboard로 자동으로 들어오게 될 것이다.

d. Dashboard에 앱을 추가하여 시작하기가 있다.

e. </> 아이콘을 선택한다.

f. 앱 닉네임 선택하고 앱 등록을 한다.

g. 그럼 Firebase SDK script가 생성이 된다.

h. 이 script를 조만간 React index.js에 넣을 것이다.

 

6. Firebase Database 생성

a. Dashboard 왼쪽 메뉴에서 Database (Cloud Firestore)를 클릭

b. 데이터베이스를 새로 만든다

c. 테스트 모드를 선택하고 데이터베이스 위치를 선택한다.

 

7. React 설치한 폴더에 가서 npm start를 하면 자동으로 웹브라우저가 열리면서 React 로고가 보인다.

 

8. Firebase 추가하기

React index.js를 열어서 import * as serviceWorker from './serviceWorker';와 ReactDOM.render(<App />, document.getElementById('root')); 사이에 넣는다.

import firebase from "firebase";

const firebaseConfig = {
	apiKey: "zzzzzzzzzzzzz",
	authDomain: "zzzzzzzzz-bcf06.firebaseapp.com",
	databaseURL: "https://zzzzzzzzz-bcf06.firebaseio.com",
	projectId: "zzzzzzzzz-bcf06",
	storageBucket: "",
	messagingSenderId: "323232323",
	appId: "1:323232323:web:c888888ba27eac2f4480bbf"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

firebaseConfig는 위 5-g에서 생성이 된 본인의 script를 넣는다.

 

참고:

https://www.npmjs.com/package/firebase

https://firebase.google.com/docs/web/setup

 

9. helpers.js 파일을 새로 만들고 아래 코드를 넣는다.

 

a. debounce function은 database에 자동저장하는데 매번 저장하는 것이 아니고 타이핑을 2초 정도 멈추거나 했을 때 저장되게 처리.

b. removeHTMLTags function은 preview할 때 html tags를 remove하는 function이다. database에 저장할 때 html tags도 같이 저장이 되므로.

export default function debounce(a,b,c){
  var d,e;
  return function(){
    function h(){
      d=null;
      c||(e=a.apply(f,g));
    }
    var f=this,g=arguments;
    return (clearTimeout(d),d=setTimeout(h,b),c&&!d&&(e=a.apply(f,g)),e)
  }
}

export function removeHTMLTags (str) {
  return str.replace(/<[^>]*>?/gm, '');
};