Firebase의 Hosting, Functions, Firestore로 메모장 만들기

Explanation

2021-05-12
Firebase의 Functions가 유료로 변경됨에 아래의 샘플 링크는 동작하지 않습니다!

예전부터 일을 하거나 웹서핑을 하다가 메모할 일이 생기면 메모장에 메모를 쓰고 또 메일로 들어가서 다시 그 내용을 나에게 보내두는.. 그런 비효율적인.. 일이 종종 있었습니다.
그래서 그때마다 ‘웹에 간단한 메모장 하나 만들어서 써야겠다’ 라고 생각만 했었는데..(이미 좋은 서비스들이 많이 있지만..) 이번에 간단하게 Firebase의 Hosting과 Functions 그리고 Cloud Firestore를 이용하여 간단하게 웹상에 메모장을 만들어 보았습니다.

샘플코드 : Github – falsy
샘플링크 : https://fir-note-fab00.firebaseapp.com/?pw=1234

1. 프로젝트 추가

우선 Firebase console로 이동하여 프로젝트를 만듭니다.
저는 ‘cheolguso-note’ 라는 프로젝트를 만들었습니다.

2. firebase 설치

우선 적당한 곳에 디렉토리를 만들고

필요한 firebase 서비스를 설치하고 로그인합니다.

여기에서 HostingFunctions를 선택, 설치합니다. 그리고 언어를 저는 javascript로 선택하였습니다.

스페이스바 = 선택, 엔터 = 확인

그러면 아마도 위와 같은 디렉토리 구조(보여지는 파일)가 생성됩니다.

3. Hosing 파일 생성 및 적용

public 폴더로 이동해서 아래와 같이 3개의 파일을 만들고 작성하겠습니다.

아직 FunctionsFirestore설정을 하지 않아서 index.html에서 스크립트 부분은 주석처리해 두었습니다.

그리고 Hosting 을 적용합니다.

적용이 완료되면 커멘드창에 해당 호스팅의 URL을 알려줍니다.(Firebase console에서도 확인 가능합니다.)
해당 URL로 브라우저에서 접속이 되면 일단 1단계는 성공입니다.

4. Cloud Firestore

Firebase console에서 생성한 프로젝트를 선택한 후에 ‘DEVELOP’ 탭의 ‘Database’ 를 선택한 후 ‘Realtime Database’가 선택되어 있다면 ‘Cloud Firestore’를 선택합니다.
그리고 컬렉션과 문서, 필드를 추가합니다.

저는 컬렉션 = note, 문서 = textarea, 필드 = text (string – 이곳에 값으로 스트링이 들어갑니다.)
위와 같이 작성하였습니다. 여기서 ‘note’, ‘textarea’, ‘text’ 제가 임으로 정한 키값입니다.

간단하게 스트링 값만 불러오고 업데이트만 할 것이라 DB설정은 이걸로 끝입니다.

5. Functions

아까 초반에 Firebase를 설치한 ‘cheolguso-note’ 디렉토리 안의 functions로 이동합니다.
그리고 여기에서는 몇가지 모듈을 설치해 줍니다.

그리고 index.js 파일을 아래와 같이 수정해줍니다.
– 2017-02-14 수정 –

그리고 이제 Functions 를 적용합니다.

만약에 Error: functions predeploy error: Command terminated with non-zero exit code1 이런 오류가 뜬다면, 프로젝트를 만든 폴더(ex. ../cheolguso-note)의 디렉토리 경로 중에 띄어쓰기를 포함한 폴더의 그 이름 사이 공백을 지우면 해결될 수 있습니다.

Functions까지 성공적으로 적용이 되었다면, functions의 url을 커맨드 창에서 알려주는데, 그부분을 복사해서
Hosting 에서 작성했던 script.js 파일의 var firestoreUrl = ”; 이부분에 넣어주고 index.html에서 처음에 주석으로 해놨던 부분의 주석을 해제하고 다시 hosting 을 적용하면 끝입니다!