Firebase Web 채팅앱 만들기 - Hosting을 활용한 프로젝트 준비 작업

1) 예제 시작 소스 다운로드 받기

프로젝트를 시작하기 위해서 미리 구조를 잡아둔 예제 시작파일을 다운로드 받습니다.

예제 시작 파일을 받기위하여

https://github.com/cionman/firebase-tutorial-chat/ 아래 링크로 진입하여 commit 히스토리를 볼 수 있는 부분을 클릭합니다.

commit 히스토리 중 맨 아래 쪽 '1. 예제 시작 파일' 부분 우측에 '<>' 버튼을 클릭 합니다. 나중에 예제를 글 단위별로 커밋을 해두었으니 따라하시면서 commit 히스토리를 참조하시면 됩니다.

'1. 예제 시작 파일' 커밋 화면으로 진입한 후 아래의 스크린샷 부분을 클릭하면 예제 시작 파일을 다운로드 받을 수 있습니다.

1.예제 시작 파일.zip

다운로드 받은 파일을 프로젝트를 구성할 위치에 압축을 풀어줍니다.

다운받은 소스를 잠시 확인해보겠습니다.

index.html 파일 하나와 화면을 구성할 css, 폰트, 이미지, js가 포함되어 있습니다.

index.html 소스 하단을 보게되면 jquery, materialize, underscore가 포함되어 있습니다. jquery와 materialize 자바스크립트 파일은 materialize CSS framework가 꾸미는 modal 창 정도에만 사용될 것입니다.  예제에서 사용되는 소스들은 ES5 프로토타입 방식의 클래스 형태로 소스가 작성이 되어 있고, 유저, 채팅방, 메세지 데이터를 추가할때 사용할 템플릿으로 underscore.js를 사용하여 코드가 작성되어있습니다.

3) firebase-tools로 hosting 및 프로젝트 설정하기

firebase hosting 및 프로젝트를 설정하기 위해 앞서 npm 을 통하여 설치한 firebase-tools 을 이용하겠습니다. 

Windows라면 '명령 프롬프트', Mac 또는 리눅스 환경이라면 '터미널' 프로그램을 실행합니다. 그리고 압축파일 푼 위치로 진입합니다.

firebase init 명령어를 입력합니다. 명령어를 실행하면 다음과 같은 화면이 나올것입니다.

firebase init

이번 예제에서는 Firestore를 제외한 나머지서비스를 사용할 것입니다. 스페이스바 키를 누르면 선택을 할 수 있습니다. 아래와 같이 Firestore를 제외하고 나머지 모두 선택해주십시오.

선택 후 엔터 키를 누르면 아래와 같이 자신이 생성 해놓은 프로젝트 리스트가 보일 것입니다. 'firebase-tutorial-chat'  라는 이름으로 프로젝트를 생성하였습니다.  해당 프로젝트를 선택 후 엔터키를 누릅니다.

 다음은 Realtime Database의 권한을 묻는 질문이 나옵니다. 기본 값으로 그냥 엔터키를 누르면 'database.rules.json' 파일이 프로젝트 내에 생성이 됩니다.

이번 질문은 Cloud Functions을 사용하기 위해서 npm으로 dependency를 설치하겠냐는 질문이 나옵니다. 이번 예제에는 Cloud Functions를 사용할 것이기때문에 'Y' 를 입력하고 엔터를 누릅니다. 그러면 잠시동안 firebase-functions와 firebase-admin 라이브러리가 설치됩니다. 

이번 질문은 Hosting에 사용할 정적 파일(HTML, CSS, js) 소스 위치를 물어보는 질문입니다. 기본 public으로 사용하기 위하여 아무것도 입력하지 않고 엔터키를 누릅니다.

이번 질문은 Single-page app으로 사용하기 위하여 hosting으로 들어오는 신호 모두 index.html파일로 지정하겠느냐는 질문입니다. Single Page App을 만들 것이므로 'y' 를 입력하고 엔터를 누릅니다. 

이번 질문은 public 폴더 안에 index.html 파일을 덮어쓰겠냐는 질문입니다. 제가 미리 화면 구조를 잡아놓은 파일이므로 덮어쓰지 않습니다. 'N' 을 입력하고 엔터키를 누릅니다.(반드시 N을 해주세요!)

마지막 질문은 파일 전송 기능에 사용할 Storage 권한 파일에 대한 설정입니다.  우선 기본값을 사용하기 위해 입력하지 않고 엔터키를 누릅니다.

시작하기 위해 프로젝트 설정이 완료되었습니다. 

firebase deploy 명령어를 입력하여, 배포를 해보겠습니다.

firebase deploy

배포가 완료되고 맨 아랫 줄에 자신이 배포한 파일이 어떤 URL에서 서비스가 되고 있는지 확인할 수 있습니다.

해당 URL로 진입해봅니다. 아래의 화면이 나오면 성공적으로 준비가 되었습니다.

다음은 Authentication 을 활용하여 가입 및 로그인을 구현해보겠습니다.

예제 소개 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 권한 설정