TIL. Firebase를 이용한 소셜 로그인 구현(1)

ichbinmin2·2021년 2월 15일
0

React

목록 보기
20/25
post-thumbnail

👩🏻‍💻 Toy Project(Teta Card Maker)의 진행 기록 : 새로운 프로젝트를 진행하기에 앞서 몇 가지의 기능(소셜 로그인, 실시간 데이타베이스) 을 구현하기 위해서 firebase를 사용해볼 생각이다. 사용 전, 간단하게 firebase란 무엇인지 알아보자.

Firebase 가 제공하는 서비스

  1. 웹이나 어플리케이션을 만들 때 필요한 유용한 기능을 제공.
  • 사용자가 로그인하는 기능이 필요할 때 간단하게 인증 기능을 제공해준다. 다양한 매체들을 이용한 계정 연동 로그인도 가능하다.
  • 실시간 데이터베이스 기능을 통해 사용자의 데이터를 서버에 저장할 수 있도록 해준다.
  • 소켓 프로그래밍처럼 실시간 채팅 등을 실시간 업데이트(리얼 타임으)로 가능하게 해준다.
  • 호스팅 및 배포가 가능하다.
  1. Crashlytics 기능을 제공
  • 사용자가 제품을 사용하는 도중에 에러가 발생했을 때, 발생한 경로나 에러 메시지를 개발자들에게 보여주는 crash repoting 시스템을 이용할 수 있다. 이러한 기능은 제품의 error 발생율을 낮추고 안정성을 확보한다.
  • 성능을 실시간으로 모니터링하거나 테스트도 가능하다.
  • 버전대로 배포할 수 있도록 버전 관리 기능을 제공한다.
  1. 비지니스를 도와주는 기능을 제공
  • 사용자가 웹 페이지에서 어떤 기능을 주로 쓰는지 등과 같은 사용자가 자주 쓰는 기능을 추적할 수 있도록 Analytics 기능을 제공해준다.

firebase 에서 제공하는 많은 서비스들

Firebase 사용 전 초기세팅하는 방법

firebase 회원가입/로그인 후 콘솔 페이지로 이동하여, 새 프로젝트를 추가한다.

차례대로 프로젝트 추가를 위한 설정을 선택/작성한다.

새 프로젝트가 추가가 되면, 해당 프로젝트의 대시보드에서 ios / 안드로이드 / 웹 중에서 사용하고자 하는 것을 선택한다. 여기서 나는 웹을 사용할 예정이므로 웹을 선택(클릭)했다.

해당 웹 앱을 등록하기 위한 이름을 작성한다.

다음 단계로 오면 우리가 사용할 수 있는 코드가 제공되는 것을 확인할 수 있다.

(firebase) SDK 란 무엇인가?

Software Development Kit 의 약자이다. Software를 개발할 때 필요한 kit 이라는 뜻이다. 프레임 워크처럼 개발에 필요한 모든 것들이 들어있다.

youtube API를 통한 예를 들어보자. youtube API는 youtube 서버에서 우리가 직접 네트워크 통신을 이용해서 호출하여 데이터를 받아오는 등의 사용이 가능한 public API, 즉 공개적으로 오픈이 되어있는 API 였다. 반면, Firebase에서 자체적으로 제공하는 SDK는 (public API처럼 우리가 어떻게 통신을 해야 하는지, Firebase에는 어떤 API가 있는지, 어떤 것을 호출하고 어떤 순서로 설정하여 써야되는지에 대해 걱정하지 않아도) SDK를 어플리케이션에 라이브러리처럼 포함한 뒤, SDK에서 제공하는 API 함수들만 이용하면 SDK가 알아서 자동으로 Firebase와 통신을 하도록 만들어준다. 한마디로 설명해서 SDK는 조금 더 편리하게 개발을 할 수 있도록 도와주는 역할을 해준다.

하지만, 이러한 SDK를 어플리케이션에 추가함으로서 우리의 dependence가 하나 더 추가가 되는 것이기 때문에 프로젝트에 적용할 때에 이 프로젝트에 정말 필요한지 필요하지 않은지, 실이득을 확실히 따져본 뒤에 추가하는 것이 좋다.


**참고 **
firebase - 인증 페이지 : 공식문서 참조

profile
N개월차 프론트엔드 개발자, Teta Min

0개의 댓글