Firebase Web 채팅앱 만들기 - Firebase 설정하기

이제 예제 프로젝트를 수행하기 전 먼저 Firebase를 설정 및 준비를 해보겠습니다.

1. Firebase 프로젝트 추가하기

Firebase를 사용하기 위해서 가장 먼저 할 일은 Firebase Console로 진입하여 Firebase 프로젝트를 생성하는 일입니다.

그러기 위해 다음 URL을 방문하십시오. 

Firebase 홈페이지

https://firebase.google.com/

Firebase 홈페이지에서 우측 상단 GO TO CONSOLE 을 클릭하여 들어가면 아래와 같은 화면이 나옵니다.

화면을 보시면 이미 생성되어 있는 프로젝트 목록을 볼 수 있고, 프로젝트 추가 버튼이 있습니다. 프로젝트 추가 버튼을 누릅니다.

프로젝트 추가 버튼을 누르면 위와 같은 화면이 나옵니다. 프로젝트에 원하시는 이름으로 입력 합니다. 프로젝트 ID 값은 Hosting의 하위 도메인과 데이터베이스 URL등에 영향을 미치므로 Firebase에서 생성되어진 모든 프로젝트의 고유한 ID 값이 됩니다. 'fir-tutorial-kr' 값이 누군가에게 선점이 되어졌기 때문에 뒤에 '36bc4' 라는 임의의 문자가 표시되어 집니다. 옆에 연필 모양의 버튼을 누르면 수정할수는 있으나 누군가에게 선점되어져 있다면 아래의 그림처럼 '이미 사용 중이거나 사용할수 없는 프로젝트 ID입니다' 라는 메세지를 볼 수 있습니다. 서비스할 도메인 주소에 영향을 미치기 때문에 임의의 문자보다는 서비스를 사용할 사용자들이 기억하기 좋은 문자를 선택하는 것이 좋을 것입니다.

프로젝트 ID를 알맞게 설정하셨다면 국가/지역을 선택해야합니다. 이 때 국가/지역의 나라는 데이터를 서비스 하는 위치를 결정하는 값은 아닙니다.  수익보고서 등의 여러 데이터를 보여줄 때 국가의 정보에 맞추어져 보여줄 뿐입니다. 

프로젝트 이름, 프로젝트 ID, 국가/지역이 설정되었다면 프로젝트 만들기 버튼을 눌러 프로젝트를 생성합니다.

2. Node.js 설치하기

프로젝트를 추가하고 좌측 메뉴 중 Hosting 메뉴에 들어가보면 아래의 화면이 나옵니다. 시작하기 버튼을 눌러 봅시다.

이렇게 아래와 같이 Node.js를 설치하고 npm을 통하여 firebase-tools 프로그램을 설치를 요구하고 있습니다. Firebase 의 여타 서비스들은 Node.js가 필수는 아니지만,  Hosting의 경우 필수적으로 Node.js 설치를 요구하고 있습니다. SPA(Single Page Application)을 제작하기 위해 Angular, React 또는 Vue 같은 프론트엔드 프레임웍을 사용하신다면, Hosting 이외에 Realtime Database, Storage등의 서비스도 npm을 통해 라이브러리를 설치하고 앱을 제작하실 수 있습니다.

Node.js를 설치하기 위하여 다음 URL을 방문하십시오.

Node.js 홈페이지

https://nodejs.org

홈페이지를 보면 좌측은 안정적인 버전이고, 우측은 최신 버전입니다. 안정적인 8.9.0 LTS 버전을 다운받도록 합니다. 워낙 빠른 속도로 업데이트되어, 보고 게신 시점에는 버전업이 되어 있을 수 있습니다.

Node.js를 설치 한 후 firebase-tools를 설치하기 위해 윈도우즈의 명령프롬프트 또는 파워쉘 그리고 리눅스나 맥의 경우 터미널을 실행하고 아래의 명령어를 입력합니다.

npm install -g firebase-tools

맥이나 윈도우즈의 경우 상황에 따라 root 권한을 요구하며 설치가 안될 수 있는데 npm 앞에 'sudo' 라는 명령어를 입력합니다. 만약 sudo 명령어를 입력하였는데도 불구하고 에러가 난다면 아래의 명령어를 입력합니다. 

npm install --unsafe-perm -g firebase-tools

Firebase를 이용할 준비가 완료되었습니다. 다음은 Firebase Hosting을 활용한 프로젝트 설정을 해보겠습니다.

예제 소개 Firebase 설정하기 Hosting을 활용한 프로젝트 준비 작업 Authentication을 이용한 유저 가입 및 로그인 구현하기 Realtime Database를 이용한 채팅기능 구현 - Reatime Database 특징 및 데이터 구조 Realtime Database를 이용한 채팅기능 구현 - 유저데이터 저장하기 Realtime Database를 이용한 채팅기능 구현 - 유저리스팅 화면 Realtime Database를 이용한 채팅기능 구현 - 채팅화면 및 채팅메세지 리스팅 Realtime Database를 이용한 채팅기능 구현 - 채팅메세지 전송기능 Realtime Database를 이용한 채팅기능 구현 - 채팅방 리스팅화면 Realtime Database를 이용한 채팅기능 구현 - 채팅방 초대 기능 Realtime Database를 이용한 채팅기능 구현 - 접속 중인 유저 표시하기 Storage를 이용한 파일 전송기능 Cloud Messaging과 Functions을 이용한 푸시메세지 기능 - FCM Token 정보 저장 Cloud Messaging과 Functions을 이용한 푸시메세지 기능 - Functions를 통한 FCM 발송 Cloud Messaging과 Functions을 이용한 푸시메세지 기능 - Service worker를 이용한 FCM수신 Realtime Database 권한 설정