Firebase 배우기 2 - Firebase 초기설정 및 SDK설치, Node.JS. Visual Sudio Code

Firebase를 설치하여 처음으로 사용하는 세부 과정을 소개한다.

Step 1. Node.JS와 Visual Studio Code 설치

Firebase를 사용하려면 가장 먼저 Firebase에 명령을 주는데 필요한 프로그램 editor 설치가 필요하다.

이러한 에디터로 나는 “Visual Studio Code”를 사용하였는데, Visual Studio는 여러 가지 편리성과, 다양한 확장 기능을 이용할 수 있어 개발자들도 아주 많이 사용하는 에디터라고 한다.

그런데 Visual Studio Code를 설치하려면, Javascript 언어의 실행환경을 만들어주는 Node.JS도 함께 설치해야 한다. 일반적으로 웹페이지 작성에 기본적으로 사용되는 HTML 언어는 정적이고 단순한 화면만을 만들기 때문에, 표준 HTML에 다양한 부가기능을 가능하게 해주는 Javascript 언어를 추가하여 사용하는데, Node.JS는 이러한 Javascript의 해석 기능을 브라우저와 무관하게 수행해주는 역할을 한다고 한다.

(참고로 Node.JS는 원래 크롬 브라우저에 내장되었던 V8이란 이름의 javascript해석 엔진에 약간의 기능을 추가하여 단독형 제품화 된 것이라고 한다.)

Node.JS를 설치하려면 다음과 같이 Node.JS 키워드로 검색해 해당 사이트를 찾고

다음 화면에 들어가 설치 파일을 다운로드해 준다.

다음과 같이 다운로드 폴더에 설치 파일이 받아지면 해당 파일을 실행해 설치해 주면 된다. 버전은 다운로드 시점에 따라 다를 수 있다.

마찬가지로 Visual studio 키워드 검색으로

다음과 같이 Visual Studio 사이트를 찾아 설치 파일을 다운로드한다

다음과 같이 다운로드가 완료되면 다운로드한 파일을 실행해 설치해 주면

Visual Studio Code 설치가 완료된다.

참고로 Visual Studio에는 왼편의 Extension 탭을 이용해 다양한 확장 기능들을 추가하여 사용할 수 있는데, 이는 별도의 글에서 추가로 설명하려 한다.

혹시 이미 사용할 줄 알고 있다면 Live Server 나 intelli Code 등의 확장 기능을 자신이 원하는 대로 추가해 둔다. 참고로 Live Server는 거의 필수적으로 추가해야 할 확장 기능인 듯하다.

Step 2. Firebase 서비스 가입 및 프로젝트 생성

파이어 베이스 서비스를 사용하려면 파이어 서비스에 가입해서 파이어 콘솔에서 프로젝트를 생성하고, 이 프로젝트에 내가 사용할 기능(설루션)을 지정하는 과정이 필요하다.

먼저, 파이어 서비스에 처음으로 가입하려면 firebase 키워드로 사이트를 찾은 후,

시작하기 버튼으로 사용을 시작하면 되는데, 처음 접속 시에는 가입 화면이 나오며, 구글 ID로 가입하면 된다.

파이어 서비스는 무료와 유료가 있는데, 처음 단계에서는 무료 요금제인 Spark 요금제로 시작하면 된다.

(이 무료 요금제로도 DB, Storage, 호스팅, Authentication 서비스가 가능하다.)

처음에는 무료 요금제로 가입하면 된다.

가입이 완료되고, 정상적으로 로그인하게 되면, 다음과 같이 Firebase console 화면을 만나게 된다.

이 파이어 베이스 콘솔에서 사용자는 프로젝트를 생성하거나 삭제할 수 있고, 특정 프로젝트에 파이어 베이스가 제공하는 여러 가지 설루션 기능들을 배치할 수 있다. 또한 기존에 만든 프로젝트들도 이 화면에 표시된다.

여기에서 프로젝트(웹서비스, 앱, 홈페이지 등)를 만들려면 프로젝트 추가 버튼으로 자신만의 프로젝트를 만들어준다.

프로젝트의 이름은 영어와 숫자를 이용해서 사용자가 원하는 대로, 이름을 지어주면 된다.

계속 진행하면 다음과 같은 화면이 나오는데, 자신이 만든 웹서비스에 대해서 분석 기능을 사용할지 여부를 지정하는 부분인데, 일단은 사용하지 않는 것으로 설정하고 진행하면 된다.

