Firebase 사용법 : 기본 환경설정

Firebase 사용법 그중에서도 가장 기초가 되는 기본 환경설정을 해보도록 하겠습니다.

해당 튜토리얼은 firebase, nodejs를 활용해서 friebase의 authentication, firestore, hosting 등 서비스를 이용해보는 것이 목적입니다.

다운로드부터 시작할 것이니 이미 환경 세팅이 되셨다면 맨 아래 데이터 베이스와 통신하는 쪽으로 넘어가셔도 됩니다 ^^

 

 

 

환경 : nodejs, firebase

추가적으로 ide는 visual studio code

 

node js 에서 firebase를 사용하려면 node js를 먼저 다운로드해야겠죠 ㅎㅎ

node js는 javascript 기반 서버 사이드 플래폼입니다.

쉽게 말하면 클라이언트가 node js서버에 요청하면 웹페이지 코드를 보내줍니다.

 

nodejs.org/ko/

Node.js

이 링크에 접속하면 다음과 같은 페이지가 나옵니다.

윈도우 운영체제라면 여기서 다운로드하시면 됩니다. 만약 다른 운영체제 혹은 32bit라면 상단 메뉴에 다운로드를 누르면

다른 운영체제에서도 사용할 수 있는 버전이 나옵니다. 알맞게 다운로드해주시면 됩니다.

이번 튜토리얼은 firebase를 다루는 것이 초점이 맞춰져 있으니 node js설정은 여기까지 하겠습니다.

진행이 잘되시지 않는다면 반드시 구글링을 통해 문제를 해결해 보시기 바랍니다.

(구글링은 개발자에게 필요한 필수 소양이니까요 ㅎㅎㅎ)

검색어는 'nodejs (운영체제 이름) 다운로드'를 추천드립니다.

 

 

nodejs를 다운로드하면 npm도 자동적으로 다운로드됩니다.

다음으로는 firebase cli를 설치해 주어야 하는데 아래 웹문서를 참고하시기 바랍니다.

(공식문서는 해당 툴을 설명하는 가장 좋은 도구이니 반드시 어색하더라도 활용해보시기 바랍니다 ㅎㅎ)

firebase.google.com/docs/cli?hl=ko#install-cli-windows

Firebase CLI 참조

(@@

npm이 cmd에서 작동하지 않는 경우는 시스템 환경변수 설정이 안 되 그런 것이니 구글에 npm 시스템 환경변수 설정을 검색하셔서 해결하시기 바랍니다. 구글링은 개발자의 필수 능력이니 반드시 구글링을 통해 해결해 보세요 ㅎㅎㅎ)

 

nodejs, firebase cli를 설치하셨다면

 

이제 본격적으로 firebase 설정을 해보겠습니다.

우선 firebase 홈페이지에 접속해주세요.

구글에 firebase를 검색하면 상단에 나옵니다.

 

들어가면 다음과 같은 페이지가 나옵니다. 

여기서 좌측 중간쯤에 있는 시작하기를 눌러주세요.

 

다음과 같은 페이지가 나온다면 잘 따라오고 계신 겁니다 ㅎㅎㅎ

여기서 프로젝트 추가를 눌러주세요.

 

이제 아래와 같이 설정해줍니다.

프로젝트 생성이 완료되고 계속하기를 누르면 아래와 같은 페이지가 나옵니다.

firebase 프로젝트 성공하셨네요 축하드립니다 ㅎㅎ

 

이제 본격적으로 firebase를 사용해보도록 하죠.

위의 페이지에서 </>를 선택하면 아래와 같은 페이지가 나옵니다.

다음다음으로 넘어가서 완료하시면 됩니다.

 

다음,

cmd에서 바탕화면에 hifirebase 폴더를 만들어주고 cd를 통해 해당 디렉터리로 이동합니다.

가장 먼저 해야 할 것은 firebase login입니다.

firebase login

 을 통해 로그인해주시고

firebase init

코드를 실행하면 다음과 같이 진행됩니다.

are you ready to proceed? yes를 해주시고

다음에 나오는 것에 스페이스 바로 firestore, functions, hosting을 체크해주고 엔터로 다름 질문으로 넘어갑니다.

이제 프로젝트를 설정하는데 우리는 이미 firebase에 프로젝트를 생성해 놓았기 때문에 use an existing project를 선택하고  hifirebase를 선택해줍니다.

 

아마 다음과 같은 에러가 나올 것입니다.

cloud firestore를 생성하고 프로젝트를 진행하라는 것으로 firebase 

firebase 콘솔에서 좌측에 4번째에 있는 cloud firestore를 선택하면 다음과 같은 페이지가 나옵니다.

여기서 데이터 베이스 만들기를 눌러주고 아래와 같이 설정해주시면 됩니다.

완료되면 다음과 같이 데이터 베이스가 생성됩니다.

이제 다시 cmd로 돌아가 보죠.

다시 firebase init을 해주고 엔터 엔터 해 주시면 됩니다.

선택하는 부분은 아래 파란색 글씨에 맞게 해주시면 됩니다.

 

그러면 hifirebase 디렉터리에 다음과 같은 파일들이 다운로드되어 있는 것을 볼 수 있습니다.

오늘은 간단한 사용 예제까지 해보도록 하겠습니다.

npm install -g firebase-tools

위의 코드로 node js 사용에 필요한 것을 다운로드해주겠습니다.

hifirebase 디렉터리에서 실행해주셔야 합니다.

 

아래 코드로 ex_1.js 파일을 생성해주세요.

개인키는 아래와 같이 찾을 수 있습니다.

var firebase = require("firebase/app");
const firebaseConfig = {
//사용자 개인 키 찾아서 넣기
  };
  require("firebase/auth");
  require("firebase/firestore");
  firebase.initializeApp(firebaseConfig);
  var db = firebase.firestore();

  db.collection('hifirebase').doc('1').set({1:1})

코드를 완성하고 cmd에서 다음과 같은 코드를 실행하면 데이터 베이스에 데이터가 찍히는 것을 볼 수 있습니다.

node ex_1.js

축하드립니다. firebase 데이터 베이스와 통신하는 것에 성공하신 겁니다 ㅎㅎㅎ

다음 시간에는 firebase authentication을 활용해 이메일 회원가입/로그인을 만들어 보겠습니다. 

끝까지 읽어주셔서 감사합니다!!