-
Firebase로 React 프로젝트 구축하기Studying/React 2023. 8. 16. 20:12
들어가면서...
이전에 만들었던 프로젝트 Portfolly를 Firebase 서버를 기반으로 새롭게 다시 만들고, 그 과정을 천천히 기록하려 합니다.
프로젝트 폴더 생성 & Firebase 연동하기
이번에도 Vite + React + Typescript 환경을 기반으로 프로젝트를 만들려고 합니다.
터미널에 아래 코드를 입력해 프로젝트 폴더를 생성합니다.
npm create vite@latest portfolly --template react-ts
Firebase CLI를 설치해 로컬 컴퓨터에서 파이어베이스 프로젝트를 관리할 수 있게 만듭니다.
npm install -g firebase-tools
터미널에서 다음 명령어로 Firebase에 로그인합니다.
firebase login
아래 명령어로 Firebase 프로젝트를 초기화합니다.
firebase init
Firebase의 어떤 기능을 사용할 건지 묻는 체크란이 나타납니다. 이렇게 체크 했습니다.
이제 리액트 프로젝트 root 경로에 firebase-config.js 파일을 만들고, Firebase 홈페이지에서 생성한 프로젝트 SDK 코드를 붙여넣기 해줍니다. 저는 그 안에 들어있는 Config 값들을 .env 환경변수로 관리했습니다.
import firebase from "firebase/compat/app"; import "firebase/compat/firestore"; const firebaseConfig = { apiKey: import.meta.env.VITE_FIREBASE_API_KEY, authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN, projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID, storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET, messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID, appId: import.meta.env.VITE_FIREBASE_APP_ID, measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID, }; // firebaseConfig 정보로 firebase 시작 firebase.initializeApp(firebaseConfig); // firebase의 firestore 인스턴스를 변수에 저장 const firestore = firebase.firestore(); // 필요한 곳에서 사용할 수 있도록 내보내기 export { firestore };
Vite와 CRA는 각각 환경변수 사용 방법이 다르기 때문에, 아래 블로그를 참고해서 환경변수 파일을 만들면 됩니다.
[React] 리액트에서 .env 환경변수 사용하기!
env 사용이유 개발을 하다보면 외부로 알려지면 안되는 API_KEY나 db관련 정보 등등 보안이 필요한 값들이 있습니다. 이러한 값들을 보안이나 유지보수를 용이하게 하기 위해 .env 파일에 환경변수
shape-coding.tistory.com
이제 다른 파일에서 Firebase를 import하여 사용할 수 있습니다.
그리고 App.tsx 파일에서 firestore를 console.log로 찍어보면 아래와 같이 projectId가 잘 출력됩니다.
import { useEffect } from "react"; import { firestore } from "./firebase-config"; function App() { useEffect(() => { console.log(firestore); }); return ( <> </> ) } export default App;
콘솔 출력 결과 프로젝트 초기 환경 설치
아래 환경에서 Tailwind와 Storybook만 제외하고 사용합니다.
[Portfolly] Vite+TS+StyledComponents+Twin+Storybook 환경 설치 과정
들어가기 전에... 이번 메인 프로젝트는 CRA가 아닌 Vite를 사용하여 프로젝트를 빌드했습니다. CRA 보다 훨씬 최적화된 빌드로 속도가 엄청 빨라서 선택하게 되었습니다. (차세대 빌드 도구를 종류
all-done.tistory.com
참고 사이트
ReactJS | Firebase로 React 프로젝트 DB 연동 및 배포
Firebase 데이터 베이스를 포함한 여러가지 서비스를 제공하는 Google의 모바일 플랫폼 ※ 주의사항__요금제를 Spark로 사용해야 무료로 이용 가능!! ※ 그 외의 서비스나 다른 클라우드 플랫폼도 마
pathas.tistory.com
'Studying > React' 카테고리의 다른 글
Intro 페이지의 스크롤바가 사라지지 않는 문제 (0) 2023.08.23 react-slick 캐러셀 Prev, Next Arrow 버튼 더블 클릭 버그 (0) 2023.08.20 로그인 정보를 리덕스로 관리하는 이유에 대하여 (0) 2023.08.02 [React-Quill] inline style 적용하기 (0) 2023.07.22 뒤로가기/새로고침 시 '정말 나가시겠습니까?' 모달 만들기 (0) 2023.07.18