[firebase] firebase 연동

1. 프로젝트 생성

(1) __run 폴더 생성

(2) __run 폴더 안에 MDB4파일을 압축을 풀어 원하는 프로젝트명(test001)으로 변경하고 firebase_test001폴더를 생성

 

2. webStorm에서 test001을 열기

(1) 터미널에 yarn입력 -> 설치 됨

(2) yarn run build -> dist폴더 생성

 

3. 터미널 실행

(1) 아래 명령어 입력

brew install firebase-cli

 

(2) 구글 firebase 콘솔 홈페이지로 접속한 후 아래의 코드를 실행

firebase login

(3) 

4. firebase폴더, firebaseConfig.js파일 생성

(1) webStorm에서 실행한 test001프로젝트에서 src폴더 하위에 firebase폴더를 생성한다.

(2) 생성한 firebase폴더 하위에 firebaseConfig.js파일을 생성한다.

(3) 생성한 firebaseConfig.js파일에 아래의 코드를 입력한다.

import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/analytics'
import 'firebase/firestore'
import 'firebase/functions'
import 'firebase/storage';
import "firebase/firestore";
import "firebase/auth";

firebase.initializeApp({
    apiKey: "AIzaSyD27veoWuISvDAktbQ89RdJHqzJefcz99g",
    authDomain: "smart-pops.firebaseapp.com",
    projectId: "smart-pops",
    storageBucket: "smart-pops.appspot.com",
    messagingSenderId: "577084985621",
    appId: "1:577084985621:web:ded55c3aae2693895bd91c",
    measurementId: "G-829MH8QJQK"
});

firebase.auth().languageCode = 'ko'

const auth = firebase.auth()
const firestore = firebase.firestore()
const functions = firebase.app().functions('asia-northeast3')

export {auth, firestore, functions, firebase}

 

5. firebase 프로젝트 생성

(1)firebase 콘솔 홈페이지에서 프로젝트를 생성한 후 아래의 아이콘을 눌러 firebase를 추가하여 시작한다.

 

 

(2) 진행 중에 나오는 firebase SDK에서  const firebaseConfig 내부에 있는 아래의 코드를 복사한다.

6. webStorm에서 test001의 firebaseConfig.js파일 열기

(1) firebaseConfig.js파일에서 firebase.initializeApp 내부 코드를 복사한 코드로 변경한다.

 

7. 터미널 실행

(1) 터미널에서 아래의 명령어를 입력한다.

(2) 생성한 firebase 프로젝트 중에 선택을 하여 enter을 입력하며 계속 진행한다.

(3) 과정이 끝나면 firebase_test001에 public폴더와 json파일이 생성된다.

cd /User/keb/firebase_test001
firebase init hosting

8. dist파일 덮어쓰기

(1) tset001 하위폴더인 dist폴더에 있는 항목을 firebase_test001폴더에 있는 public폴더 안에 덮어쓴다.

 

9. firebase 8버전 사용

(1) package.json 파일에서 dependencies 내부에 아래의 코드를 입력한다

"firebase": "^8.2.9"

(2) 터미널에 yarn을 입력하여 firebase를 설치한다.

 

10. firebase deploy 입력

(1) 터미널에 firebase deploy 입력 -> 서버에 올라가는걸 보여줌

 

11. Home.vue 코드 삭제

(1) test001프로젝트에서 src/views에 있는 Home.vue 파일을 연다.

(2) Home.vue 코드에서 <template><div>     </div></template> 내부에 있는 코드를 지운다.

(3) inport문을 지운다

(4) components안에 있는 HelloWorld를 지운다.

 

12. 프로젝트 생성과 파이어베이스 연동 완료