Vue.js와 Firebase 인증 구현하기 (프로젝트에 Firebase, VueFire 추가하기) #1

프론트엔드 개발을 도와주는 프레임워크인 Vue.js에서 구글의 Firebase를 통해서 오직 프론트엔드에서 회원가입 및 로그인을 구현할 것이다

이 포스팅에서는 Vue-router라는 개념을 이해하였다는 전재로 작성되었다.

Firebase에서는 서버 또는 웹 환경에서 서비스를 사용할 수 있도록 npm 모듈 형식으로 제공하고 있다.
Vue.js 프로젝트에서 다음과 같이 설치를 진행할 수 있다.

$ npm install firebase

또한 Vue.js에서 Firebase를 편리하게 사용할 수 있도록 VueFire라는 모듈을 추가로 제공하고 있다.

$ npm install vuefire

VueFire를 사용하기 위해서는 firebase도 꼭 설치가 되어있어야 한다.
위 모듈을 설치하기 위해서는 Vue.js 프로젝트에서 실행하여야 한다.

설치를 완료하면 새로운 프로젝트를 생성하여야 한다.
여기를 눌러 Firebase 콘솔로 이동해준다.

다음과 같은 페이지가 나오면 프로젝트 추가 버튼을 클릭해서 새 프로젝트를 만드는 과정을 시작한다.

새 프로젝트를 만들기 위해서는 프로젝트 이름을 입력해준다.
이름은 자신이 원하는 이름으로 해도 무관하다.

Firebase로 만든 서비스의 동작 동향을 분석해주는 애널리틱스 사용 여부를 확인한다.
만약 프로젝트에서 사용한다고 하였으면 다음과 같이 애널리틱스 계정을 선택하면 된다.

이제 프로젝트 만들기 버튼을 클릭해서 프로젝트를 생성해준다.

프로젝트를 생성하면 다음과 같이 프로젝트 화면이 나오면서 새로운 앱을 추가시킬 수 있다.
우리는 Vue.js를 사용하여 웹 애플리케이션을 제작하고 있으므로 </>아이콘의 웹 버튼을 클릭하면 된다.

웹 앱을 Firebase에 추가시키기 위해서 웹 이름을 입력해준다.
(추가로 Firebase에서 웹 호스팅도 가능하다)

웹 이름을 입력하면 새로운 앱이 등록이 되면서, 추후 코드에 들어갈 Firebase 설정 값들을 제공해준다.
이 값들은 생성화면 뿐만 아니라 프로젝트 설정에서도 받을 수 있다.

Vue.js 프로젝트로 돌아와서 src폴더에 새로운 폴더를 "firebase"라는 이름으로 하나 만들어주자
폴더 안에 새로운 "index.js"라는 이름으로 파일을 만들어주자

만들어주었으면, Firebase에서 앱을 등록하여 나온 설정값을 등록하는 코드를 복사하여 파일에 붙여준다.

src/firebase/index.js

import { initializeApp } from 'firebase/app'; 

// firebase를 사용하기 위한 기본정보
const firebaseConfig = {
    apiKey: "",
  	authDomain: "",
  	projectId: "",
  	storageBucket: "",
  	messagingSenderId: "",
  	appId: "",
  	measurementId: ""
};

export const firebaseApp = initializeApp(firebaseConfig); 

위와 같이 코드를 작성해주면 마지막줄에 firebaseApp라는 객체를 내보내서 main.js 파일에서 사용할 것이다.

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { VueFire,VueFireAuth } from 'vuefire'
import { firebaseApp } from './firebase' 

const app = createApp(App)
app.use(VueFire,{
  firebaseApp, 
  modules:[
    VueFireAuth(), 
  ]
})
app.mount("#app")

위 코드에서는 3번째 줄에 VueFire를 Import 해주었다.
VueFire 모듈에서 내보낸 모든 객체를 가져오지 않고 중괄호를 열어 필요한 객체만 가져온 것을 볼 수 있다.
그 다음줄에서는 방금 만든 firebase/index.js를 통해서 firebaseApp 객체를 가져왔다.

(여기서 index.js 경로를 생략한 이유는 index.js라는 이름이 기본 실행 파일이므로 저런식으로 폴더만 가져와도 자동으로 index.js에서 파일의 내용을 가져오게 된다)