DirectTalk9 Web과 PC 버전은 이전에 작성한 Android 버전을(Firebase Firestore 예제) 변환한 예제로,

Web은 React (Redux)을 익히기 위해서

PC 버전은 Electron을 학습하기 위한 예제로 제작하였다.

특히, PC 버전은 Web 버전과 동일한 코드로 작성되었지만 PC 환경에 맞추어 수정하였다.

현재는 기본적인 채팅 기능 위주로 구현되었고, 계속 버그 수정 및 기능을 보강할 예정(?)이다.

디자인은 능력이 되지 않아서 Google's Material Design 가이드를 준수하는 material-ui.com을 사용하였다.


먼저, Web 버전을 설치하기 위해서는 NodeJS와 git이 설치되어 있어야 한다.

NodeJS와 git 설치는 찾아보길 바라고 여기에서 정리하지 않는다.


DirectTalk9 Web 버전은 다음과 같이 5 단계의 과정으로 설치를 진행한다.

1. 소스 다운로드: git clone https://github.com/gujc71/DirectTalk9_web.git
2. 관련 라이브러리 설치: npm install
3. Firestore.js에 접속 정보 입력
4. Firebase 관련 서비스 (Authentication, Storage, Firestore) 활성화
5. 실행: npm start


상세하게 정리하면, 콘솔(cmd) 창에서 github의 소스를 다운로드 받는다.

git clone https://github.com/gujc71/DirectTalk9_web.git

소스를 다운로드 받은 폴더로 이동(cd DirectTalk9_web) 해서 필요한 라이브러리들을 설치한다.

npm install

DirectTalk9 Web 버전은 React, Redux, Material-ui, ImageTool (image Resize)등이 사용되었고,

package.json 파일에서 설치된 라이브러리를 확인할 수 있다.


설치한 폴더(DirectTalk9_web) 하위의 src\reducer 폴더에 있는 Firestore.js 파일에

다음 그림과 같이 Firebase 설정 정보를 채워준다.

Firebase 설정 정보를 가져오는 방법은 이 문서나 문서내의 우측에 있는 동영상을 참고 하면 된다.

이전에 작성된 NodeJs 예제 문서를 참고해도 된다.


다음으로 Firebase console에 접속해서 Authentication, Storage, Firestore를 사용할 수 있도록 해야 한다.

Firebase는 Gmail 계정만 있으면 사용할 수 있다.

웹 브라우저에서 Firebase console에 접속해서 Gmail 계정으로 로그인하면 된다.


로그인을 위한 인증(Authentication)은 다양한 방식이 제공되는데

, "이메일/비밀번호"을 사용할 수 있도록 하고, 설정 방법은 이전에 작성한 Firebase 설정 문서를 참고하면 된다.

데이터를 저장할 Cloud Firestore는 [테스트 모드로 시작]을 선택하면 되고, 설정 방법은 이전에 작성한 Firebase 설정 문서를 참고한다.

파일을 저장할 Storage는 그림과 같이 콘솔의 왼쪽 메뉴에서 Storage를 선택하고, 화면 중앙에 나타나는 [시작하기] 버튼을 눌러주면 된다.


설정을 마쳤으면 콘솔 창에서 NodeJS 서버를 실행한다.

npm start

웹 브라우저에서 다음과 같은 화면이 실행된다.


처음에는 가입된 회원이 없으니 계정으로 사용할 이메일과 비밀번호를 입력하고,

"Create Account" 버튼을 눌러서 회원 가입을 하면 된다.

테스트 용이기 때문에 이메일 주소는 꼭 사용하는 이메일일 필요는 없다.

user1@test.com 와 같이 입력해도 된다.


로그인을 하고 나면 사용자 리스트(UserList) 화면이 나타난다.

왼쪽 메뉴에서 채팅방 리스트(Rooms)를 실행한다.


몇 개의 계정을 생성하고, 대화 상대를 선택해서 채팅을 하면 된다.


브라우저의 크기를 줄이면 반응형으로 변하는 화면을 볼 수 있다.





다음으로, PC 버전을 설치하는 방법은 Web 방식과 거의 유사하다.

1. 소스 다운로드: git clone https://github.com/gujc71/DirectTalk9_pc.git
2. 관련 라이브러리 설치: npm install
3. Firestore.js에 접속 정보 입력
4. Firebase 관련 서비스 (Authentication, Storage, Firestore) 활성화
5. 실행: npm run dev


다운로드 받는 주소가 DirectTalk9_web에서 DirectTalk9_pc로 바뀌고

라이브러리 설치 등은 모두 동일하다 (Electron 설치로 라이브러리 설치 시간이 더 많이 걸린다).

Firebase 서비스를 사용하기 위해 콘솔에서 지정하는 설정은 Web 버전에서 진행한 경우 별도로 지정하지 않아도 된다.


Web 버전과 가장 큰 차이점은 실행 방식이다.

Web 버전은 npm start로 시작하지만

PC 버전은 다운로드 받은 설정이 npm run dev로 실행하게 되어 있다.

npm run dev로 실행하면 웹과 응용프로그램이 동시에 실행되고,

npm run build로 빌드를 진행하고

npm run electron을 실행하면 응용프로그램만 실행된다.


 참고  React (특히 create-react-app)와 Electron을 같이 실행하는 방법은 설정이 복잡하다.

여기에서는 Christian Sepulveda이 제시한 방법을 사용했으니, 상세한 설정은 관련 자료를 읽어보면 된다.


실행 화면은 다음과 같다.

Web 버전에서는 왼쪽 메뉴로 구성했던 사용자, 채팅방, 계정 정보를

그림과 같이 탭(Tab)으로 제작하였다.

사용법은 웹 버전과 동일하지만 다음 그림처럼 대화 상대별로 채팅창을 실행할 수 있다.

Web 버전에서는 웹 브라우저내의 다이알로그로 구성했기 때문에 하나의 채팅창만 실행할 수 있고,

PC 버전에서는 별창(new Window)으로 구현하여 동시에 여러 채팅창을 실행 할 수 있다.


이상으로 DirectTalk9의 Web버전과 PC 버전을 설치하는 방법을 정리하였다.

Android 버전과는 채팅 할 수 없다.

Android 버전은 메시지 전송 시간을 서버 시간을 사용하고(serverTimestamp),

Web과 PC 버전은 클라이언트(JS의 new Date) 시간을 사용하기 때문에 오류가 발생한다.