계속 진행하면 다음과 같은 화면이 잠시 (10-40초 정도) 나오고,

다음과 같이 프로젝트 생성 준비가 되었다는 메시지가 나오게 된다.

Step 3. 프로젝트에 Firebase Solution 할당

위에서 프로젝트가 생성되면 다음과 같이 내가 새로 생성한 프로젝트에 기능을 부여하는 단계가 된다.

현재 만들어진 프로젝트는 내용은 하나도 없는 빈 깡통 같은 상태이므로, 실제로 사용할 기능을 할당해 주고, 각 기능을 초기화시켜주는 과정이 필요하다.

먼저 사용할 기능을 선택하기 위해서, 아래 화면의 “빌드” 부분을 선택해 주면

Firebase의 Build 기능에 속하는 세부 메뉴들이 나타나며, 이들을 마우스로 선택해 주면 해당 프로젝트에 선택한 기능들이 반영된다.

나의 경우에는 우선 필수 기능이라고 생각되는 다음 기능들을 하나씩 선택해 주었다.

이들 기능을 간략히 소개하면 Hosting은 웹서버 페이지를 호스팅 해주는 기능이며, Firestore가 Cloud DB, Storage가 파일 저장을 지원하는 기능, Authentication이 사용자 인증 문제를 담당해 준다.

이렇게 선택된 기능들은 다음 화면처럼 프로젝트 부분에 표시되어 쥐게 된다.

Step 4. 각 Firebase Solution의 초기화

위에서 프로젝트에 반영된 각각의 설루션들은 프로젝트의 일부로 포함되기는 했으나, 아직 실제로 사용할 준비가 된 것은 아니며, 실제 사용을 위해서는 각각의 세부 Solution 모듈별로 간단한 초기화 작업들이 필요하다.

A. Firestore Databse 초기화

먼저, Cloud Database인 Firestore Databse는 아래 화면처럼 이름을 선택하고, 시작하기를 눌러주면

다음과 같이 데이터가 보관될 지역을 지정하는 화면이 나오는데 사용자의 위치와 가까운 곳을 선택해 주면 된다.

그리고 모드를 결정하게 되는데, 일단 테스트 모드에서 시작하면 된다.

계속 진행하면, 다음과 같은 화면이 나오며

잠시 뒤, 다음과 같은 Firestore 초기화면을 볼 수가 있다.

Firestore에서는 기존에 다른 예에서 DB라고 부르던 데이터 묶음을 컬렉션이라 부르는데, 여기서 사용자가 사용할 DB를 하나 만들어준다.

나는 위의 컬렉션 시작 버튼을 이용해 다음 화면에 들러온 후, “products”라는 이름으로 컬렉션(=DB)를 만들었다.

위의 화면에서 진행하면 다음과 같이 문서 ID와 필드명 그리고 해당 필드 데이터 값을 지정하는 화면이 나온다.

참고로 Firestore에는 문서(document)라는 이름으로 각각의 데이터 레코드를 호칭한다.

다음과 같이 시험용 레코드를 하나 만들어준다.

그러면 다음과 같이 products라는 이름의 컬렉션(=DB)에 testrecord라는 이름의 문서(=레코드)가 생긴 것을 볼 수가 있다. 이렇게 하면 Firestore Database는 사용 준비가 완료되었다.

B. Storage 초기화

Firestore와 동일한 방식으로 “시작하기”를 누르고 진행하면

다음과 같은 화면이 되며, 테스트 모드를 선택해 주면 된다.

그러면 곧바로 다음과 같은 화면이 나오고, 사용 준비가 완료된다.

한 가지 주의할 것은 Storage의 경우, 규칙 부분을 잘 살펴보아야 하는데

다음 부분이 false로 설정된 경우에는 storage 사용 시도 시 오류가 발생하므로, 이 규칙 부분에 대해 확인 및 관리가 필요하다.

C. Authentication 초기설정

Authentication을 동일한 방식으로 “시작하기”를 이용하여 설정을 시작하면

먼저 다음과 같이 사용자가 로그인하는 방법을 지정하는 화면을 만나게 된다.

각자가 원하는 방식을 사용하면 되며, 필요시 혼합해서 사용할 수도 있다.

나의 경우에는 가장 보편적인 이메일/비밀번호 방식을 사용하기로 하여 이를 선택했다.

설정을 마치면 다음과 같이 “사용설정됨” 메시지를 확인할 수 있다.

