vite + vue3 + firebase

목차

• 목차
• vite로 프로젝트 생성
• firebase 설정
• project firebase 설치 및 설정
• 사용법

---

vite로 프로젝트 생성

1. npm create vite@latest 입력
2. project name : XXXXX <- XXXX 입력
3. vue 선택
4. vue 선택 : type script를 사용하면 vue-typescript 선택
5. cd XXXX <- 위에서 입력한 프로젝트 명 입력
6. npm i <- 프로젝트에 필요한 모듈 설치

---

firebase 설정

1. firebase console 접속
2. 프로젝트 추가
3. 프로젝트 이름 입력
4. Google 애널리틱스 사용 설정 -> 작성자는 안함
5. 프로젝트 만들기
6. 앱에서 Firebase를 추가하여 시작 하기중 </>(웹) 선택
7. 앱 닉네임 입력 후 앱등록 클릭
8. npm 사용 선택 후 설정 정보 확인 후 콘솔리 이동 선택
   

   

9. 왼쪽 메뉴중 빌드를 선택 하여 Firestore Database 선택 후 데이터베이스 만들기 클릭
   

   

10. 프로덕션 모드에서 시작 선택
11. Cloud Firestore위치 aisa-northeast3선택 후 사용설정 클릭
12. 프로젝트 디렉토리에서 npm i -g firebase-tools 설치
13. firbase login 하여 로그인
14. firbase init 실행
    • Are you ready to proceed? (Y/n) <- y
    • 9번 항목에서 선택한 서비스 (Firestore)를 선택
    • Please select an option: -> Use an existing project 선택
    • 2번 항목 프로젝트 이름 선택
    • What file should be used for Firestore Rules? -> 엔터
    • What file should be used for Firestore indexes? -> 엔터

---

project firebase 설치 및 설정

1. src/config/firebase_config.js 생성 firebase 설정중 8번 항목을 복사

    const firebase_config = {
        apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        authDomain: "XXXXX.firebaseapp.com",
        projectId: "pay-plan",
        storageBucket: "pay-plan.appspot.com",
        messagingSenderId: "XXXXXXXX",
        appId: "1:XXXXXXXXX:web:XXXXXXXXXXXX"
    };
   
    export {firebaseConfig};

2. src/firebase.js 생성

    import { initializeApp } from 'firebase/app';
    import { getFirestore } from 'firebase/firestore/lite';
   
    import {firebaseConfig} from './config/firebaseConfig.js';
   
   

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

export {db, firebaseApp};
```

3. utilsDb.js 생성

    import { collection, getDocs, addDoc, getFirestore, doc } from 'firebase/firestore/lite';
    import {db} from './firebase.js'
   
    function insertDb()
    {
        const rescoll = collection(db, 'users_2');
   
        addDoc(rescoll, {user:'yhs', age:'33', job:'none'})
        .then(rescoll => console.log("Document has been added successfully"))
        .catch(error => console.log(error));
    }
   
    export {insertDb}

---

사용법

1. 사용

   <script>
    import {insertDb} from ''./utilsDb.js';
   
    function insertInfo()
    {
        insertDb();
    }
   </script>
   

---