Web과 PC 버전에서 서버 시간을 사용하도록 작성하면 되지만 Firebase 설치와 설정이 필요해서 제외하였다.

이외에도 몇 가지 버그가 있고, 구현해야 될 기능도 많지만 제법 그럴듯하게 작동하는 예제(?)로,

응용해서 사용한다면 개발에 도움이 될 것 같다.


작성된 데이터 Cloud Firestore에 저장하고, 구조는 Android 버전과 동일하다.


먼저 사용자(users)와 채팅방(rooms) 정보를 저장하는 컬렉션(collection)으로 구성하였다.

사용자(users)에는 사용자 고유 식별값(uid)과 계정(이메일, userid), 상태 메시지(usermsg), 사용자 이름(usernm)으로 구성한 일종의 회원 테이블이다.

토큰(token)은 Firebase에서 제공하는 것으로 FCM(Firebase Cloud Message)을 사용하기 위해 필요한 필드로

Andoid 버전에서는 사용하지만 Web과 PC 버전에서는 아직 구현하지 않아서 사용하지 않는다.

로그인과 회원에 대한 기본 정보는 Firebase 인증(Authentication)으로 처리하지만

Firebase 인증으로 처리되지 않는 정보들을 users 컬렉션에서 저장하고 관리한다.



채팅방(rooms)은 채팅 정보를 관리하는 컬렉션으로,

마지막 메시지(lastmessage), 채팅방 참여자(users)의 필드로 구성된다.

메시지(messsge)는 사용자가 작성한 메시지로 각 채팅방의 하위  컬렉션으로 작성되고,

메시지 문장(msg), 메시지 종류(텍스트, 이미지, 파일), 작성시간(timestamp), 작성자(uid)로 구성했다.

메시지를 읽은 사용자(readusers)는 메시지별 안 읽은(unread) 사용자 수(참여자수-읽은 사용자수)를 보여주는데 사용한다.

마지막 메시지(lastmessage)와 관련된 필드는 메시지(messsge) 컬렉션과 동일한 구조를 가지고,

채팅방 리스트를 출력할 때 마지막 메시지 내용과 시간을 보여주기 위해 사용했다.

채팅방 참여자(users) 사용자의 고유값(uid) 값을 키(필드)로 사용한다.


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등에서 실행할 수 있다.



앞서 생성한 firebaseExample 프로젝트에 간단한 게시판 기능을 구현하며 기초적인 Firebase(Realtime Database) 사용법을 정리한다.

Node.js를 이용하여 Firebase의 Realtime Database에 데이터를 저장하고 조회하는 CRUD 게시판을 제작한다.

관련된 상세한 설명은 Firebase에 정리되어 있고, 여기서는 이용하는 코드만 정리한다.

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


1. 시작하기

2. Realtime Database 기반 게시판

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

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

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


앞서의 간단한 예제에서는 Firebase 라이브러리를 자바스크립트로 가져와서 사용한 예제로 별도의 설치가 없었지만,

Node.js에서 사용하기 위해서는 Firebase를 설치해야 한다.

firebaseExample 폴더에서 다음 명령어를 실행하여 Firebase를 설치한다.

npm install firebase --save


다음으로 app.js 파일을 열어서 다음 문장을 추가한다.

app.use('/board1', require('./routes/board1'));

routes 폴더에 있는 board1.js 파일을 board1 이라는 가상 폴더(/)로 사용하겠다는 것이다.

웹에서 board1/list, board1/form 과 같이 입력해서 사용한다.


board1.js의 내용은 다음과 같다.

board1.js

먼저, 콘솔에서 다음 명령어로 dateformat 라이브러리를 설치한다.

dateformat은 위 코드에서 저장된 날짜를 형식에 맞추어 출력하기 위해 사용되었다 [라인 4, 27, 39].

    npm install dateformat --save

저장 할때는 자바스크립트의 now()함수로 년월일시분초(ms)까지 저장하고,

웹 페이지에 출력할때에는 dateformat을 이용하여 년월일만 출력한다 [라인 27, 39].


Firebase의 Realtime Database를 이용하여 게시판을 만들기 위해,

앞서 테스트로 입력한 것처럼 Firebase에서 복사해온 config  값들을 붙여넣기한 후 초기화 한다 [라인 10~18].


본격적인 게시판과 관련된 코드로

데이터 CRUD(Create, Read, Update, Delete)를 구현하기 위해

boardList [라인 20], boardRead [라인 33], boardForm[라인 43], boardSave[라인 57], boardDelete[라인 73]의 5 개의 컨트롤(URL)을 정의하였다.

게시판 구성에 대한 것은 이전에 정리하여 여기서 따로 정리하지 않는다.


boardList는 글 리스트를 출력하는 컨트롤로 Realtime Database에 저장된 데이터를 가져와서 화면에 출력한다.

Realtime Database에 접근하기 위해 firebase.database()를 사용하고 [라인 21],

Realtime Database에서 board의 데이터를 모두 가져오도록(once) 했다[라인 21].

가지고 온 데이터는 키(key)와 데이터로 구성된 변수 snapshot으로 반환되는 데,

snapshot을 그대로 HTML (ejs)로 보낼 수 없어 배열 rows로 변환해서 사용한다.


별도의 변환 함수가 있는 것이 아니고,

snapshot의 개수 만큼 반복해서(forEach) [라인 23]

키는 제외하고 데이터만 추출해서(val()) [라인 24], rows에 추가한다 [라인 27].

변환이 완료되면, views의 board1폴더에 있는 boardList.ejs에 rows를 파라미터로 지정해서 호출한다 [라인 29].


게시판 리스트 구현에서 Realtime Database의 단점을 확인 할 수 있다.

orderByKey는 정렬을 의미하는데 [라인 21] 내림차순(DESC)이 제공되지 않는다.

즉, 최신글이 가장 앞에 나오는 기능을 구현할 수 없다.

검색 기능도 제한적이라 페이징 등의 처리를 구현하기 어려운 문제가 있다.

리스트와 관련된 상세한 내용은 Firebase 문서를 참고 하면 된다.


호출된 boardList.ejs [라인 29] 에서는 다음과 같이 작성되어 있다.

boardList.ejs

대부분 화면 출력을 위한 HTML 코드이고

라인 27 부터 36 이 컨트롤에서 넘겨진 데이터(rows)의 값을 적절하게 디자인해서 출력하는 코드이다.

