먼저, Firebase npm 패키지를 설치해야 합니다. 아래 명령어를 사용하여 프로젝트에 Firebase를 추가합니다.

npm install firebase

이제 Firebase 설정 파일을 만들어야 합니다. Firebase 콘솔에서 프로젝트를 만든 후, firebaseConfig 객체의 정보를 얻을 수 있습니다. 이 정보를 .env 파일에 저장합니다.

FIREBASE_API_KEY=your_api_key
FIREBASE_AUTH_DOMAIN=your_auth_domain
FIREBASE_PROJECT_ID=your_project_id
FIREBASE_STORAGE_BUCKET=your_storage_bucket
FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
FIREBASE_APP_ID=your_app_id

파일을 저장한 후, .env 파일에서 환경 변수를 로드하기 위해 Parcel의 .env 파일을 사용해야 합니다.

Parcel 프로젝트의 루트 디렉토리에 .env 파일이 없다면, 새로운 파일을 만들어 복사하고 .env로 이름을 변경하세요.

.env 파일에 아래 내용을 추가하고 your-value를 Firebase 설정 파일에서 제공받은 값으로 대체하세요.

FIREBASE_API_KEY=your-value
FIREBASE_AUTH_DOMAIN=your-value
FIREBASE_PROJECT_ID=your-value
FIREBASE_STORAGE_BUCKET=your-value
FIREBASE_MESSAGING_SENDER_ID=your-value
FIREBASE_APP_ID=your-value

그리고 .env 파일을 .gitignore에 추가하여 노출되지 않도록 해야 합니다.

이제, 자바스크립트 파일에서 Firebase를 초기화하고 사용할 수 있습니다. 아래 코드를 index.js 파일에 추가하세요.

import firebase from "firebase/app";
import "firebase/firestore"; // 필요한 Firebase 모듈들을 임포트하세요.

// 환경 변수를 이용해 Firebase 설정 객체를 생성합니다.
const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID
};

// Firebase 앱을 초기화합니다.
firebase.initializeApp(firebaseConfig);

// Firestore 인스턴스를 생성합니다.
const db = firebase.firestore();

// 이제 Firebase를 사용하여 데이터를 읽고 쓸 수 있습니다.
// 예를 들어, 컬렉션에 문서를 추가해보세요.
db.collection("users").add({
  name: "John",
  age: 25
})
  .then((docRef) => {
    console.log("Document written with ID: ", docRef.id);
  })
  .catch((error) => {
    console.error("Error adding document: ", error);
  });

이제 Parcel을 사용하여 프로젝트를 실행하면 Firebase와 Parcel이 함께 작동하는 것을 볼 수 있습니다.