[Firebase Codelab 샘플] 01.FriendlyChat 웹 앱 만들기 환경 설정

회사에서 업무와 관련은 있되 기존 업무와 무관하게 해보고 싶은 분야를 할 수 있는 프로그램을 진행한다고 하여, 아이디어를 하나 내봤습니다. 제안한 주제에 대해 함께 하고자 하는 직원이 있으면 진행 할 수 있게 되는데, 어떤 시스템을 만들 때 정말 사람들이 흥미를 보이는 것이 무엇일까를 탐구하는 그런 주제라서 참여자가 있을지 모르겠네요. ㅋ

 

 

 

그 연구 주제를 구현하기 위한 개발 환경을 미리 좀 생각 해 봤는데, Firebase를 사용하는 것이 좋을 것 같아서, Firebase Web App에 대해서 한번 리뷰를 해보았습니다. CodeLab에 채팅 샘플이 있는데, 채팅이면 구상하는 시스템과 기반 구조에서 어느 정도 유사한 부분도 있어서 적당한 예인 것 같아요.

https://firebase.google.com/codelabs/firebase-web?hl=ko#0 

Firebase 웹 코드랩

 

기본 코드

 

github에 시작 할 때 사용 할 코드와 완성 된 코드가 함께 제공되고 있는데, web-start라는 폴더가 시작 환경에 맞게 설정 되어 있습니다.

https://github.com/firebase/codelab-friendlychat-web

GitHub - firebase/codelab-friendlychat-web: The source for the Firebase codelab for building a cross-platform chat app

VSCode로 진행을 할 예정인데, 저장소 루트가 아니라 web-start 폴더를 열어줘야 합니다.

Project 생성

Firebase를 처음 하는 경우라 가정하고, 리뷰를 해보겠습니다. 이전에 해보기는 했지만, 금방 다 까먹어서 실제로 처음하는 것과 거의 다름이 없죠.

 

프로젝트 생성은 모든 프로젝트 관련 된 처리를 하는 콘솔로 가서도 할 수 있고(아래 그림 우측 상단 체크 표시), 처음 사용하면 시작 화면에 바로 가는 버튼이 있기도 합니다. 

 프로젝트 만들기를 눌러서 시작 합니다.

프로젝트 이름을 설정하고 시작합니다. 이름은 자유롭게 하면 됩니다.

 

다음 화면에서 분석 하지 않도록 애널리틱스를 해제하는데, 해제 해야 하는 특별한 이유는 나오지 않습니다만, 아직 상용을 목적으로 하지 않으니, 불필요하게 리소스를 쓸 필요도 없고, 쓰지 않도록 해두겠습니다.

 

생성 중~~

프로젝트와 앱과의 관계

프로젝트를 만들고 나면 다시 앱을 만들어야 하는데, 프로젝트와 앱은 구분해야 합니다.

 

얘를 들어, 웹과 앱으로 서비스 하는 어떤 서비스를 개발하는 프로젝트가 있다고 하면, 이 전체는 프로젝트이고, 웹 Client와 앱 Client를 각각 앱이 되는 것이죠. Backend는 Firebase이고. Firebase의 장점이 다양한 유형의 앱을 지원하며, 웹/앱/유니티/플러터도 됩니다. 이것이 이번 프로젝트에 Firebase를 써보면 좋겠다 생각한 중요한 이유이기도 하죠.

 

 웹앱으로 한번 진행 해 보겠습니다.

 

 

앱 등록

앱 이름 및 기타 필요한 사항들을 설정합니다.

호스팅의 경우, 실제 인터넷으로 접근 가능한 곳에 배포되는 것인데, 따로 서버가 없더라도 Firebase에서 호스팅을 해주기 때문에 편리합니다.(제약이 있겠지만...)

앱 등록을 누른 후, SDK 추가 단계로 넘어가는데, 앱 등록 후 생성 된 프로젝트와 앱 정보를 설정하고 SDK 설치를 진행하는 단계입니다. 이때 CDN에서 배포되는 것을 쓰는 방식과 npm으로 서버측(개발 환경 기준으로 보면 로컬)에 설치하여 쓰는 방식 두 가지가 소개 되는데, 이 샘플은 npm 기준으로 진행이 됩니다.

 

npm?

 

node js를 공부 해 보면 배울 수 있는데, 웹앱이므로 웹앱 개발 환경을 할 때 필요한 것을 사용합니다. 웹팩 같은 것도 있고.. 이런 내용들은 오픈튜토리얼의 node js나 웹 개발 관련 된 내용에 잘 정리되어 있는 것 같습니다. 참고하시고~ 

 

npm으로 간다 생각하고, 발급 된 정보를 다운로드 된 프로젝트의 firebase-config.js에 붙여 넣습니다. 버젼에 따라 항목이 조금 다른 것 같은데, 직접 해 보는 시점을 기준으로 하면 될 것 같습니다.

 

Node JS

 npm을 이용해서 firebase SDK를 설치해야 되는데, Node JS를 설치하면 함께 설치 됩니다.  그냥 Node JS 설치하면서 npm도 함께 설치해주면 됩니다.

필요한 것들 다 설치해주도록 합니다.

 설치하다 보니, 뭘 어딜 건드리나본데...ㅋㅋ.. 그냥 무시합시다.

Node JS 믿고 고고씽~

본격적인 설치는 Windows Power Shell에서 진행 됩니다.

웹 개발 환경이 아닌 장비라서 그런지 이것 저것 설치 할 것이 많은 것 같고 그래서 제법 오래 돌아갔어요.

 

npm으로 firebase SDK 설치

(*아래의 단계는 Codelab 내용에는 나오지 않습니다만, 프로젝트 설정 화면에 보이기 때문에 해야 되는지 말아야 되는지 고민이 될 수 있는데, 해도 되고 안해도 됩니다. 지금 하지 않더라도, 나중에 Codelab에서 진행하라는 내용이 나오니 그때 해도 됩니다.)

 

command line으로 명령어가 보이지만 저 명령어를 어디에 어떻게 입력해야 되는지 모르는 경우도 많이 있습니다. 

앞에서 다운로드 받은 코드를 VS Code로 열었는데, VS Code의 매뉴를 보면 터미널이라는 매뉴가 있습니다. 거기서 터미널을 하나 띄우면 아래와 같이 DOS창이 보입니다. 여기서 명령어를 입력하면 됩니다.

 

먼저 npm으로 firebase를 설치합니다.

 

 

다음으로 Firebase CLI(Commnad Line Interface)를 설치합니다.

 

호스팅 배포 내용도 나중에 나오니 요건 패스하는 것으로 하고, 가장 아래 '콘솔로 이동'을 눌러 앱 생성을 마무리 합니다.

여기까지 Firebase를 이용하여 웹앱을 만드는 기본적인 환경 설정을 하였습니다.

다음부터 Codelab의 내용을 따라 진행 해 보겠으며, 가장 먼저 구글 계정을 이용한 로그인을 알아 볼 예정입니다.

 

https://learn-and-give.tistory.com/104

[Firebase Codelab 샘플] 02.구글 로그인과 Cloud Firestore(DB), Cloud Storage 사용