#3. Firebase와 Redux 설정 | firebase, store, userSlice

로그인한 정보는 로그인 화면 뿐아니라 추후 메인화면에서도 사용된다.

이번 링크드인 프로젝트를 까다롭게 만드는 것은, 로그인을 한 정보가 단순히 로그인 화면 뿐 아니라 로그인 이후의 메인화면에서도 사용된다는 점에 있다. 따라서 로그인 기능을 구현하기 위해 Firebase를 세팅해주어야 하고, 또한 로그인 정보를 다른 컴포넌트에서도 계속해서 사용하기 위해 Redux를 세팅해주어야 한다. 우선은 Firebase 세팅부터 진행한다.

 

Firebase 프로젝트 설정 화면

Firebase 프로젝트를 만들고 나면, 별도의 세팅 페이지가 있다. 이 곳 하단에 있는 Config 키를 복사하여 firebase.js에 붙혀넣는다.

 

import firebase from 'firebase'

//firebase 사용을 위해 필요한 정보들
const firebaseConfig = {
    apiKey: "AIzaSyCiLVYPW9homV0E5iYPzQ3mI03oyCWATnc",
    authDomain: "linkedin-clone-cmk.firebaseapp.com",
    projectId: "linkedin-clone-cmk",
    storageBucket: "linkedin-clone-cmk.appspot.com",
    messagingSenderId: "231118691347",
    appId: "1:231118691347:web:7e3faf3b85a9e9893673e6",
    measurementId: "G-9RFEXRBE4R"
};

//firebase app을 시자가고
const firebaseApp = firebase.initializeApp(firebaseConfig);

//firebase의 db 기능을 이용해 데이터들을 저장한다
//이 부분은 post를 저장하고 보여줄 때 주로 사용된다
const db = firebaseApp.firestore();

//로그인 기능을 구현하기 위해 authentication 기능을 사용한다
const auth = firebase.auth();

export { db, auth };

그 후 Redux를 위해 store.js와 userSlice를 세팅한다. 우선 store.js부터

 

import { configureStore } from '@reduxjs/toolkit';
import userReducer from '../features/userSlice';

export const store = configureStore({
  reducer: {
  	//user 정보를 위한 userReducer 설정
    user: userReducer,
  },
});

 

이후에 userSlice.js 세팅

import { createSlice } from '@reduxjs/toolkit';

export const userSlice = createSlice({
  //user 정보의 초기 세팅값은 null로 설정
  name: 'user',
  initialState:{
    user: null
  },
  reducers: {
  	//reducer 중 login이 작동하면, 
    login: (state, action) => {
      //전달받은 유저정보를 user에 담는다
      state.user = action.payload;
    },
    //reducer 중 logout이 작동하면,
    logout: (state) => {
      //user 정보를 null로 바꾼다
      state.user = null;
    },
  },
});

//login, logout을 reducer의 작동유형으로 설정하고
export const { login, logout } = userSlice.actions;

//다른 컴포넌트들에서도 user정보를 가져다 데이터바인딩할 수 있게 selector도 설정한다
export const selectUser = (state) => state.user.user;

export default userSlice.reducer;

 

Redux를 통해 user 정보를 담을 수 있는 부분, 로그인/로그아웃 시 이러한 정보들을 수정할 수 있는 reducer 세팅, 마지막으로 user 정보들을 다른 곳에서도 가져와 볼 수 있도록 selector를 세팅한다.