rows 가 배열이니 배열의 개수 만큼 반복해서(for) [라인 27],

각각의 필드(brdno, brdtitle, brdwriter, brddate) 값을 화면에 출력(=)한다 [라인 30~33].


Node.js를 재가동하고(npm start), 웹 브라우저에서 http://localhost:3000/board1/boardList를 입력하여

앞서 테스트로 입력한 데이터가 그림과 같이 출력되는지 확인한다.


다음으로 글쓰기 기능을 구현한다.

글쓰기는 사용자가 입력하는 화면(boardForm)과

사용자가 저장 버튼을 눌렀을 때, 입력한 값을 받아서 저장(boardSave)하는 부분으로 구성된다.


board1.js의 코드를 보면 사용자가 입력하는 화면에서는 두 가지 기능을 처리한다.

글번호(brdno) 값이 없으면 신규(new) 글쓰기로 별 다른 처리 없이 진행하고 [라인 44~47],

값이 있으면 글 수정을 위해 글번호에 해당하는 데이터를 가지고 와서 화면에 출력한다 [라인 49~54].

신규일 경우에는[라인 44] boardForm.ejs 파일을 호출하고 끝나지만 [라인 45].

수정일 경우에는 firebase.database()에서 파라미터로 지정된 글번호(req.query.brdno)를 지정해서 하나의 값만 가지고 온다 [라인 49].

데이터를 가지고 오는 것이 글 리스트의 사용법과 동일하지만 [라인 21],

Board 뒤에 키 값을 넣어서 하나의 데이터만 가지고 오도록 하는 차이가 있다.


boardForm.ejs는 컨트롤에서 넘겨준 값(row)를 화면에 출력하는 기능을 한다.

boardForm.ejs

사용자가 새 글을 쓰는 경우에는 단순하게 HTML을 출력하고,

수정일 경우에는 넘겨 받은 값(row)를 출력하기 위해 각각의 필드 값을 지정한다 [라인 17, 21, 25].

신규인지 수정인지를 판단하기 위해 글 번호(고유값, PK) 값을 보관하는데 [라인 30],

작성일자(brddate)도 hidden 필드로 값을 보관해야 한다 [라인 31].

이것도 Realtime Database의 단점으로,

Realtime Database는 수정하는 필드 값만 지정해서 사용할 수 없다.

저장시 지정된 필드(Json 키)만 저장하기 때문에 수정시 JSon 구성에 필드 지정이 안되어 있으면 저장되지 않는다.

글 수정시 작성자, 글제목, 글내용만 수정했다고 이것만 저장하면 작성일자는 삭제된다는 의미이다.

이 예제는 필드가 몇개 없어서 hidden으로 추가하면 되지만, 실제 사용중에는 몇 십개의 필드를 사용하는 경우가 많다.

이 경우 일반적인 RDBMS처럼 구현할 수 없고, Realtime Databas는 다른 방법을 사용해야 한다.


글을 작성하고 저장 버튼을 누르면 board1.js의 boardSave 컨트롤이 호출된다 [라인 57~71].

boardSave에서는 사용자가 작성한 값을 저장(set)한다 [라인 65].

저장하기 전에, 글번호(brdno) 값이 없으면 새 글 작성으로 보고 키 값 [라인 60]과 작성일자 [라인 61]의 값을 생성한다.

글 수정일 때는 입력화면에서 받은 값을 그대로 저장하면 되는데,

HTML에서 작성일자 값이 문자로 넘어오기 때문에 다시 숫자로 변환하는 처리를 해준다 [라인 63].

Realtime Database에 저장하기 위해서는 데이터가 Json 형태로 저장되어야 하는데,

Node.js(express)에서 사용자가 입력한 값을 Json으로 넘겨 주기 때문에, 그대로(postData = req.body) 사용한다 [라인 58].


앞서의 테스트에서는 update를 사용했지만 [라인 66~68], 글 저장에서는 set을 사용하였다 [라인 65].

Update는 여러 개의 Json 데이터를 한번에 저장할 때 사용하고,

Set은 한번에 하나의 데이터를 저장할 때 사용한다.

자세한 사용법은 Firebase 문서에 정리되어 있다.


저장된 데이터는 글 리스트와 Firebase 콘솔에서 확인 할 수 있다.



글 읽기(boardRead)는 글 리스트에서 하나의 행(글번호)을 선택하면 상세한 내용을 출력하는 페이지이다 [라인 33~41].

지정된 글번호(brdno)을 가지고 오는 것은 글 수정과 동일하고 [라인 49~54], 화면에 출력하는 방법은 다음과 같다.

boardRead.ejs

boardRead.ejs의 내용은 글 수정과 비슷하게 작성하는데

글 수정은 사용자가 수정할 수 있도록 입력상자(text)를 사용하고, 글 읽기는 단순하게 지정된 값을 화면에 출력한다 [라인 16, 20, 24].


마지막으로 글삭제(boardDelete)는 주어진 글번호(brdno) 값을 remove()함수로 삭제한다 [라인 74].

글 삭제는 별도의 화면이 없고, 삭제 후 글 리스트로 이동한다 [라인 75].


이상으로 Realtime Database을 이용하여 Node.js(Express)에서 간단한 게시판 기능을 구현하였다.

제법 그럴 듯 해 보이지만, 단순한 기능 구현에도 두 가지 문제가 나타났다.

1. 내림차순 정렬 안됨

2. 데이터 수정시 모든 필드를 나열해야 함

정리하지 않았지만 이외에도 많은 단점이 보였다.


개인적으로는 Realtime Database는 단순한 정보를 저장하는 기능에 적합한 것 같고, 복잡한 데이터 처리에는 맞지 않는 것 같다.

다만, 이러한 문제들을 해결하기 위해 Cloud Firestore(베타)가 새로 나온 것 같다.






Firebase는 Realtime Database외에 Cloud Firestore (beta)라는 클라우드 기반 데이터베이스 솔루션을 제공한다.

구글에 따르면 Cloud Firestore는 유연하고 확장 가능한 NoSQL 클라우드 데이터베이스라고 하고

두 데이터 베이스에 대한 차이는 Firebase 문서에 잘 정리되어 있다.


이번에는 앞서 생성한 예제(firebaseExample) 프로젝트의 Realtime Database를 Cloud Firestore로 변환하여 간단한 게시판 기능을 구현한다.

