파이어베이스에서 새로운 프로젝트를 만든다. >> 콘솔에 들어가서 그냥 진행하면 됩니다.
그리고 터미널 창에서 아래의 명령어를 치고 firebase-tools를 설치를 해야합니다. 글로벌로 설치가 되는 것이므로 한번만 하면 됩니다. firebase-tools는 콘솔창에서 파이어베이스 프로젝트를 실행하고 설치하고 배포를 할 수 있도록 도와주는 창지 입니다. 구글에 있는 파이어베이스와 내 컴퓨터가 상호작용을 할 수 있도록 도와주는 것이죠!!
| $ npm install -g firebase-tools |
터미널창에서 로그인이 안되어 있다면, 로그인을 하시면 됩니다.
로그인을 해야 뭔가를 할것 아니겠습니까? 아래의 명령어를 치면 여러가지 화면이 뜨고 로그인을 할 수 있게 됩니다. 차근차근 진행을 하시면 됩니다.
| $ firebase login |
firebase-tools를 npm으로 설치 했고, 로그인도 했으니... 이제 프로젝트를 시작하면 됩니다.
| $ firebase init |
위의 명령어를 치면 뭔가를 선택하라고 뜨게 됩니다. Firestore, Hosting, Storage를 선택하면 됨 // 그리고 앞에서 시작한 프로젝트를 선택하면 됩니다.
init을 진행하면 파이어베이스가 알아서 파일들을 셋팅을 해주게 됩니다.
일단 index.html에 아래의 코드를 붙여넣기 하면 됩니다.
파이어베이스를 시작하려면, 간단하게 나의 html에 파이어베이스를 설치해야 합니다.
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script> <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script> <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script> <script> const firebaseConfig = { apiKey: 'AIza......GEo377s.........LME', authDomain: '.............firebaseapp.com', projectId: '블라블라', storageBucket: '.......appspot.com', messagingSenderId: '.............27803', appId: '1:284...........803:web:47c8fcc..............a4957e', }; firebase.initializeApp(firebaseConfig); </script> </body> </html> |
app부분은 내가 누군지 어떤 파이어 베이스 프로젝트에 있는지 확인해주기 위해 당연히 붙여넣는 것이고,
auth는 파이어베이스의 authenticaton 기능이며(로그인을 쉽게 해줌, 구글이나 sns 로그인 등....)
firestore는 파이어베이스의 파이어스토어 기능(데이터 베이스)
storage는 이미지등을 저장하기 위한 기능이다.
firebaseConfig의 내용은 파이어베이스 프로젝트를 실행하면 자연스럽게 보여주는 내용입니다.
그냥 붙여넣기를 하면 됩니다.
public 폴더안에 있는 파일들을 만지면서 코딩을 시작하시면 됩니다.
그리고 프로젝트를 시작을 해보고 싶다면, 아래의 명령어를 치시면 됩니다.
| $ firebase serve |
'프로그래밍 스터디( 공부노트 ) > 파이어베이스' 카테고리의 다른 글
| 파이어베이스 - 버전9 ( Firebase v9 ) : 시작하기 (0) | 2022.08.20 |
|---|---|
| 파이어베이스에 글과 이미지 업로드 하기 - Firebase Storage (2) | 2021.11.05 |
| Firestore 데이터베이스에 정보 저장하는 방법 (0) | 2021.11.05 |
| Firestore 데이터 화면에 뿌려주기 - html 에 정보 넣기 (0) | 2021.11.05 |
| 파이어베이스 Firestore Database - 데이터 가져오기 (4) | 2021.11.05 |