[memo-app] Firebase 1.환경설정

웹 프로젝트를 만들 때 포트폴리오로 사용하기 위해서 프로젝트 배포를 하는 경우가 종종 있습니다.

그때마다 firebase 호스팅을 쓰는데 사실 제대로 사용하는 방법은 잘 모릅니다. 😂 야매로 배워서 써먹는..

그래서 이번에 인프런 강의와 함께 공부를 한번 해보려고 합니다. 

---

 

 

 시작하기 

firebase 홈페이지

https://firebase.google.com/

Firebase

firebase 홈페이지 주소는 위와 같습니다. Firebase 를 사용하기 위해선 로그인이 필요합니다.

구글 서비스이기 때문에 구글 연동이 됩니다.

홈페이지에서 우측 상단을 보시면 [콘솔로 이동] 이라는 버튼이 있을겁니다. 해당 버튼을 눌러주세요.

 

 

프로젝트 추가

그러면 위와 같은 화면이 보일겁니다. 여기서 [프로젝트 추가] 버튼을 클릭해주세요.

 

그러면 위와 같은 화면이 나옵니다. 프로젝트 이름을 설정해주세요.

저는 [firebase-start] 라는 간단한 이름으로 설정해보도록 하겠습니다.

 

구글 애널리틱스를 추가 사용할 수 있는데 사용하려면 toggle 버튼을 클릭하여 사용 설정을 해줍니다.

저는 한번 사용을 해보도록 하겠습니다. 그리고 [계속] 버튼 클릭해줍니다.

 

구글 애널리틱스 계정을 선택해줍니다. 드롭 박스에 뜨는 default account 를 선택해줬습니다.

그리고 나서 [프로젝트 만들기] 버튼을 클릭합니다.

 

firebase 프로젝트를 만들었습니다. ✨

 

 

 

 프로젝트에 웹 추가하기 

콘솔 화면입니다. 좌측 메뉴란에 여러가지 기능이 있는 것을 확인할 수 있습니다.

해당 애플리케이션이 어떤 프라이싱 정책을 사용하는지 확인하고 싶다면 메뉴의 마지막 부분을 확인하면 됩니다.

업그레이드 버튼을 누르면 업그레이드를 할 수 있습니다. 현재 저는 무료인 Spark를 쓰고 있습니다.

 

프로젝트 개요 옆 톱니바퀴를 누르면 해당 앱의 설정으로 이동할 수 있습니다.

또한 해당 애플리케이션에는 IOS, Android, Web 3가지의 플랫폼을 추가할 수 있습니다.

 

 

웹 버튼을 클릭하여 웹을 추가해줍시다.

 

웹 앱에 firebase를 추가할 수 있도록 설정하는 페이지로 넘어갑니다.

앱 닉네님을 설정해줍니다. 저는 프로젝트 이름과 동일하게 하였습니다.

밑에 체크버튼을 누르면 firebase 호스팅을 설정할 수 있습니다. 저는 누르지않고 일단 보류를 하도록 하겠습니다.

 

해당 SDK 는 설정탭에서 언제든 볼 수 있습니다.

일단 복사를 하지 않고 [콘솔로 이동] 버튼을 클릭하여 넘어가고 이따가 추가해주도록 하겠습니다.

 

 

Authentication 설정

메뉴에서 [Authentication] 탭으로 이동합니다.

해당 탭에서는 로그인 방법을 설정할 수 있습니다. [시작하기] 버튼을 클릭합니다.

 

로그인 방법을 추가할 수 있습니다.

이메일/비밀번호는 해당 앱의 별도의 정보를 이용하는 것이고, 익명은 별도의 인증절차가 따로 필요없는 로그인 방법입니다.

이외의 구글과 같은 것들은 Third-Party 로그인 인증 방법입니다. 저는 구글을 이용해서 로그인을 할 예정입니다.

 

구글 버튼을 클릭합니다. 그러면 이렇게 사용 설정을 체크할 수 있는 화면으로 넘어옵니다.

 

사용 설정을 toggle 하면 이렇게 공개용 이름과 이메일을 설정하는 란이 뜹니다.

이메일란에는 아마 자동으로 구글 이메일이 들어갈 것입니다.

 

구글 로그인 설정을 완료하였습니다. ✨

아래에선 간단하게 [Authentication] 탭을 살펴보도록 하겠습니다.

 

승인된 도메인에서는 oauth 기능을 사용할 때 redirection 되는 페이지를 설정할 수 있습니다.

이는 여기에 추가된 승인된 도메인들만 가능합니다.

기본으로 localhost 와 호스팅 도메인 주소가 있는 것을 확인할 수 있습니다.

추후에 [도메인 추가] 를 하여 다른 페이지로 바꿀 수 있습니다. 저는 일단 이상태로 두겠습니다.

 

[Authentication] 에서 [Templates] 탭으로 이동해보겠습니다.

해당 탭에서는 메일을 확인하기 위한 인증 메일을 보내는 템플릿을 저장합니다.

이를 통해서 앱을 사용하는 사용자들에게 이메일을 보낼 수 있습니다.

 

 

Firebase Database 설정

[Cloud Firestore] 는 모바일 앱 개발을 위한 Firebase의 최신 데이터베이스 입니다.

실시간 데이터베이스를 바탕으로 더욱 직관적인 데이터 모델을 선보이며, 실시간 데이터베이스보다 풍부하고 빠른 쿼리와 원활한 확장성을 제공합니다.

 

모든 클라이언트에게 동기화가 되며 오프라인에서도 디스크에 캐싱하여 원활하게 사용 가능합니다.

json 방식으로 저장 가능합니다. 데이터베이스를 사용하기 위하여 [데이터베이스 만들기] 버튼을 클릭합니다.

 

그러면 프로덕션 모드에서 시작할지 테스트 모드에서 시작할지 선택을 하는 모달창이 뜹니다.

저는 [테스트 모드에서 시작] 을 선택하겠습니다.

 

데이터베이스를 위치를 설정하는 탭이 뜹니다. 너무 먼 곳에 설정하면 비효율적인 서버비용이 든다고 하니 가까운 곳에 설치합니다.

[asia-northeast3] 를 선택합니다. 이는 대한민국을 이릅니다.

 

[Cloud Firestore] 가 설정되었습니다. ✨

 

 

Realtime Database 설정

[Realtime Database] 는 Firebase의 기존 데이터베이스 입니다.

여러 클라이언트에서 실시간으로 동기화해야하는 모바일 앱을 위한 효율적이고 지연 시간이 짧은 데이터베이스입니다.

[데이터베이스 만들기] 버튼을 클릭합니다.

 

위치는 싱가포르로 설정하고 테스트 모드로 설정합니다.

[Realtime Database] 가 설정되었습니다. ✨

 

 

 

 

 

 

firebase 환경설정

firebase 설정

firebase database 설정

firebase realtime database

firebase database

firebase authentication 설정

---