앞서 작성한 Realtime Database 예제에서 Realtime Database에 접속하여 사용하는 코드만

Cloud Firestore 용 코드로 수정하는 방식으로 정리하기 때문에 이전 내용을 먼저 숙지 해야 한다.

관련된 상세한 설명은 Firebase 문서를 참고하면 되고, 관련 소스는 GitHub에서 받을 수 있다.


1. 시작하기

2. Realtime Database 기반 게시판

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

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

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


Cloud Firestore (beta)를 사용하기 위해 Firebase 콘솔의 Database 관리화면에서 상단에 있는 [Realtime Database]를 선택한다.

그림과 같이 Realtime Databas와 Cloud Firestore 선택 화면이 나타난다.

(왼쪽에 있는 [Database] 메뉴를 선택해도 된다.)


Cloud Firestore를 선택하면 다음과 같이 화면이 출력된다.

실제로는 [잠금모드로 시작]을 선택해야 하지만, 편의상 [테스트 모드로 시작]을 선택한다.


Realtime Databas가 Cloud Firestore로 변경되어 출력되면 사용할 준비가 된 것이다.


하나의 앱(웹)에 하나의 Firebase의 프로젝트가 사용될 수 있기 때문에,

다음과 같이 app.js에서 board1 (Realtime Databas예제)을 주석처리하고 board2 (Cloud Firestore 예제)를 추가해 준다.

전체 코드를 보기 위해 각각의 js 파일에서 Firebase에 접속하도록 작성했기 때문에 모든 예제를 동시에 실행할 수 없다.

실제 사용할때는 하나의 데이터 베이스만 선언해서 사용하도록 구현해야 한다.


board1과 board2는 대부분 동일한 코드로 구성되었고, 데이터 베이스 관련 부분만 차이가 있다.

따라서 board1.js와 board2.js의 차이나는 부분만 정리한다.

대부분의 HTML(ejs)는 동일하기 때문에 board1 폴더를 그대로 복사해서 사용하면 된다.


먼저, board2.js의 코드는 다음과 같다.

board2.js

Realtime Databas와 Cloud Firestore의 차이는 Firebase 문서에 잘 정리되어 있다.

사용한 코드 상의 차이를 몇 개만 정리하면,

Realtime Databas는 firebase.database()로 데이터를 조작하고

Cloud Firestore는 firebase.firestore()로 조작한다 [라인 19].

board1에서는 firebase.database()을 그대로 사용했고

board2에서는 firebase.firestore()를 db 변수로 선언해서 사용한다 [라인 19].


주의: Firebase 서버에 접속하는 방법에도 차이가 있지만 여기서 정리하지 않고 Hosting에서 다시 정리한다.

Firebase에서는 Firestore 사용시 서비스 계정을 이용을 추천하는데, 시작하는 수준에서 너무 많은 내용을 다루면 복잡할 것 같아서 정리하지 않는다.


데이터를 가지고 오는 코드에도 차이가 있다.

Realtime Databas는 Json 노드 방식으로 저장을 하고,

Cloud Firestore는 컬렉션(collection)이 있고, 그 하위에 문서(Document), 그리고 Json 데이터가 필드로 저장된다.

다음 그림과 같이 board 컬렉션에 고유값으로 생성된 문서(gprx1Fq0apDB6tQFv7rb), 그리고 게시판  데이터(Json)가 저장된다.

즉 일반적인 관계형 데이터 베이스로 이야기 하면, board 테이블에 하나의 행(문서)이 Json구조로 저장되는 것이다.

데이터 행 구분을 Realtime Database와 동일하게 고유값으로 구별하여 작성하였다.


실제 구현된 코드를 보면 다음 코드와 같이 FireStore에서 조회된 데이터 처리는 동일하다.

데이터를 조회하는 함수 이름에 조금의 차이가 있다.

router.get('/boardList', function(req, res, next) {
    db.collection('board').orderBy("brddate", "desc").get()
        .then((snapshot) => {
            var rows = [];
            snapshot.forEach((doc) => {
                var childData = doc.data();
                childData.brddate = dateFormat(childData.brddate, "yyyy-mm-dd");
                rows.push(childData);
            });
            res.render('board2/boardList', {rows: rows});
        })
        .catch((err) => {
            console.log('Error getting documents', err);
        });
});

board로 콜렉션(collection)을 지정하고, once가 아닌 get을 사용한다.

가장 큰 차이는 올림차순(desc) 정렬이 가능하다는 것이다.

이외에도 다양한 조건에 의한 검색이 가능하고, 상세한 설명은 Firebase 문서에 정리되어 있다.


글 읽기(baordRead)와 글 수정(baordForm)의 데이터 조회도 리스트 코드와 동일해서 따로 정리하지 않는다.


Realtime Databas와 Cloud Firestore의 차이 중 하나는 저장 방식에 있다.

Cloud Firestore에서는 새글을 작성할때,

컬렉션을 지정하고(db.collection("board")) 문서 함수를 (db.collection("board").doc())를 호출하면,

새로운 문서가 생성되고 고유 번호(doc.id)가 자동으로 부여된다.

router.post('/boardSave', function(req,res,next){
    var postData = req.body;
    if (!postData.brdno) {  // new
        postData.brddate = Date.now();
        var doc = db.collection("board").doc();
        postData.brdno = doc.id;
        doc.set(postData);
    } else {                // update
        var doc = db.collection("board").doc(postData.brdno);
        doc.update(postData);
    }
   
    res.redirect('boardList');
});

글을 저장할때 사용하는 set과 update의 의미가 Realtime Databas와 차이가 있다.

set은 기존에 데이터가 있던 지, 없던지 새로 작성하고(있으면 삭제),

update은 기존 데이터를 수정하여 저장한다.

특히, update는 모든 필드가 지정되지 않아도 지정된 필드만 수정한다.

앞서 Realtime Databas의 글 저장 예제에서 처럼 brddate을 HTML(boardForm.ejs)에서 hidden 필드로 가지고 있을 필요가 없다.


이상으로 Cloud Firestore를 이용하여, Realtime Database와 유사하게 게시판 기능을 구현하였다.

Cloud Firestore는 검색 엔진인 루씬(Lucene)의 향기를 풍기며, 제법 강력한 데이터베이스 기능을 제공하고 있는 것 같다.

보다 상세한 기능은 문서를 읽어보길 바라고,

