자기 소개를 위한 웹 페이지를 만들기 위해 리액트로 프로젝트를 생성하려던 중 firebase를 이용해
db와 배포까지 해볼 생각이다.
1. 리액트 설치
| create-react-app 설치 npx create-react-app . yarn create react-app . |
+ 설치 후 필요없는 파일or 코드 삭제
2. firebase 앱 프로젝트 생성
- 구글에 firebase console 입력
- firebase에 로그인(듣기론 구글이 firebase를 인수했다고 한다, 본인은 별의미 없지만 구글로 로그인했다)
- 로그인 후 메인화면에 프로젝트 추가 버튼을 클릭 후
프로젝트 이름, 지역 설정 후 프로젝트 만들기 버튼을 클릭한다.
3. react 프로젝트 폴더에 firebase 설치
| node.js 기반의 firebase tools를 제공한다, 따라서 다음의 명령어를 이용해 쉽게 설치 가능하다. npm i -g firebase-tools -> 만약 설치 중 노란색 warring 메시지는 큰 상관없지만 error 메시지가 뜬다면 node.js 설치를 제대로 했는지 확인하자(터미널에 node -v 입력) -> 권한 오류가 뜬다면 맥의 경우 위 명령 앞에 sudo를 추가해서 해보자, 띄어쓰기 필요 성공적으로 설치됐다면 firebase login 입력 -> 본인의 firebase 로그인 정보를 필요로 할 것이다, 표시되는 대로 따라가자 로그인까지 끝냈다면 fitebase init 입력 -> 뭔가 많이 뜰거다 |
4. firebase 연동
| 처음 말했듯이 배포까지 할 것이기 때문에 hosting 설정을 한다 몇 개의 설정 관련 질문이 나올텐데 위 아래 방향키로 움직이고, space 로 선택하면 된다. 1. firebase 프로젝트를 어떤 걸로 선택할지는 본인이 생성하고 사용할 firebase 프로젝트를 선택한다. -> 이 경우 위에서 생성한 firebase 프로젝트 2. public 디렉토리를 물어보는 질문이 있는데 CRA는 build 폴더에 빌드된 파일을 넣기 때문에 build를 입력한다 물론 현재 build 폴더는 존재하지 않는다, 나중에 프로젝트를 완성한 후 만들 것이다. 3. SPA 앱이냐고 물어보면 Y/N 둘다 아무거나 해도 상관 없는 것 같다. -> 찾아보면서 했는데 둘다 상관 없는 이유가 어차피 나중에 설정을 변경할 수있다.(firebase.json) 위 설정들을 제외하고 나머지 설정들은 처음 설정되어 있는데로 따라가면 되고 Y/N 중 하나를 고르는 질문 중에는 대부분 no를 선택하면 될 것이다. |
5. 나머지 설정
- firebase console 페이지에서 자신의 프로젝트를 선택하고 좌측 사이드 메뉴바에서
프로젝트 이름 옆에 톱니바퀴 버튼을 클릭 시 프로젝트 설정이 있을 것이다 클릭
-> 프로젝트 설정을 하지 않았다면 안 뜰수도 있다 설정을 하자
- 프로젝트 설정에서 아래로 내리면 SDK설정 및 구성이 있는데 그 안에 적혀있는 코드를
리액트 폴더 내에 있는 index.js 안에 복붙해주자
|
import firebase from "firebase/compat/app"
import "firebase/compat/firestore";
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
firebase.initializeApp(firebaseConfig);
export const db = firebase.firestore();
|
- 보통 SDK 코드 구성이 저렇게 안 되있을 텐데 설정 몇개를 따로 바꿨다
-> ""로 되어있는 칸은 본인의 SDK 코드 내용을 넣으면 될 것이다.
-> 혹시 firbase module 에러가 뜬다면
| npm i firebase |
위 명령어를 입력해보자
참고 자료 : https://stackoverflow.com/questions/69044315/module-not-found-cant-resolve-firebase-in
- 리액트에서 자신이 사용하고 싶은 파일(컴포넌트)에서 사용하려면
| import {db} from './index.js' |
- 위 코드처럼 임포트 후 db를 사용하면 된다.
모든 준비는 끝났다 이제 원하는대로 리액트로 UI를 만들고 원하는 firebase db를 이용하고 배포를 하면 되겠다.