- 이제 예제 프로젝트를 수행하기 전 먼저 Firebase를 설정 및 준비를 해보겠습니다.
1. Firebase 프로젝트 추가하기
- Firebase를 사용하기 위해서 가장 먼저 할 일은 Firebase Console로 진입하여 Firebase 프로젝트를 생성하는 일입니다.
-
아래 URL을 방문하십시오.
- 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을 방문하십시오.
- 홈페이지를 보면 좌측 LTS 안정적인 버전이고, 우측 current는 최신 버전입니다.
- 안정적인 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을 활용한 프로젝트 설정을 해보겠습니다.