특히 데이터 쿼리 문서를 읽어 보면 제법 그럴듯한 게시판을 구현 할 수 있을 것 같다. (이건 각자 ~~)


주의: Node.js 6 이하의 버전에서는 다음과 같은 오류가 발생한다.

Function DocumentReference.update() called with invalid data. Data must be an object, but it was: a custom object
FirebaseError: Function DocumentReference.update() called with invalid data. Data must be an object, but it was: a custom object
    at FirestoreError.Error (native)


json 데이터 형식이 맞지 않아서 생기는 오류로 다음과 같은 변환 처리를 해줘야 한다.

router.post('/boardSave', function(req,res,next){
    var postData = JSON.parse( JSON.stringify(req.body));

    생략 ~~


콘솔창에 다음과 같은 경고 메시지도 출력된다.

Firebase 초기화후에 다음과 같이 설정하면 위 경고 메시지를 제거할 수 있다.

생략 ~~

firebase.initializeApp(config);
var db = firebase.firestore();
db.settings({timestampsInSnapshots: true})

생략 ~~

최신 버전의 Node.js를 사용하면 위와 같은 문제가 생기지 않지만,

마지막에 다룰 무료 호스팅(Firebase Hosting)Node.js 6을 지원한다. 최신 버전을 지원하지 않는다.






이번에는 Firebase 인증(Authentication) 기능을 이용하여, 실제 게시판처럼 로그인한 사용자만 사용하도록 작성한다.


1. 시작하기

2. Realtime Database 기반 게시판

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

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

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


Firebase에서는 인증과 관련된 아주 많은 기능을 제공하고 있다.

회원 가입, 회원 리스트 등의 기능뿐만 아니라 페이스북, Gmail등의 로그인 기능 등을 제공하고 있다.

너무 많은 기능이 있고, 이것을 문서로 제공해서 오히려 익히기 어렵게 느껴지기 때문에 여기에서는 로그인 기능만을 정리한다.

따라서, 앞서 작성한 Cloud Firestore 기반 게시판에 로그인 기능과 로그인한 사용자만 사용하도록 구현한다.

관련된 상세한 설명은 Firebase 인증 문서를 참고하면 되고, 관련 소스는 GitHub에서 받을 수 있다.


먼저, Firebase 콘솔에서 Authentication(인증)을 선택하고, 화면 하단에 있는 [로그인 방법 설정]을 선택한다.


로그인 제공업체 리스트에서 [이메일/비밀번호]를 선택한다.


첫 번째로 보이는 [사용 설정]을 활성화 시키고 저장한다.


[사용자] 탭을 클릭해서 [사용자 추가] 버튼을 클릭하고,

실행된 팝업창에서 로그인 ID (이메일)와 비번번호를 입력한다.


다시 화면 중앙에 있는 [사용자 추가] 버튼을 클릭해서 사용자를 생성한다.


간단하게 사용자(test@test.com)를 생성하였다.

프로그램으로 생성하고 관리하는 방법은 Firebase 문서를 참고하면 된다.

아쉬운 점은 사용자 이름(별명-displayName)을 입력하는 방법은 프로그램으로 처리해야 한다는 것이다.


board2.js와 board2 폴더를 복사해서 board3.js와 board3 폴더를 생성한다.

app.js에서 다음과 같이 기존 컨트롤들은 주석 처리하고, board3을 활성화 한다.

app.use('/', indexRouter);
app.use('/users', usersRouter);
//app.use('/board1', require('./routes/board1'));
//app.use('/board2', require('./routes/board2'));
app.use('/board3', require('./routes/board3'));

app.js


로그인 기능을 구현하기 위해 다음 코드를 board3.js에 추가한다.

사용자의 로그인 정보를 입력받을 화면(loginForm)와 로그인 처리를 수행할(loginChk) 컨트롤을 구현한 것이다.

router.get('/loginForm', function(req, res, next) {
    res.render('board3/loginForm');
});

router.post('/loginChk', function(req, res, next) {
    firebase.auth().signInWithEmailAndPassword(req.body.id, req.body.passwd)
       .then(function(firebaseUser) {
           res.redirect('boardList');
       })
      .catch(function(error) {
          res.redirect('loginForm');
      });   
});

용자의 로그인 정보를 입력받을 화면(loginForm)은 별다른 처리 없이 HTML (loginForm.ejs) 페이지를 호출한다.


loginForm.ejs

사용자의 아이디(id)와 비밀번호(passwd)을 입력받도록 구성하면 된다 [라인 17, 21].


loginChk에서는 signInWithEmailAndPassword 함수로 사용자가 입력한 아이디와 비밀번호를 Firebase에 전송해서

맞으면 (then) 게시판 리스트로 가고, 틀리면(catch) 다시 입력하도록 구현했다.


http://localhost:3000/board3/loginForm로 접속해서 로그인이 잘되는지 확인해 본다.

앞서 Firebase 콘솔에서 입력한 아이디(test@test.com)와 비밀번호(test1234)을 이용해서 확인하면 된다.


board3.js 파일에 다음과 같이 로그인되지 않았으면 (! firebase.auth().currentUser),

로그인 창으로 이동하는(res.redirect('loginForm')) 코드를 추가한다.

~~ 생략 ~~

router.get('/boardList', function(req, res, next) {
    if (!firebase.auth().currentUser) {
        res.redirect('loginForm');
        return;
    }
    db.collection('board').orderBy("brddate", "desc").get()
          .then((snapshot) => {
    ~~ 생략 ~~   
});


router.get('/boardRead', function(req, res, next) {
    if (!firebase.auth().currentUser) {
        res.redirect('loginForm');
        return;
    }
   
    db.collection('board').doc(req.query.brdno).get()
    ~~ 생략 ~~   
});

router.get('/boardForm', function(req,res,next){
    if (!firebase.auth().currentUser) {
        res.redirect('loginForm');
        return;
    }
   
    ~~ 생략 ~~   
});

router.post('/boardSave', function(req,res,next){
    var user = firebase.auth().currentUser;
    if (!user) {
        res.redirect('loginForm');
        return;
    }
   
    var postData = req.body;
    if (!postData.brdno) {  // new
        postData.brddate = Date.now();
        var doc = db.collection("board").doc();
        postData.brdno = doc.id;
        postData.brdwriter = user.email;
        doc.set(postData);
    ~~ 생략 ~~   
});

router.get('/boardDelete', function(req,res,next){
    if (!firebase.auth().currentUser) {
        res.redirect('loginForm');
        return;
    }
   
    ~~ 생략 ~~   
});

board3.js

로그인 여부를 확인하는 코드는 모두 동일하다.

현재 로그인한 사용자(currentUser)가 있으면 로그인한 상태로 판단한다.

다만, boardSave에서는 조금 차이가 있는데,

현재 로그인한 사용자(currentUser)를 user 변수로 받아서 사용한다.

user 변수로 사용하는 이유는 작성자(brdwriter) 필드에 아이디(email)을 넣어주기 위해서 이다.

이전에는 사용자를 확인할 수 없어서 글 작성시 사용자가 입력했지만,

로그인 기능을 구현하였기 때문에, 위 그림과 같이 별도로 입력받지 않고 로그인한 정보를 이용한다.


새로운 글을 추가하면 다음과 같이 작성자(writer)에 현재 로그인한 사용자의 아이디가 나타난다.

이상으로 간단하게 로그인 기능과 로그인한 사용자만 글을 읽고 쓰도록 구현했다.

자신의 글만 수정하고 삭제 하는 등의 기능도 구현해 보면 실력향상에 도움이 될 것이다.

회원 관리 기능들도 구현해서 사용자의 이름(displayName)을 사용할 수 있도록 하면 제법 그럴 듯 하게 보일 것이다.


마지막으로 Firebase에서 제공하는 무료 호스팅(Hosting)을 정리한다.

Firebase 호스팅은 Node.js 기반으로 제공되며, 자세한 사항은 Firebase 호스팅 관련 문서를 참고하면 된다.


1. 시작하기

2. Realtime Database 기반 게시판

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

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

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


Firebase 호스팅은 무료이고 간편하게 사용할 수 있는 장점이 있지만,

Node.js 6 (최신 버전이 8)을 지원하는 단점과 Express 사용이 조금 불편하고 제약이 있는 등의 단점도 있다.


먼저, Firebase 콘솔의 Hosting 메뉴에서 [시작하기] 버튼을 선택한다.


firebase-tools을 설치하라는 메시지가 출력된다.

설치 문장을 복사해서 메모장 등에 보관하고 [계속] 버튼을 클릭한다.


콘솔에서 firebase 호스팅을 제어하는 명령어가 제공된다.

3 개의 명령어를 복사해서 보관하고, [계속] 버튼을 클릭한다.


마지막으로 호스팅 대시보드가 출력된다.

처음의 도메인 부분에서 Firebase 호스팅에서 제공하는 도메인 외에 다른 도메인을 사용하도록 설정할 수 있다.

다음의 배포 기록은 클라이언트(개발자 PC등)에서 배포(deploy)한 기록이다.


PC의 콘솔에서 앞서 복사해 두었던 문장을 이용하여 Firebase 도구를 설치한다.

> npm install -g firebase-tools


Firebase 도구(CLI)를 설치하면, 콘솔에서 Firebase 명령어들을 실행할 수 있다.

Firebase 도구(CLI)는 Firebase 프로젝트 관리, 조회, 배포를 위한 여러 가지 도구를 제공하므로 보다 상세한 설명은 관련 문서를 참고하면 된다.

> firebase login

> firebase init

> firebase deploy


login은 PC에서 Firebase 웹 콘솔을 자유롭게 이용하기 위해 Firebase에 접속하는 것으로 gmail 계정등을 입력한다.

콘솔에서 firebase login를 실행하면 웹 브라우저가 실행되어, 다음 그림과 같이 로그인 화면이 실행된다.

처음 한번만 로그인하면 자유롭게 사용할 수 있다.

init는 호스팅 하기 위한 프로젝트를 생성(초기화)하기 위해 사용하고

deploy는 작성한 프로젝트를 서버에 배포할 때 사용한다.


firebase 호스팅을 사용하기 위해서 앞서 사용했던 firebaseExample 프로젝트(폴더) 대신에 firebaseHosting 폴더를 새로 생성한다.

그림과 같이 콘솔창에서 firebaseHosting로 이동(cd)한 후, firebase init를 입력하고 실행한다.

진행(Are you ready to proceed)를 묻는 질문에 Y를 입력하고 엔터키를 눌러 다음으로 넘어간다.


사용할 Firebase의 서비스를 선택하라는 메시지가 출력된다.

상하 화살표 키를 이용하여 이동하고, 스페이스 바를 이용하여 선택(*)과 해제( )를 할 수 있다.

Firestore, Function, Hosting을 선택하고 엔터키를 누른다.

Firestore는 게시판 예제 중 Firestore 기반 게시판 예제(board2)를 호스팅 할 것 이기 때문이고

Function은 Express 프레임워크를 사용하기 위해서 선택한다.


다음으로 해당 계정(gmail)이 사용할 수 있는 Firebase의 프로젝트 리스트가 출력되고 이중에서 호스팅으로 사용할 프로젝트를 선택하고 넘어간다.


기타 rules, index등은 엔터키를 쳐서 넘어가고 (기본값 사용), JavaScript와 Typescript 선택화면에서 JavaScript를 선택한다.


ESLint와 npm 종속성 설치에 Y를 선택한다.


public 폴더를 지정하고(엔터), 싱글페이지 설정은 하지 않고(No),

Firebase 초기화 설치를 종료한다.


탐색기에서 firebaseHosting 폴더를 열어보면, 그림과 같이 제법 많은 파일이 생성된 것을 볼 수 있다.

firebaseHosting폴더는 Node.js의 기본 폴더 구조와 비슷해 보이는데, node_modules폴더의 위치가 다르다.

firebaseExample에서는 firebaseExample 폴더 아래에 있지만,

firebaseHosting에서는 firebaseHosting폴더 하위의 functions 폴더하위에 있다.

이 차이로 인해 각종 라이브러리 설치시  (npm ~~)

firebaseExample에서는 firebaseExample 폴더에서 실행하고,

firebaseHosting에서는 firebaseHosting폴더 하위의 functions 폴더에서 실행해야 한다.

라이브러리가 설치되는 node_modules 폴더와 설치된 라이브러리 정보가 저장되는 package.json가 functions 폴더에 생성되어 있다.


firebase serve를 입력해서 웹 서버를 실행한다 (npm start가 아니다).


웹 브라우저에서 http://localhost:5000/를 입력해서 그림가 같이 출력되면 firebase 호스팅을 위한 Node.js 프로젝트가 제대로 설정된 것이다.


기본으로 작성된 index.html 파일 뿐이지만, 이것을 Firebase 호스팅 서버에 배포한다.

콘솔에서 firebase deploy를 입력해서 실행한다.


Firebase 콘솔에서 Hosting 메뉴을 실행해서 (firebaseExample 프로젝트), 하단의 추가된 배포 기록을 확인한다.


위 그림의 중앙에 있는 도메인 정보를 마우스로 클릭하나, 웹 브라우저에서 해당 도메인을 직접 입력한다.

다음 그림과 같이 앞서 로칼(PC)에서 실행한 것과 동일한 페이지가 실행되면 제대로 배포가 완료된 것이다.


이상으로 Firebse 호스팅의 기본적인 사항을 정리하였다.

이미지 양이 많아서 무엇인가 복잡해 보이지만, 조금 익숙해지면 사용법이 쉽고 간편하다는 것을 알 수 있다 (특히 배포).


앞서의 예제는 Express 프레임워크 기반으로 개발되어 Firebse 호스팅에서 그대로 사용할 수 없다.

Express 프레임워크을 사용하는 방법을 중심으로 보다 상세한 설치 방법은 다음 문서에서 정리한다.


다음은 Firebase 호스팅을 사용하기 위해 자주 사용하는 명령어이니 기억해두는 것이 좋다.

> firebase init

> firebase deploy

> firebase serve




지금까지는 Firebse 호스팅을 사용하는 기본적인 사용법을 정리하였다.

여기에서는 앞서 작성한 게시판 예제를 Firebse 호스팅에 적용하는 방법을 정리한다.

1. 시작하기

2. Realtime Database 기반 게시판

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

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

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

앞서의 예제는 Express 프레임워크 기반으로 개발되어 Firebse 호스팅에서 그대로 사용할 수 없다.

Express 프레임워크을 사용하기 위해서는 몇 가지 설정을 수정해야 한다.


먼저, firebaseHosting 폴더에 있는 firebase.json 파일을 열어서 다음과 같이 수정해 준다.

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ]
  },
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
       {
         "source": "/**",
         "function": "api1"
       }     
    ]
  }
}

