47. Firebase 로그인, 회원가입 2

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

에러:
Module not foun

원인:
모듈을 찾을 수 없는 경로 또는 잘못된 모듈 경로를 사용했을 경우 발생한다.

해결방안:
모듈의 경로가 올바른지 확인하고, 모듈이 있는 위치로 경로를 수정해야 한다.

Module not found: Error: Can't resolve '../firebase' in '/path/to/your/project'

에러 처리:
로그인 기능에서 에러 처리

원인:
이메일과 비밀번호로 로그인할 때, 올바르지 않은 정보를 입력하거나 서버와의 통신 중 문제가 발생할 경우 에러가 발생한다.

해결방안:
이메일과 비밀번호를 확인하고, 서버와의 통신 중 발생하는 에러 메시지를 사용자에게 적절하게 보여줘야 한다.

try {
  setLoading(true);
  const userCredential = await signInWithEmailAndPassword(auth, email, password);
  alert("환영합니다!", userCredential.user);
  dispatch(setUser(userCredential.user)); // user 정보를 setUser 액션을 이용해 Redux 스토어에 저장
  dispatch(setLoggedIn(true)); // isLoggedIn 상태를 true로 변경
  navigate("/");
} catch (error) {
  const errorCode = error.code;
  const errorMessage = error.message;
  if (errorCode === "auth/user-not-found") {
     alert("사용자가 존재하지 않습니다. 회원가입을 진행해주세요.");
  } else if (errorCode === "auth/wrong-password") {
     alert("비밀번호가 일치하지 않습니다.");
  } else {
     alert(errorMessage);
  }
} finally {
  setLoading(false);
}

Redux 복습

1. Redux 스토어

설명:
Redux 스토어는 Redux에서 상태(state)를 중앙에서 관리하는 역할을 수행하는 객체이다. 애플리케이션의 전역 상태를 저장하고, 상태를 변경하는 데 사용되는 메소드를 제공한다. Redux 스토어는 단일 상태 트리를 유지하며, Redux의 기본 원칙 중 하나인 "단일 소스 진리(Single Source of Truth)"를 준수한다.

import { createStore } from 'redux';
import rootReducer from './redux/modules'; // 루트 리듀서
const store = createStore(rootReducer);

2. React Router

설명:
React Router는 React 애플리케이션 내에서 페이지 기반의 라우팅을 관리하기 위한 라이브러리다. React Router를 사용하면 페이지 간의 전환과 URL에 따른 컴포넌트 렌더링을 쉽게 관리할 수 있다. 주로 BrowserRouter와 Route 컴포넌트를 사용하여 애플리케이션의 다양한 페이지를 구성할 수 있다.

import { BrowserRouter, Route, Switch } from 'react-router-dom';
function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        {/* ... */}
      </Switch>
    </BrowserRouter>
  );
}

3. Redux Thunk

설명:
Redux Thunk는 Redux 미들웨어의 일종으로, Redux 액션 생성자가 함수를 반환할 수 있도록 해준다. 이를 통해 비동기 작업을 처리하거나, 특정 조건에 따라 액션을 디스패치할 수 있다. Redux Thunk는 Redux의 기본적인 동기 액션 외에도 비동기 액션을 처리할 때 주로 사용된다.

// Redux Thunk를 사용한 비동기 액션 생성자 예시
import { createSlice } from '@reduxjs/toolkit';
import { fetchUserData } from './api';
const userSlice = createSlice({
  name: 'user',
  initialState: {},
  reducers: {
    setUser: (state, action) => {
      return action.payload;
    },
  },
});
export const fetchUserAsync = () => async (dispatch) => {
  try {
    const userData = await fetchUserData();
    dispatch(setUser(userData));
  } catch (error) {
    console.error('Error fetching user data:', error);
  }
};
}