그리고 참고로 템플릿 탭에 가보면, 다음과 같이, 해당 웹서비스에 가입하려는 인원에게 보낼 확인 이메일 등에 사용할 문구들도 미리 지정할 수가 있다.

D. Hosting 초기설정

Hosting의 경우에는 동일한 방식으로 “시작하기”를 이용해 진행하면

다음과 같은 안내문을 만나게 되는데, 이 화면에서 파이어 베이스 접속에 필요한 접속정보를 얻게 된다.

이 안내문에 나온 명령들을 미리 설치한 Visual Studio Code의 터미날 창에서 수행해야 한다.

위의 표시된 부분은 Visual Studi에서 실행해준다.

위의 표시된 부분은 Visual Studi에서 실행해준다.

위에서처럼 Visula Studio에서 실행해야 할 명령을 확인한 후, 다음 화면처럼 프로젝트 이름을 지정해주고 진행하면

다음과 같은 화면이 나오면서 Firebase 접속 정보가 나타난다. 이를 잘 복사해서 보관한다.

이 정보는 다음글에서 소개할 내용인 접속용 HTML 페이지에 붙여넣어 주어야 한다.

Step 5. Visual Studio에서 firebase SDK 연결설치

PC 화면으로 돌아와, 특정한 작업용 폴더를 하나 만든다.

그리고 Visual Studio Code를 실행한 후, Open Folder를 실행한다.

그러면 다음과 같이 해당 폴더가 선택된다.

(참고: Visual Studio Code에서는 폴더 선택이 중요하므로 반드시 작업 전 사용할 폴더를 지정해 주어야 한다.)

여기서 터미널을 하나 열고

위의 파이어 베이스 콘솔의 hosting에서 보았던 명령어를 입력해 실행 준다.

그런데 이 단계에서 간혹 다음과 같은 권한 오류가 나오기도 한다.

만일 오류가 발생하면, 다음과 같이 get-ExecutionPolicy를 확인해 보고 수정한 후 다시 실행해 주면 된다.

내 경우에는 “Restricted”로 설정되어 있었기에, set-ExecutionPolicy -Scope Currentuser Unrestricted 명령을 실행하여 Unrestricted로 변경해 주었다.

이렇게 권한 설정으로 인한 오류를 정정하고, 다시 위의 명령어를 입력해 주면, spinning wheel 같은 대기 표시가 나오다가, 약 1분 지난 후, 다음과 같이 설치가 되었다는 확인 메시지를 볼 수가 있다.

이 상태에서 firebase login 명령을 넣어주면 다음과 같은 질문이 나오는데,

Yes를 해주면 다음과 같이 로그인 화면이 나오고, 여기서 통상의 구글 로그인 방법으로 로그인해 주면,

터미널에는 다음과 같이 로그인이 되었다는 메시지와 함께,

브라우저가 열리면서 다음과 같은 메시지가 나오게 된다. 이 브라우저 화면은 단순 안내로 그냥 창을 닫으면 된다.

그리고 계속해서 Visual Studio Code의 터미널 창에서 계속해서 firebase init 명령어를 입력해 준다.

그러면, 다음과 같은 화면이 나타나는데 선택해 주면 된다. 대개의 경우 default 값을 그대로 선택해 주면 된다.

여기서 진행하면, 다음과 같은 화면이 나타나는데, 이 부분은 사용자가 사용하는 Firebase 기능을 확인하는 단계로, 내가 사용할 부분을 선택하고 엔터를 입력하면 된다. 이들은 키보드에서 상하 커서로 이동할 수 있고, 파란색으로 반전되었을 때 스페이스 키로 선택 또는 취소를 할 수가 있다. 내 경우에는 Firestore와, hosting, storage를 사용하므로 다음과 같이 선택하고 엔터를 입력했다.

그러면 어느 프로젝트를 연결하려는 것인지를 확인하는 단 게를 거치게 된다.

나는 기존에 만들어 둔 프로젝트를 사용하므로 다음과 같이 선택하고 엔터를 누른 후,

다음 화면에서 미리 만들어둔 프로젝트들 중 연결하려는 프로젝트를 선택했다.

그 후 계속 진행하면 몇 가지 사항들을 더 질문하지만, 대체로 그냥 엔터키를 쳐서 default 값을 선택하면 되는 항목들로, 다음과 같이 initialization Complete! 이란 문구가 나타난다.

