Firebase는 모바일 및 웹 애플리케이션 개발 플랫폼으로, 분석, 데이터베이스, 메시징, 오류 보고 등의 많은 기능을 제공한다.

이중에서 웹 개발과 관련된 기능을 쉽게 익힐 수 있도록

데이터 입출력(CRUD)을 중심으로 간단한 게시판 예제를 작성하는 방법을 정리하고,

이 웹 애플리케이션을 무료로 호스팅(hosting)하는 방법을 다음과 같이 단계별로 정리하였다.


1. 시작하기

2. Realtime Database 기반 게시판

3. Cloud Firestore (beta) 기반 게시판

4. 로그인 (authentication) 기능 추가

5. 무료 호스팅(Firebase Hosting)으로 배포 I, II


이 예제는 Node.js와 Express를 기반으로 작성하였고,

이전에 정리한 Node.js 게시판(Express + MariaDB / MySQL) 예제를 사용하였다.

데이터베이스를 MariaDB / MySQL 대신에 Firebase에서 제공하는 Realtime Database / Cloud Firestore 로 수정한 예제이다.

소스는 GitHub에서 받을 수 있다.


먼저 console 창에서 다음과 같이 입력하여 사용할 프로젝트를 간단하게 생성한다.

프로젝트 폴더 명(firebaseExample)은 수정해도 된다.

주의: Node.js, express, express-generator가 설치되어 있어야 한다.

> express --session --view=ejs --css css firebaseExample

> cd firebaseExample

> npm install

콘솔창에서 [npm start]를 입력하여 웹 서버를 실행한다.

웹 브라우저에서 [http://localhost:3000/]를 입력하여 다음 그림과 같이 실행되면,

제대로 Node.js용 웹 프로젝트가 생성된 것이다.


웹브라우저로 Firebase 콘솔(https://console.firebase.google.com/)에 접속한다.

주의: Firebase 콘솔을 사용하기 위해서는 gmail 계정이 있어야 한다.


[프로젝트 추가]를 선택해서,

프로젝트 이름(firebaseExample)과 지역(대한민국)을 입력하고 [프로젝트 만들기]를 실행한다.



생성과 동시에 그림과 같이 생성된 프로젝트가 선택되어, 해당 프로젝트에서 사용할 수 있는 기능(왼쪽 메뉴)들이 나열된다.


화면 중앙에 있는 것은 Firebase에서 지원하는 언어로, Node.js를 사용할 것이기 때문에 [웹 앱에 Firebase 추가]를 선택한다.


원격에서 Firebase에 접속하기 위해 필요한 정보가 자바 스크립트 코드로 제공된다.

이것을 복사한다.


편집기를 실행해서,

firebaseExample\routes 폴더에 있는 index.js 파일을 다음과 같이 추가한다.

test라는 URL을 추가하였다 [라인 9~11].

test는 test라는 HTML(ejs) 파일을 호출하기[라인 10] 때문에 views 폴더에 test.ejs를 다음과 같이 작성한다.

4 라인은 Firebase에서 복사한 코드 중 Firebase을 웹(HTML)에서 사용하기 위해 추가한 Firebase용 자바 스크립트 라이브러리이다.

복사한 코드 중 config 변수의 내용을 위 코드와 같이 그대로 붙여넣기 해서 사용하면 된다 [라인 10~18].


Firebase를 초기화(접속)하고 나면 [라인 18],

Firebase에서 제공하는 Realtime Database에 데이터를 저장한다.

데이터를 저장하기 위해 JSon 형대로 데이터를 구성한다 [라인 22~28].

하나의 JSon이 하나의 행이 되고,

각각의 키(brdno, brdwriter, brdtitle, brdmemo, brddate)가 필드가 된다.


게시판에는 여러 개의 게시물이 저장 될 수 있기 때문에

각각의 데이터(행)을 구분하기 위해 Firebase에서 제공하는 고유값을 받아서 [라인 20]

Firebase 데이터베이스(Realtime Database)에 저장한다 [라인 33].

자세한 설명은 Firebase 문서에 잘 정리되어 있다.


웹브라우저에서 Firebase 콘솔(https://console.firebase.google.com/)에 접속한다.

왼쪽 메뉴에서 Database를 선택한다.

Cloud Firestore (beta) 와 Realtime Database 중에서 우측에 있는 Realtime Database의 [시작하기]를 선택한다.


운영일때는 [잠금 모드로 시작]을 사용하지만, 편의를 위해 [테스트 모드로 시작]을 선택하여 생성한다.


다음 그림과 같이 빈(null) 데이터 저장소를 볼 수 있다.


다른 웹브라우저(새탭)에서 앞서 작성한 URL(test)를 다음 그림과 같이 실행한다.

http://localhost:3000/test

test는 Firebase에 하나의 데이터(행)을 추가하도록 작성한 컨트롤(url)이므로,

Firebase 콘솔에서 데이터가 추가되었는지 확인한다.


board라는 노드 밑에 고유값(newPostKey)으로 생성된 노드가 있고, 그 하위에 앞서 작성한 데이터가 저장되어 있다.

test.ejs에서 작성한 다음 코드 구조데로 저장된 것이다 [라인 31].

updates['/board/' + newPostKey] = postData;

Json 구조라 무한데로 계층화 시켜서 저장할 수 있는데

board를 테이블(table), 고유값(Key)을 행으로 의미를 부여해서 저장하였다.

이 구조로 게시판 예제를 작성할 것이다.


본격적인 예제를 작성하기 위한 준비로 Node.js(express)를 설치하고,

HTML(ejs) 파일에서 Realtime Database에 접속하여 데이터를 추가하는 것까지 정리하였다.

Firebase 문서의 이름으로 정리하면 웹에서 Firebase를 사용한 예제를 작성한 것이다.

다음으로 Realtime Database을 이용하여 간단한 구조의 게시판 예제를 작성해 본다.


정보: HTML 파일이기 때문에 Node.js가 없어도 단복으로 실행하거나 JSP, ASP, PHP등에서 실행할 수 있다.



+ Recent posts