[TIL/React] 2023/08/02

Authentication in ReactJS Using Firebase 🟠

프로젝트의 진행을 위해, 로그인과 회원가입 기능(Authentication)에 대한 학습은 필수불가결하다. 외국인 프로그래머 누님의 자료를 참고했다.

reference: https://www.youtube.com/watch?v=Vv_Oi7zPPTw

src/App.js 🟡

import React from "react";
import SignIn from "./components/auth/SignIn";
import SignUp from "./components/auth/SignUp";
import AuthDetail from "./components/AuthDetail";

function App() {
  return (
    <div>
      <SignIn />
      <SignUp />
      <AuthDetail />
    </div>
  );
}

export default App;

최상단 App 파일에서는 SignIn, SignUp, AuthDetail 컴포넌트를 렌더링하고 있다. 흥미진진하구만!

src/components/auth/SignIn.js 🟡

import { signInWithEmailAndPassword } from "firebase/auth";
import React, { useState } from "react";
import { auth } from "../../firebase";

const SignIn = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const signIn = (e) => {
    e.preventDefault();
    signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        console.log(userCredential);
      })
      .catch((error) => {
        console.log(error);
      });
  };
  return (
    <div>
      <form onSubmit={signIn}>
        <h1>Log In to your Account</h1>
        <input
          type="email"
          placeholder="Enter your email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        ></input>
        <input
          type="password"
          placeholder="Enter your password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        ></input>
        <button>LogIn</button>
      </form>
    </div>
  );
};

export default SignIn;

SignIn 컴포넌트는 우선 'Log In to your Account'라는 제목을 반환한다. 그 다음 두 개의 input 필드와 한 개의 버튼을 보여준다. return 부분은 딱히 어려운 점이 없다. 로그인 버튼을 클릭하는 순간 form 태그에서 입력된 데이터가 signIn 함수에 event 객체로 전달된다. 진짜로? ㅇㅇ console 찍어봄!

signIn 함수는 입력받은 데이터에 대해서 가장 먼저 preventDefault 함수를 호출한다. form 제출 시 페이지 새로고침을 방지하는 역할을 수행한다.

signInWithEmailAndPassword는 firebase에서 제공하는 함수 중 하나다. 이 함수는 auth라는 firebase의 인증 객체와 email, password를 받아서 로그인을 시도하는 함수인가 보다. 나는 말하는 감자니까 일단 이 정도만 이해하고 넘어가겠다.

then은 로그인이 성공적으로 이주어졌을 때, 'userCredential' 객체를 매개변수로 받아서 실행되는 콜백 함수이다. 'userCredential' 객체에는 로그인한 사용자에 대한 정보가 포함되어 있다.

catch는 에러가 감지되면 콘솔로 해당 에러를 return하는 역할을 수행하고 있다.

요약 🟢

1. 제목, input, button 리턴
2. 버튼 클릭하면 onSubmit에 의해 form에서 발생한 데이터가 event 객체로 signIn 함수로 전달됨
3. signIn 함수에서는 새로고침을 방지하고 signInWithEmailAndPassword 함수를 통해 로그인을 시도함
4. 성공하면 userCredential이라는 객체를 매개변수로 받아서 console에 return하고, 실패하면 error를 return함

회고 🔵

나머지 부분은 내일 정리하고, 시간이 허락하면 crud에 관한 자료를 학습하도록 하겠다.

이번에 잘하냐 못 하냐 하는 것은 그렇게 중요하지 않습니다. 앞으로 기회가 수백, 수천 번 더 있다면 말입니다. 그런 경우 더 중요한 것은 지금 잘하냐가 아니라 지금 자라냐는 것입니다. 실제 바깥세상에서는 한 번의 판가름으로 나의 미래가, 우리의 미래가 갈리는 경우보다는 수백, 수천 번의 누적 위에 서서히 정해지는 경우가 더 많습니다.

-함께 자라기: 애자일로 가는 길 中