티스토리 뷰








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

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

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

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




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


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





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


다운받은 소스를 잠시 확인해보겠습니다.
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 을 활용하여 가입 및 로그인을 구현해보겠습니다.





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

 




댓글
  • 프로필사진 비밀댓글입니다 2018.01.09 22:07
  • 프로필사진 수워니s 음 글 자체가.. 하나씩 따라해가는 방식으로 firebase 에 초점이 맞추어져있습니다.

    underscore의 모든 기능을 사용하는 것은 아니고 _template 메소드만 활용합니다. 특정영역에 dom을 끼워넣을때 string 문자열을 + 로 붙여 넣어 넣기보다 깔끔하게 쓰기위해서 쓰고 있습니다. underscore 의 template 관련해서만 조금 찾아보시면 될 듯합니다.

    html 구조는 음.. 제가 html 소스 안에 주석이 있는데 그 부분을 참고하시면.. 화면을 보면서 설명드리면쉽겠지만 .. 인터넷상이라 좀 어려움이 있네요.

    script defer 는.. 아래 사이트에 자세한 설명이 확인 가능합니다. 도움을 많이 못드려 죄송합니다.

    https://appletree.or.kr/blog/web-development/javascript/script-%ED%83%9C%EA%B7%B8%EC%9D%98-async%EC%99%80-defer-%EC%86%8D%EC%84%B1/
    2018.01.09 22:48 신고
  • 프로필사진 감사합니다 글 잘 보고 있습니다. firebase init 을 실행하니
    database rules 파일 정의하는 질문과
    install dependencies 하는 질문 사이에 아래 두 질문이 더 추가로 있네요. 혹시 확인하시고 필요하시면 문서 갱신하시면 좋을 듯 합니다!

    What language would you like to use to write Cloud Functions?
    Do you want to use ESLint to catch probable bugs and enforce style?
    2018.03.29 23:59 신고
  • 프로필사진 초보 ? Do you want to install dependencies with npm now? Yes
    [ ................] - loadDep:through2: sill resolveWithNewModule stubs@3.0.0

    해당 질문아래에 저기서 안넘어가고 있는데 혹시 어떤문제인지 알수있을까요?
    2018.05.02 23:18 신고
  • 프로필사진 포포야 강좌 감사드립니다.
    firebase init를 하니 Error: Command requires authentication, please run firebase login라는 메세지가 나오면서 진행이 안됩니다.
    MAC에서 터미널 열어서 작업 하고 있습니다.
    2018.06.28 12:14 신고
  • 프로필사진 수워니s firebase login 명령어를 입력하여 google 계정으로 로그인한 후에는 정상적으로 init이 되실 것입니다. 2018.06.30 23:30 신고
  • 프로필사진 지나오리 강좌 잘 보고 있습니다. 뭔지 몰라도 일단 따라해보는중 *-_-* 2018.08.09 23:30 신고
  • 프로필사진 ibbnmw 알 수 없는 명령어라고 뜨는데여 2018.09.01 21:17 신고
  • 프로필사진 무서운선생님 네. 저도여 2018.09.01 21:18 신고
  • 프로필사진 뚱이 사랑해요 저도여
    2018.09.01 21:19 신고
  • 프로필사진 뚱한 뚱이 음.... 터미널이랑 cmd에서 서로 다른 창이 뜨는 군요
    2018.09.01 21:43 신고
  • 프로필사진 굴김치 윈도우의 경우 마지막 부분 firebase deploy 하는 부분에서 npm --prefix "$RESOURCE_DIR" run lint
    이런 에러가 나오는데 firebase.json 에서 "predeploy"부분에서
    "npm --prefix %RESOURCE_DIR% run lint"
    으로 수정하면 잘 됩니다.
    2018.11.06 15:20 신고
댓글쓰기 폼