firebase.json

새로 입력되는 URL들을 api1이라는 함수를 호출해서 사용하겠다는 의미이다.


firebaseHosting 폴더 하위의 index.js 파일도 다음과 같이 수정한다.

const functions = require('firebase-functions');

const express = require("express")

const app1 = express();

app1.get("/hello", (request, response) => {
  response.send("Hello from Express on Firebase!")
})

const api1 = functions.https.onRequest(app1)

module.exports = {
  api1
}

index.js

첫 줄을 제외하고 모두 추가한 코드이다.

express에서 제공하는 방식으로 코드를 작성하고,

functions 함수를 이용하여 생성한 api1을 firebase.json 설정으로 넘기는 코드이다.

Firebase 호스팅에서는 express를 Firebase functions을 통하여 구현한다.


express가 로컬에 글로벌로 설치된 경우에는 별도 설치를 하지 않아도 functions폴더 하위의 node_modules에 추가 되어있다.

다만, npm으로 다시 설치하지 않으면 package.json 파일에 express 정보가 등록되어 있지않아 배포시 오류가 발생한다.

직접 package.json 파일에 express 정보를 등록하거나, npm install express --save로 설치해서 등록한다.


이상의 코드에서는 hello라는 URL을 추가했다.

웹 브라우저에서 http://localhost:5000/hello를 입력해서 그림과 같이 출력되면 제대로 설정된 것이다.



