46. Firebase 로그인, 회원가입

Mission: Firebase를 활용해 로그인, 회원가입 기능을 구현하며 발생한 에러 및 주요 개념 정리

에러:
Firebase: Error (auth/invalid-api-key)

원인:
Firebase의 API 키가 잘못 설정되었거나 유효하지 않은 경우 발생한다.

해결방안:
1. Firebase 콘솔에서 제공된 올바른 API 키를 사용하여 firebaseConfig 객체에 설정한다.

// Your web app's Firebase configuration
export const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

2. 개발 서버를 재시작한다.

yarn start

에러:
React Hook useEffect has a missing dependency: 'dispatch'

원인:
useEffect의 의존성 배열에 dispatch가 포함되지 않아 발생한다.

해결방안:
useEffect의 의존성 배열에 dispatch를 추가한다.

import { useEffect } from "react";
function MyComponent({ dispatch }) {
  useEffect(() => {
    // Some effect that uses dispatch
  }, [dispatch]);
}

Firebase
Firebase API 키

설명:
Firebase를 사용하기 위해 필요한 고유한 키로, Firebase 프로젝트를 초기화할 때 제공된다.

해결방안:

useEffect, useDispatch, useSelector 복습
1. useEffect Hook

설명:
함수형 컴포넌트에서 side effect를 수행할 때 사용하는 Hook으로, 컴포넌트의 렌더링과 관련 없는 작업을 처리한다.

import { useEffect } from "react";
function MyComponent() {
  useEffect(() => {
    // Effect 작업
    return () => {
      // Cleanup 작업
    };
  }, [/* 의존성 배열 */]);
}

2. useDispatch Hook

설명:
Redux 스토어의 dispatch 함수를 사용하기 위해 React 컴포넌트에서 사용되는 Hook이다.

import { useDispatch } from "react-redux";
function MyComponent() {
  const dispatch = useDispatch();
  // dispatch를 사용한 작업 처리
}

3. useSelector Hook

설명:
Redux 스토어의 상태(state)를 React 컴포넌트에서 사용하기 위한 Hook으로, 상태값을 가져올 때 사용한다.

import { useSelector } from "react-redux";
function MyComponent() {
  const state = useSelector((state) => state.someSlice);
  // state 사용
}

Redux, Reducer 복습
1. 리덕스(Redux)

설명:
상태 관리 라이브러리로서 React 애플리케이션에서 복잡한 상태를 효율적으로 관리하기 위해 사용된다.

주요 개념:

• 액션(Action):
  상태 변화를 일으키는 객체로, type 필드가 반드시 있어야 한다.
  
  
• 액션 생성자(Action Creator):
  액션을 생성하는 함수로, 필요한 정보를 전달하여 액션을 반환한다.
  
  
• 리듀서(Reducer):
  액션에 따라 상태를 어떻게 변경할지 정의하는 함수다.
  
  
• 스토어(Store):
  애플리케이션의 상태를 담고 있는 객체로서, 액션에 따라 상태가 변경된다.
  
  
• 디스패치(Dispatch):
  액션을 스토어에 전달하는 함수로, 리듀서를 실행하여 상태를 변경한다.
  
  
• 구독(Subscribe):
  스토어의 상태 변화를 감지하여 리스너 함수를 실행하는 것을 말한다.

2. 리듀서(Reducer)

설명:
리듀서는 현재 상태(state)와 액션(action) 객체를 받아서 새로운 상태를 반환하는 함수이다.

const initialState = { count: 0 };
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + 1 };
    case "DECREMENT":
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

3. .env

설명:
.env 파일은 환경 변수를 저장하는 파일로, 프로젝트에서 중요한 정보(예: API 키, 비밀키)를 저장하고 외부로부터 감추기 위해 사용된다.

환경 변수를 관리함으로써 보안성을 향상시키고, 다양한 환경에서 애플리케이션을 실행할 수 있도록 도와준다.