13. 결론

Firebase Codelab :  13. 결론

Firebase github    :  View Source 

 

... quickstarts-js 저장소에서 전체 솔루션을 확인할 수 있습니다. ...

ㄴ> Codelab 링크에 걸린 github로 이동해서 firestore의 README.md 를 '번역' 돌려서 따라해봤다.

하지만 README.md에 오타도 있고, 그대로 따라하다 이런 저런 오류가 나길래;

나는 기존 firebase를 삭제하고 > README.md를 참고하면서< 다시 만들었다.

(나중에 개인 복습할 땐 안 지워도 될 것 같지만 이미 지워버림;)

 

기존 firebase 삭제

Firebase 톱니바퀴 / 프로젝트 설정 / 최하단 '프로젝트 삭제' / 모두 체크 / 프로젝트 삭제

 

 

README.md 순서로 하되 크게

1. 'quickstart-js' github Clone web URL로, 로컬에 프로젝트 클론하기

2. Augular CLI 설치, Firebase CLI 설치, 프로젝트 종속성 설치&빌드

3. Firebase 프로젝트 만들기

4. Firebase Console에서 웹 앱에 Firebase 추가 (로컬에 반영)

5. Firebase Console에서 'Authentication' 이메일&비밀번호 로그인 설정 & 'Database' 만들기

6. 로컬 프로젝트와 Firebase 연결 & 실행

 

---

 

 

1. quickstart-js 깃을 로컬에 클론하기

$ pwd
/Users/user1/Firebase

 

저장소 http 주소 복사해서 클론.

Firebase> $ git clone https://github.com/firebase/quickstart-js.git

 

firestore 경로 있는 곳까지 이동하고 $ code . 로 VS Code를 연다.

Firestore> $ cd quickstart-js/firestore/
firestore> $ code .

 

 

 

2. Augular CLI 설치, Firebase CLI 설치, 프로젝트 종속성 설치&빌드

github README.md가 시키는 대로 따라한다.

VS Code / Terminal / New Terminal 열고 아래 커맨드를 순서대로 실행한다.

 

README.md는 $ npm start 하고 나서 브라우저에 localhost:4200 요청하라는데, 나는 Cloud Firestore를 지워버려서 안되고;

(연결해도 안되는 거 같던데 이건 나중에..)

또 마지막에 Shutting down  샷다 내려서 계속 안된다고 한다. (구라같은데? 짤이 계속 떠오른다)

일단 README.md를 마저 따라한다.

firestore> $ npm start
> friendly-eats-quickstart@0.0.0 start
> npm run pre-build && firebase --project demo-friendly-eats emulators:exec --import ./app-data-seed --ui "ng serve"


> friendly-eats-quickstart@0.0.0 pre-build
> (cd functions && npm run build)


> build
> tsc

i  emulators: Shutting down emulators.

 

 

 

3. Firebase 프로젝트 만들기

 

 

 

4. Firebase Console에서 웹 앱에 Firebase 추가 (로컬에 반영)

앱 닉네임 : firebase

 

firebaseConfig는 복사해서 메모장,notepad에 잠시 옮겨둔다.

 

VS Code로 가서 저 Config를 넣어줄거다.

quickstart-js\firestore\src\environments\environment.prod.ts 열기

Config 내부의 key:value 형태만 붙여넣고 저장.

 

 

5. Firebase Console에서 'Authentication' 이메일&비밀번호 로그인 설정 & 'Database' 만들기

 

 

 

6. 로컬 프로젝트와 Firebase 연결 & 실행

여기서 이제... 공식 github README.md 의 오타..

firebase use --add인데

fireabse --use add... 후...

 

VS Code / Terminal 에서 사용하려는 firebase 별칭 alias를 추가한다.

firestore> $ firebase use --add

alias는 default

 

firestore> $ npm run production

 

아까 Shutting down 로그와 다르게 정말 배포되고 서버가 띄워졌다!

Angular 기본 포트가 4200인가보다.

 

크롬 브라우저 주소창에서 localhost:4200 요청한다.

 

드디어!

 

우리가 '웹 샘플'에서 봤던 소스와 다르게, "Sign In" 로그인과 "Create Account" 회원가입 기능이 보인다.

 

우리가 봤던 '웹 샘플'의

(1) 'Authentication'는 '이메일/비밀번호' 로그인 방법이 아닌 '익명' 누구든지 접근할 수 있게 하는 방법이었고,

(2) 로그인, 회원가입 기능이 들어가있지 않는 소스였다.

 

아무튼 이렇게 firebase Codelab으로 웹 샘플을 감상해봤다. 마지막 Angular, TypeScript 프로젝트는 모르는 언어라서 pass하지만

웹 샘플 참고하면서 firebase를 사용하는 간단한 crud 게시판이나 todolist 플젝을 만들어볼 예정이다.