지금까지 Firebase 호스팅에서 express를 사용하는 방법을 정리하였고,

이번에는 앞서 작성한 게시판 예제(board2)를 추가해서 구현한다.

app.js에서 했던 것처럼 index.js 파일에 board.js 파일을 가져오기 하도록 설정하고,

ejs도 사용한다고 설정해 주어야 한다.

const functions = require('firebase-functions');
const express = require("express")
const app1 = express();

app1.set('view engine', 'ejs');
app1.engine('ejs', require('ejs').__express);

app1.get("/hello", (request, response) => {
  response.send("Hello from Express on Firebase!")
})

app1.use('/board2', require('./board2'));

const api1 = functions.https.onRequest(app1)

module.exports = {
  api1
}

index.js

다음으로 ejs 라이브러리를 설치 한다.

앞서의 예제들은 HTML 처리 부분을 모두 ejs로 구현하였다.

일반적인 Node.js에서는 express를 설치하면 별도로 ejs를 설치하지 않아도 되지만,

Firebase 호스팅을 사용하기 위한 Node.js에서는 다음과 같이 별도로 설치해야 한다.

단, functions 폴더로 이동해서 실행해야 한다 (이유는 앞서 정리).

> cd functions

> npm install ejs --save


이외에도 board2.js에서 추가로 사용한 dateformat 라이브러리를 설치해야 한다.

> npm install dateformat --save


functions폴더 하위에 view 폴더를 생성하고,

앞서 작성한 예제(firebaseExample)의 view 폴더 하위의 board2 폴더를 복사해서 넣어준다.

route폴더의 board2.js 파일도 functions 폴더에 복사한다.

로그인 기능이 있는 board3을 복사해도 되지만, 조금더 단순한 board2을 배포한다.


다음으로 Firebase Admin SDK를 설치한다.

> npm install firebase-admin --save

지금까지 Firestore를 웹으로 접근하는 방법을 사용했지만,

Firestore 문서에서는 Node.js일 경우 Firebase Admin을 이용하여 접속하도록 하고 있다.

주의: 설치시 반드시 --save 옵션으로 package.json에 설치된 라이브러리 정보가 저장되도록 해야 한다.

그렇지 않으면 배포(deploy)시 정보를 찾을 수 없다는 오류가 발생한다.


접속 및 초기화 하는 여러가지 방법을 제공하는데, Cloud 함수에서 초기화하는 다음 코드를 이용한다.

const admin = require('firebase-admin');
const functions = require('firebase-functions');

admin.initializeApp(functions.config().firebase);

var db = admin.firestore();


이 코드를 board2.js에 다음과 같이 추가한다.

var express = require('express');
var router = express.Router();
var dateFormat = require('dateformat');

const admin = require('firebase-admin');
const functions = require('firebase-functions');

