> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/firebase.md).

# Firebase

## 1. 시작하기  <a href="#start" id="start"></a>

#### 1.1 설치&#x20;

```bash
$ npm install --save firebase
```

#### 1.2 모듈 불러오기&#x20;

필요한 모듈을 불러온다.&#x20;

```bash
import "firebase/auth";
import "firebase/firestore";
```

#### 1.3 앱 초기화&#x20;

```javascript
// 구성 객체 예시 
var firebaseConfig = {
  apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
  authDomain: "myapp-project-123.firebaseapp.com",
  databaseURL: "https://myapp-project-123.firebaseio.com",
  projectId: "myapp-project-123",
  storageBucket: "myapp-project-123.appspot.com",
  messagingSenderId: "65211879809",
  appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
  measurementId: "G-8GSGZQ44ST"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
```

![firebaseConfig는 firebase의 프로젝트 설정에서 가져올 수 있다. ](/files/-MUsBOsn3MEGddaXsvU8)

#### 1.4 오류&#x20;

{% hint style="warning" %}
Firebase App named '\[DEFAULT]' already exists (app/duplicate-app).
{% endhint %}

앱 초기화를 할 때 발생하는 오류이다. 위와 같은 오류가 나타날 때, 아래와 같이 앱 초기화 코드를 작성하면 된다.&#x20;

```javascript
const config = {...};

!firebase.apps.length ? firebase.initializeApp(config) : firebase.app();
```

#### 1.4.1 참고&#x20;

* [파이어 베이스 앱 초기화 이슈 ](https://github.com/vercel/next.js/issues/1999)