이로써, firebase를 사용할 기본 설치와 설정이 완료되었고 이제 활용하기만 하면 된다.

이 상태에서 Visula Studio Code의 왼쪽에 있는 public 폴더를 보면 다음과 같이 index.html 파일이 생성되어 있고, firebase 기능 사용에 필요한 문장들이 들어있는 것을 확인할 수 있다.

각 사용자는 이러한 기본 template를 이용해서, 서버에 대한 고민 없이도, 각자가 필요한 약간의 코드만 추가해서 추가해서 서버 기능이 지원되는 웹서비스를 구현할 수 있다.

Step 6. 웹페이지를 인터넷에 게시하기 (웹페이지 호스팅)

이 상태에서 그대로, Visual Studio의 터미날 창에 firebase serve 명령어를 입력하면, 다음과 같이 localhost 링크 페이지가 생성되는 것을 확인할 수가 있고,

이를 클릭하면 다음과 같이 Local Machine에서 다음과 같이 브라우저가 열리면서 페이지가 열리는 것을 확인할 수 있다. 이처럼 firebase serve 명령어는 웹에 게시하기전 로컬 머신에서 해당 웹체이지를 미리 살펴보는 용도로 유용하다.

그리고 다음화면처럼 터미날 창에서 firebase deploy 명령을 주면,

현재의 프로젝트로 준비된 페이지가 firebase의 hosting기능을 통해 웹페이지로 게시되게 되는데,

위 화면에서처럼 명령 실행이 완료되면, “Deploy Complete” 메시지가, 게시된 웹페이지의 인터넷 주소와 함께 반환된다. 즉, 현재의 템플릿 페이지가 Firebase의 호스팅 기능을 통해 짧은 순간에, 그리고 Firebase deploy명령만으로 매우 간단하게 인터넷 페이지로 게시된 것이다.

이 주소를 클릭해보면, 해당 웹페이지가 다음과 같이 정상적인 인터넷 페이지로 열리는 것을 확인할 수가 있다.

index.html파일에서 위의 text에 해당되는 부분을 찾아, 적절한 시험용 메시지로 대체한 후,

다시 firebase deploy 명령을 내린후, 다시 해당 링크로 접속해보면 해당 인터넷 웹페이지의 내용이 변경되어 게시된 것을 확인할 수 있다. (만일 내용이 바뀌지 않은 경우라면, 브라우저의 캐시 기능때문으로, F5버튼을 이용해 페이지 새로고침을 해본다.)

이로써 Firebase의 Hosting기능을 이용함으로써 간단한 명령 한줄로, 아주 쉽게 인터넷 페이지를 수정하고 게시할 수 있게 된것이다. 또한 당연하게도, 자신이 원하는 도메인을 이 페이지에 쉽게 연결할 수도 있다.

참고. Firebase Version에 대한 고민

위와 같이 만들어진 기본 Template에는 firebase의 다양한 기능을 연결하는 링크가 포함되어 있으며, 필요한 부분만 남겨 사용하면 되는데, 이 Template는 또한 사용자가 필요로 하는 대로 Version 번호를 변경할 수 있게 되어 있다.

그런데 Firebase는 버전 8까지와 9~10은 사용 방식이 많이 다른 것으로 알려져 있다.

기존 방식 (~ 8.x.x)의 경우, 과거에 사용되는 방식이라 익숙한 측면은 있지만, 여러 가지 조건을 따져 경우의 수가 달라지는 등의 경우에 Loop 구성이 매우 복잡해지는 단점이 있었다. 때문에 가독성이 떨어지고 알아보기 어려운 측면들도 있었기에, 새로운 형태(9.x.x~)부터는 이러한 방식을 module 형식으로 변경하여 코드의 효율성을 높였다고 하나 문법이 좀 더 어렵고 배우는데 필요한 학습자료가 적다고 한다. 어떤 버전을 사용할지는 각자 고민해 보는 것이 좋을듯하다.

참고로 나의 경우에는 firebase를 처음 접할 때 8.6.5 버전으로 접하게 되었기에 새로운 버전으로 바꾸어야 하는가에 대한 고민이 있기는 하지만 일단은 기존 버전으로 사용하려 한다.

만일 8.6.5 버전을 사용하는 경우라면 위의 부분을 다음과 같은 형태로 변경해 주면 된다.

Firebase 배우기 2 – Firebase 초기설정 및 SDK설치, Node.JS. Visual Sudio Code