admin.initializeApp(functions.config().firebase);

var db = admin.firestore();

router.get('/', function(req, res, next) {
    res.redirect('boardList');
});

router.get('/boardList', function(req, res, next) {

    ~~ 생략 ~~

board2.js

apiKey등 기존의 접속 정보를 사용하지 않는다.

이미 로컬에서 firebase login인으로 Firebase 서버에 접속이 되어 있고,

firebase init로 폴더를 프로젝트로 초기화 할때 기본적인 설정이 모두 되어 있기 때문이다.


firebase serve로 서버를 재가동하고,

웹 브라우저에서 http://localhost:5000/board2/boardList로 접속해서 잘 동작하는 지 글쓰기나 수정작업을 해 본다.


서버를 중지하고, firebase deploy로 Firebase Hosting 서버에 배포하도록 실행한다.


이상의 그림과 같이 eslint가 찾아낸 6개의 경고와 6개의 오류가 발생하면서 배포가 중지된다.

Eslint는 코딩 스타일을 점검하는 라이브러리로,

인터넷에 자료가 많으니 자세한 사용법은 검색해 보길 바라고, 여기에서는 간단하게 정리하고 넘어간다.


화면 중앙의 빨간색 메시지 위가 오류와 경고에 대한 정보를 나타내는 것으로

숫자: 숫자는 오류가 발생한 행과 열의 번호를 의미하고

다음의 단어는 오류(error)인지 경고(warning)를 의미한다.

그 다음의 문자열은 오류에 대한 구체적인 메시지를 나타내고

마지막 문자열(예: prefer-arrow-callback)은 오류의 이름 (규칙명)을 의미한다.

사실 Eslint는 코딩 스타일을 규정하는 것으로 실제 오류가 발생한 것은 아니기 때문에 앞서서 개발할 때에는 별 문제가 없었다.

Firebase deploy시에는 코딩 스타일 준수를 요구하는데,

오류(error)라기 보다는 규칙(rule) 위반으로 심각한 문제를 발생시킬 수 있다는 의미이다.


6개의 경고는 빨간색 메시지(6 warnings potentially fixable with the `--fix` option)처럼 Eslint 실행시 –fix 옵션을 주면 자동으로 수정된다.

자세히 살펴보면, 6개의 경고가 발생했지만

경고 종류는 하나로 콜백 함수보다는 화살표 함수 표현(arrow function expression)을 사용하라는 의미이다.

기존: router.get('/boardList', function(req, res, next) {

수정: router.get('/boardList', (req, res, next) => {

경고는 수정하지 않아도 Firebase에서 배포가 되므로 수정하지 않고 넘어간다.


경고를 수정하고 싶은 경우나 다시 오류를 확인하고 싶은 경우 firebase deploy를 실행시키기 보다는 eslint를 직접 실행하는 것이 좋다.

eslint는  functions 폴더 하위의 node_modules\.bin 폴더에 명령어가 설치되어 있다.

따라서 현재 폴더가 functions 일 경우, 다음과 같은 문장으로 문제점을 수정할 수 있다.

          node_modules\.bin\eslint ../../board2.js --fix



6개의 오류지만 오류로 지정된 행을 소스 코드에서 찾아보면 3가지 오류인 것을 알 수있다.

1. then()을 사용한 경우 마지막에 return을 사용하거나 throw을 사용: promise/always-return

2. (then() 다음에) catch() 사용: promise/catch-or-return

3. doc 변수 선언이 두 번 되었음: no-redeclare


.eslintrc.json 파일을 열어서 주어진 규칙명으로 규칙을 경고(1)나 사용하지 않음(off 또는 주석처리) 표시해도 된다.

여기에서는 다음과 같이 프로그램 코드를(빨간색) 수정하였다.

router.get('/boardList', function(req, res, next) {
    db.collection('board').orderBy("brddate", "desc").get()
        .then((snapshot) => {
            var rows = [];
            snapshot.forEach((doc) => {
                var childData = doc.data();
                childData.brddate = dateFormat(childData.brddate, "yyyy-mm-dd");
                rows.push(childData);
            });
            res.render('board2/boardList', {rows: rows});
            return;
        })
        .catch((err) => {
            console.log('Error getting documents', err);
        });
});

router.get('/boardRead', function(req, res, next) {
    db.collection('board').doc(req.query.brdno).get()
        .then((doc) => {
            var childData = doc.data();
           
            childData.brddate = dateFormat(childData.brddate, "yyyy-mm-dd hh:mm");
            res.render('board2/boardRead', {row: childData});
            return;
        })
        .catch((err) => {
            console.log('Error getting documents', err);
        });
});

router.get('/boardForm', function(req,res,next){
    if (!req.query.brdno) { // new
        res.render('board2/boardForm', {row: ""});
        return;
    }
   
    // update
    db.collection('board').doc(req.query.brdno).get()
        .then((doc) => {
            var childData = doc.data();
            res.render('board2/boardForm', {row: childData});
            return;
        })
        .catch((err) => {
             console.log('Error getting documents', err);
        });
});

router.post('/boardSave', function(req,res,next){
    var postData = JSON.parse( JSON.stringify(req.body));
    var doc = null;
    if (!postData.brdno) {  // new
        postData.brddate = Date.now();
        doc = db.collection("board").doc();
        postData.brdno = doc.id;
        doc.set(postData);
    } else {                // update
        doc = db.collection("board").doc(postData.brdno);
        doc.update(postData);
    }
   
    res.redirect('boardList');
});

board2.js

추가적으로 Cloud Firestore 게시판 예제에서 정리(하단의 주의 참고)하였지만, 

Firebase 호스팅은 Node.js 6 을 지원하기 때문에 사용자가 작성한 데이터(req.body)를 그대로 저장(set, update)하면 오류가 발생한다.

따라서, 위 코드의 파란색 코드처럼 Json 변환을 해주어야 한다.


다시 배포를 진행해서 "Deploy complete"가 출력되는지 확인한다.

경고가 있어도 배포는 잘 이루어진다.


Firebase 콘솔의 Hosting 메뉴에서 배포한 기록이 등록되었는지 확인한다.

배포가 잘 이루어진 경우 모든 배포 기록이 등록되어 있다.



웹 브라우저에서 firebase 호스팅에서 제공하는 도메인으로 접속해 본다.

https://fir-example-ec491.firebaseapp.com/board2/boardList











+ Recent posts