[Firebase Codelab 샘플] 03. Firebase SDK 설치와 CLI 기반 개발환경 구성

앞에서, 구글 계정 연동과 DB, Storage를 Firebase로 쓸 수 있도록 설정하는 것을 살펴 보았습니다.

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

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

 

 

'깐지'나는 Firebase CLI(Command Line Interface)

 

컴퓨터 좀 한다하는 역할의 드라마나 영화 인물의 화면에는 까만 바탕에 글자들이 막 어지럽게 올라가는 그런 화면들이 종종 나옵니다. GUI가 아니라 CLI가 더 어려워 보이기 때문에 더 있어 보이는 그런 느낌???

Codelab 가이드 문서의 다음 순서는 CLI 설치 입니다. 이건 Firebase SDK 설치 할 때 나왔던 내용이라 저는 미리 했었는데, 지금 하는거랑 그때 하는거랑 차이는 없을 것 같네요.

 

 

저는 위 내용 중, version 체크를 해서 정상 설치를 확인했습니다.

 

Firebase login

 CLI가 Command Line Interface이므로, 어떤 상태를 표시하는데는 불리한 점이 많습니다. 

가이드 내용에 따라 로그인을 하려고 했더니 이미 로그인 되어 있다고 나오는데, 그 계정이 저의 다른 구글 계정이었습니다. 예전에 Firebase CLI로 했던 작업에 사용했던 계정인데, 그때 쓴 기록이 있어서인지, 혹은 브라우져 자동 로그인 설정을 한 것 때문인지 모르겠지만, 지금 진행 중인 과정의 Firebase 계정이 아니라면 로그아웃을 한 후 다시 로그인을 하면 됩니다.

 

Firebase console에서 프로젝트를 만들었던 그 계정으로 로그인~

요렇게 웹에서 로그인 인증 화면이 나옵니다.

 

 본인 인증도 해주고~

 결과적으로는 성공~

 

 

 

 

Firebase 콘솔과 로컬을 연결

지금까지 연결한 것은, Firebase에 연결한 것일 뿐, 그 중 특정 프로젝트에 연결한 것은 아니었기 때문에, 지정한 프로젝트에 연결 해 줘야 합니다. 이런 점이 CLI 할 때 아쉬운 점이죠. 상태를 꼭 직접 확인하거나 글자에서 잘 찾아봐야 하는 점. 그럼에도 불구하고 사람들이 많이 쓰는 이유도 있을 것 같네요. 일단, 에너지 사용량이 훨씬 적을 것 같네요.

 

아래와 같이 CLI를 통해 프로젝트와 연결합니다. 프로젝트 별명은 다르게 지어도 상관 없나 봅니다.

 

이렇게 프로젝트와 연결한 사항은, 다른 파일에 기록되어 있습니다.

 

 

샘플앱을 로컬에서 실행

이제 현재까지 만들어진 것을 웹으로 띄워 볼 차례입니다. 지금까지 별 다른 코드를 작성한 것은 없으므로 제공 된 샘플 그대로를 띄워 보는 것입니다. Firebase에서는 웹 호스팅도 제공하는데, 로컬에서 개발하여 테스트를 한 후, 정식 서버로 배포를 해주는 형태로 진행 된다고 보면 됩니다.

 

firebase sdk를 이용한 웹 서버를 구동 해 보겠습니다.

 

브라우져에서 열어보면 아래와 같이 짜잔~~~

 

 

Firebase SDK를 가져와 사용하기

Firebase SDK를 사용하려면 CDN에서 가져오기도 하고, npm으로 로컬에 설치하기도 하는데, 개발 환경에서는 로컬이지만, 이 상태로 개발한다는 것은 결국 서버에 Firebase SDK를 설치하는 방식으로 개발하는 것이죠.

 

그런 웹 개발과 관련 된 내용은 Node JS, webpack 등 웹 개발에 대한 배경 지식을 필요로 하는데, 그런 내용들을 좀 잘 알고 있다면 여러 가지로 도움이 될 것 같네요.

Firebase 서버를 구동한 터미널 창은 서버를 계속 유지하기 위해 두고, 새 터미널을 추가로 열도록 합니다.

새로 열린 터미널에서 , firebase SDK 다운로드/설치는 이미 되어 있기 때문인지 금방 되었습니다.

가이드 내용 중에 아래와 같이 npm install을 실행하라는 내용이 있는데, 이게 무슨 내용인지 정확히 이해를 못하겠습니다. 설치 할 대상이 명시 되어 있지 않아서 말이죠. 아마도 npm으로 설치 해야 할 목록이 이미 어떤 파일에 정리되어 있고, 그것을 참조해서 설치하는 것이 아닐까 추측 됩니다.  

 

webpack 시작하기 위해 npm run start를 실행하라고 하는데, 이것도 정확한 목적은 모르지만 문맥 상, 코드를 작성 해 나갈 때 서버 재구동 없이 수정 된 내용을 자동으로 배포 해 주는 것 아닌가 싶습니다. 파일을 저장 하면 관련 된 로그가 내려가는 것을 보니 그런 것 같아요. webpack은 사용하는 여러 라이브러리들을 정리해서 패키징 해주는 것 정도로 이해하고 있는데 그런 용도라면 아마 이런 추측이 맞을 것 같네요.

 

 아무튼, 웹 개발에 대한 내용은 따로 다시 공부 해 둬야 하겠네요.

 

 

Firebase config 정보

 

콘솔로 이동 후 프로젝트 설정으로 이동하여,

 

아래로 스크롤하여 프로젝트 내 앱의 설정 정보로 이동하면 프로젝트 처음에 시작 할 때 보았던 그 내용을 다시 볼 수 있습니다. 이제 npm으로 필요한 설치를 다 했으니 그 내용 그대로 따라 하면 되겠네요. 앞에서 미리 해두었으면 다시 할 필요는 없습니다. 

그런데, 내용을 보면, 가이드와 달리, databaseURL과 measurementId는 없네요. 버젼이 달라지면서 내용도 조금씩 바뀌는 것 같아요. 이 내용은 일종의 Firebase에 연결하기 위한 여러 인증키 정보 같은 것이라고 보면 되겠네요. 

 

이렇게 하고 구동 된 로컬 서버의 페이지를 열어보면 아래와 같이 잘 보입니다.

기본 뼈대는 샘플 코드에 다 있기 때문에 실습 할 내용은 정말 Firebase 서비스를 사용하는 코드만 복붙하는 정도입니다. 즉, 기본 개념을 익히기는 좋으나 실제 뭔가 만들 때는 이 실습 내용만으로 다 하기는 어렵고, 제공 된 샘플 코드를 직접 살펴보면서 필요한 것을 공부해야 되겠습니다.

 다음에는 실제로 기본 코드를 수정하여 정보들을 Firebase에 올리고 참조하며 기능을 만들어 가보도록 하겠습니다.

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

[Firebase Codelab 샘플] 04. Cloud Firestore에 메세지 쓰기