111. User Registration

npm create vue@latest


여기선 Firebase를 이용하여 사용자를 등록하는 방법을 설명합니다.
사용자 등록을 위해 Firebase의 인증 기능을 활성화하는 것이 첫번째 단계입니다.
인증 기능을 활성화하지 않으면 Firebase가 인증 시도를 거부합니다.

  1. Firebase 콘솔에서 인증 설정

    • 프로젝트의 Firebase 콘솔을 열고 사이드바에서 '인증'을 클릭합니다.
      Firebase는 서버 사이드 코드 없이 다양한 제공자를 통해 사용자를 인증하고 간리할 수 있는 기능을 제공합니다.
  2. 다양한 인증 제공자

    • Facebook, Twitter, Google과 같은 플랫폼은 다른 사이트에 사용자를 등록할 수 있도록 데이터를 전송하는 서비스를 제공합니다.
      이러한 회사들은 Firebase에서 '제공자(provider)`로 언급됩니다.
  3. 인증 방법 선택

    • Firebase는 다양한 플랫폼을 지원합니다.
      이메일 방법을 선택하고 활성화하지만, 비밀번호 저장 옵션은 활성화하지 않습니다.
  4. Firebase API를 통한 사용자 추가

    • 사용자는 Firebase의 API를 통해 애플리케이션에 추가됩니다.
  5. 등록 폼 컴포넌트 수정

    • 편집기에서 등록 폼 컴포넌트를 열고 등록 함수를 스크롤합니다.
      이 함수는 등록 제출을 처리합니다.
      Firebase 인스턴스를 사용하여 데이터를 전송합니다.
  6. Firebase 인스턴스 가져오기

    • 컴포넌트에 Firebase 인스턴스를 가져와야 합니다.
      이전 강의에서 생성한 Firebase 파일을 import 해야하며, Firebase 모듈과 혼동하지 않도록 주의합니다.
  7. 사용자 등록 코드 작성

    • firebase.auth() 함수를 호출하여 인증 서비스와 통신할 수 있는 메소드와 속성을 반환받습니다.
      createUserWithEmailAndPassword 메소드를 사용하여 사용자의 이메일과 비밀번호로 새로운 사용자 계정을 생성합니다.
      이 함수는 프로미스를 반환하며, 인증이 성공하면 사용자의 자격 증명을 포함하는 객체를 제공합니다.
      계정 생성이 성공하면 Firebase는 자동으로 사용자를 로그인시킵니다.
  8. 응답 처리

    • asyncawait 키워드를 사용하여 createUserWithEmailAndPassword 함수를 비동기적으로 호출합니다.
      이 함수는 제공된 정보로 Firebase에 요청을 보내고, 성공적이면 사용자의 자격 증명을 반환합니다.
  9. 이메일과 비밀번호 전달

    • 이메일과 비밀번호는 등록 폼의 입력 필드에서 가져온 값을 사용하여 전달합니다.

이 과정을 통해 사용자는 시스템에 완전히 등록될 수 있으며, 다음 강의에서는 이에 대한 응답 처리 방법을 살펴볼 것입니다.
Firebase를 통한 사용자 등록 및 인증 프로세스는 서버 사이드 코드 없이도 다양한 인증 옵션을 제공하여 개발자들에게 유연성을 제공합니다.

src/includes/firebase.ts
import { initializeApp } from 'firebase/app'

const firebaseConfig = {
  apiKey: 'AIzaSyA4X8qu0cS5CeKS9sExbwWgTP4mW9crP84',
  authDomain: 'vue-guide-2.firebaseapp.com',
  projectId: 'vue-guide-2',
  storageBucket: 'vue-guide-2.appspot.com',
  // messagingSenderId: '475228612189',
  appId: '1:475228612189:web:ff548967df307e9a110fb4'
}

export default initializeApp(firebaseConfig)