Firebase 01. 로그인 연동

시작하기 화면

 

 

 

- '프로젝트 추가'를 누른다.

 

 

- 프로젝트 이름을 입력하면 '계속' 버튼이 활성화 된다.

 

 

 

- 계정을 선택하면 '프로젝트 만들기' 버튼이 활성화 된다.

 

 

 

- '계속' 버튼을 클릭하여 프로젝트 생성을 완료한다.

프로젝트 생성 완료 화면

 

 

 

- '사용자 인증 및 관리 (Authentication)' 클릭

구글로 로그인 연동

 

 

 

- '사용 설정'을 클릭하여 '프로젝트의 공개용 이름'과 '프로젝트 지원 이메일' 설정 후 '저장' 버튼을 클릭한다.

설정 완료 페이지

 

 

 

- Realtime Database 추가

화면 왼쪽 사이드바

 

 

 

- '미국, 벨기에, 싱가포르' 중, 내 나라에서 가장 가까운 나라를 선택한다. 한국의 경우, 싱가포르 선택.

 

 

 

- 데이터 베이스를 누가 읽을 수 있고, 누가 쓸 수 있는지 규칙(?) 설정. 일단 테스트 모드로 시작

 

 

 

 

- JSON 객체 처럼 데이터가 전부 들어오는 것을 볼 수 있음.

데이터베이스 생성 화면

 

 

 

- 화면 왼쪽 사이드바에서 '프로젝트 개요(Project Overview)'를 클릭하여 홈화면으로 돌아온 후, 사용하고자 하는 앱을 선택한다.

프로젝트 개요( Project Overview ) 홈 화면

 

 

 

- 앱 이름을 등록후, 앱 등록을 누른다. 이때 Firebase의 호스팅을 설정하지 않을 것이기 때문에 '또한 이 앱의 Firebase 호스팅을 설정하세요'는 클릭하지 않는다.

설정 완료

 

 

 

- firebase 홈화면으로 돌아와서(firebase 로고를 클릭하면 돌아올 수 있다.) 설정해 놓은 프로젝트명을 확인하고 클릭한다.

 

 

 

- 왼쪽 상단에서 해당 버튼을 확인하고 클릭한 후, 설정 아이콘을 클릭한다.

 

 

 

- '프로젝트 설정' 페이지에서 스크롤을 조금 내려보면 프로젝트 설정 완료 단계에서 볼 수 있는 내용이 있는데 

프로젝트 설정 화면

 

 

 

- 내 프로젝트에 firebase를 설치한 후, 아래 코드를 복사한다.

npm install firebase

 

 

 

- 내 프로젝트 'src'폴더 내에 'api'폴더를 추가한 후, firebase.js 파일에 위에 복사한 코드를 붙여넣기한다.

파일 트리

 

 

 

- 꼭 필요한 내용만 남기고 필요 없는 주석과 내용은 삭제하여 코드를 정리했다.

- 다른곳에 호출하기 위해서 login()이라는 함수를 선언한다.

firebase.js

apikey, authDomain, databaseURL, projectId와 같은 보안에 관련된 키들은 .env 파일에 저장하고 키값을 불러온다.

❗React에서 env 키값은 맨 앞에 'REACT_APP_'을 꼭 붙여줘야 한다.
https://hye-rim.tistory.com/entry/ENV-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

.ENV 설정하기 (feat. Vercel)

 

 

 

- 위에서 설정한 login() 함수를 필요한 곳에서 선언하면 구글 로그인 팝업이 활성화되며 로그인이 연동된 것을 확인할 수 있다.