알고리즘 코드카타

알고리즘 풀이1
알고리즘 풀이2

firebase 인증

firebase를 쓰는 이유

• 백엔드 서비스를 제공해준다
• 백엔드 개발자 없이도 어플리케이션 만들 수 있다
• 회원가입, 로그인 기능을 쉽게 만들어준다 - 원래는 보안을 위해 이것저것 신경써야 함 (jwt, 세션, 쿠키 등)

firebase 세팅하기

firebase.js 훑어보기

// firebase.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = { // firebase에서 어플리케이션 만들면 주는 애
  apiKey: "AIzaSyDdvEFtM7gjWi2MP0UmMWlhoVc1y2uUVpo",
  authDomain: "fir-practice-daf73.firebaseapp.com",
  projectId: "fir-practice-daf73",
  storageBucket: "fir-practice-daf73.appspot.com",
  messagingSenderId: "518889919904",
  appId: "1:518889919904:web:e6ea172519e8d1a33a40c5",
};

const app = initializeApp(firebaseConfig); // 내 어플리케이션 정보를 이용해서 firebase를 사용할 거임
export const auth = getAuth(app); // 내 어플리케이션에서 계정 관련된 데이터만 뽑아주는듯

로그인, 회원가입, 로그아웃 기능 만들기

1. 간단한 UI 만들기

• 실제 프로젝트에선 로그인, 회원가입 페이지를 따로 만들기
• email, password 위한 useState 만들기
• input 2개 만들기
• 회원가입, 로그인, 로그아웃 버튼 만들기

import { useState } from "react";

function App() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  return (      
        <>
          <input
            type="email"
            value={email}
            onChange={(e) => {
              setEmail(e.target.value);
            }}
          />
          <input
            type="password"
            value={password}
            onChange={(e) => {
              setPassword(e.target.value);
            }}
          />
          <button>
            회원가입
          </button>
          <button>
            로그인
          </button>
          <button>
            로그아웃
          </button>
        </>
      )
}

export default App;

2. 회원가입 onClick 만들기

• firebase.js 파일에서 auth import하기
• firebase/auth 에서 createUserWithEmailAndPassword import 하기

import { auth } from "./firebase";
import {
  createUserWithEmailAndPassword,
} from "firebase/auth";

(생략)
<button
  onClick={async () => {
    try {
      const userCredential = await createUserWithEmailAndPassword(
        auth,
        email,
        password
      );
      console.log(userCredential);
    } catch (error) {
      console.error(error);
    }
  }}
>
  회원가입
</button>

3. 로그인 onClick 만들기

• firebase/auth에서 signInWithEmailAndPassword import 하기

import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
} from "firebase/auth";

(생략)
<button
  onClick={async (event) => {
    try {
      const userCredential = await signInWithEmailAndPassword(
        auth,
        email,
        password
      );
      console.log(userCredential);
    } catch (error) {
      console.error(error);
    }
  }}
>
  로그인
  </button>

4. 로그아웃 onClick 만들기

import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
} from "firebase/auth";

(생략)

<button
  onClick={async () => {
    alert("로그아웃 할까?");
    await signOut(auth);
  }}
>
  로그아웃
</button>

5. 로그인 후에는 input 창이 사라지고, id가 나오게 만들기

• useState 활용하기

const [currentUser, setCurrentUser] = useState(null);

// 필요한 곳에 작성
setCurrentUser(userCredential.user.email);
setCurrentUser(null);

• 삼항연산자로 로그인 시 email 및 로그아웃 버튼을 보여주고, 그렇지 않은 경우 input 창 및 회원가입, 로그인 버튼 보여주기

{
	currentUser 
		? currentUser보여주고, 로그아웃 버튼 보여주기 
		: input창과 회원가입, 로그인 버튼 보여주기 
}

6. onAuthStateChanged로 더 편리하게 코드 변경하기

• 회원가입, 로그인, 로그아웃 버튼에 모두 setCurrentUser를 넣고 있음
• onAuthStateChanged라는 기능을 활용하면 한 번에 관리 가능
• onAuthStateChanged는 로그인을 했을 때, 로그아웃 했을 때를 알아차리는 역할(옵저버)을 함
• user 안에 데이터가 없으면 currentUser가 null 혹은 undefined
• user 안에 데이터가 있으면 email을 넣기

import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  onAuthStateChanged,
  signOut,
} from "firebase/auth";

(생략)
useEffect(() => {
  onAuthStateChanged(auth, (user) => {
    setCurrentUser(user?.email);
  });
}, []);

아웃소싱 프로젝트

문제

어찌저찌 파이어베이스 연동을 끝내고 난 후 회원가입을 하려는데 파이어베이스로 데이터가 넘어가지 않는 문제가 발생했다.
내가 로직을 잘 못 짠 부분은 없는지 오타는 없는지 충분히 확인을 해본 후 같은 팀원분께 질문을 해봤다..

해결

같이 콘솔도 찍어보고 검사창도 뜯어보니 데이터는 전송이 되는데 중간에 새로고침이 일어나서 서버가 데이터를 받지 못하는 상황이었다. 도대체 왜..!

알고보니 나는 입력창에 form 태그를 썼고 form 태그에서는 리셋이 되기 때문에 그걸 막아주는 로직이 필요하다고 한다.
e.preventDefault();

두가지의 강의 자료를 보면서 해서 그런지 저 부분을 빼먹었다.. 다시 넣어주니 정상적으로 작동함!

preventDefault

a 태그나 submit 태그는 누르게 되면 href를 통해 이동하거나 창이 새로고침하여 실행된다. preventDefault 를 통해 이러한 동작을 막아줄 수 있다고 한다.

주로 사용되는 경우는
1. a 태그를 눌렀을 때도 href 링크로 이동하지 않게 할 경우
2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨)

2의 예시로는 오늘의 나의 경우..!
받는 event 에 대해 preventDefault 를 해주지 않았기 때문에 submit 됨과 동시에 창이 다시 실행되기 때문에 다시 초기 화면으로 돌아오게 된다.

---

내배캠 들어오고 나서 오늘 제일 열심히 한 거 같다.. 팀원분들이 배려해주신 덕에 사실상 이번에도 제일 쉬운 기술을 맡게 된 거 같지만 기존에 몰랐던 완전히 새로운 기능을 짧은 시간내에 구현을 한다는 거 자체가 너무 막막하고 무서웠지만 큰 산 하나는 넘은 거 같다. 근데 은근히 css가 제일 어려운 거 같음.......... 얼른 기본적인 뼈대 만들고 몇가지 더 기술을 덧붙여야겠다. 그리고 오늘 내배캠에 들어오고 처음으로 다른 분의 코드에서 오류를 잡아줬다..! 누군가에게 도움을 주는 순간이 올 거라곤 생각도 못했는데 내가 조금은 성장했구나 싶었다. 에러 메시지를 보면서 오류를 해결하는 기쁨을 맛보니 코딩이랑 조금은 친해진 거 같다ㅎ 나 이제는 파이어베이스 조금 안다!!!