0. 새로운 프로젝트의 시작

이 전에 진행했던 가계부 프로젝트가 끝나고 이제 새로운 프로젝트를 실행한다.
프로젝트 이름은 prePlay다!

prePlay인 이유는 스터디 팀명이 preCrew라서 앞글자만 따서 prePlay로 정했다.
정말 심플한 네이밍이다! ㅋㅋㅋㅋㅋㅋ

이번 프로젝트는 이전보다 많은부분을 신경쓰고 진행을 시작했다.
협업은 어떤식으로 할지, 디자인은 어떤식으로 할지, 등등...
근데 제일 중요한 부분을 미리 상의하지 않고 시작했다.

바로바로바로바로바로바로 프로그램 설계다
그래서 진행 도중에 프로젝트의 방향이 계속 바뀌었다.

아쉬웠던 부분은 뒤로하고 앞으로 프로젝트 진행과정을 계속 적어보도록 하자.

1. 내 역할

이번 프로젝트에서 내가 할일은 아래와 같다.

1. 로그인 구현
2. 무한 스크롤 기능 구현
3. 2에서 로딩중일 때 스켈레톤 UI 구현
4. 프로필 페이지구현
   4.1. 좋아요, 댓글수 출력
   4.2. 지금까지 적었던 댓글목록 출력

사실 나머지는 간단한데 FireStore 구현 부분에서 시간이 오래 걸릴것같다.
아직 완전히 내꺼로 만든 스택이 아니기 때문이다.
그래도 지금이 9월29일인데 10월1일에 끝내는걸 목표로 진행해볼거다.

2. 로그인 구현

로그인 기능 구현은 간단하다.
근데 이번엔 서버부분 데이터의 상태관리 라이브러리로 redux가 아닌 react-query를 쓸 예정이다.

근데 왜 굳이 잘 배워둔 redux를 버리고 react-query를 골랐냐면
redux로 비동기 상태를 처리하는데 드는 비용이 너무 크기 때문이다.

이전 프로젝트를 진행하면서 느낀점이 redux로 통신을 구현한다면
통신 상태도 구현해야하고 거기에 더해 각각 상태의 함수도 만들어 줘야하고
진짜 너무 불필요한 작업이 중복됐었다.

그래서 뭐 없나 하던 찰나에 react-query가 내 눈앞에 뾰로롱 나타났다!!
아직 학습중이라 정확하게 설명할수는 없지만 react-query의 핵심기능은
데이터의 프레시한상태, 캐싱된 데이터를 관리하는것같다.

너무 또 잡설이 길었는데 react-query로 이 기능을 구현하니 코드가 아래처럼 짧아졌다.

import { app } from '@src/firebaseConfig';
import { useQuery } from '@tanstack/react-query';
import { getAuth, GoogleAuthProvider, signInWithPopup } from 'firebase/auth';

const loginWithGoogle = async () => {
  const provider = new GoogleAuthProvider();
  return (await signInWithPopup(getAuth(app), provider)).user;
};
export default () =>
  useQuery(['userInfo'], loginWithGoogle, {
    staleTime: Infinity,
    cacheTime: Infinity,
    enabled: false,
  });

참고로 이전의 코드는 이렇다

import { CaseReducer, createAsyncThunk } from '@reduxjs/toolkit';
import {
  GoogleAuthProvider,
  browserLocalPersistence,
  setPersistence,
  signInWithEmailAndPassword,
  signInWithPopup,
} from 'firebase/auth';
import { auth } from 'firebaseConfig';
import { TUserIdPassword } from './asyncCreateUser';

const asyncLoginUser = createAsyncThunk(
  'userSlice/asyncLoginUser',
  async ({
    type,
    user,
  }: {
    type: 'google' | 'idpw';
    user?: TUserIdPassword;
  }) => {
    await setPersistence(auth, browserLocalPersistence);
    // 현재 로그인되지 않은 상태라면
    if (!auth.currentUser) {
      let response;
      const provider = new GoogleAuthProvider();
      response = await signInWithPopup(auth, provider);

      return response.user
        ? data: {
              uid: response.user.uid,
              email: response.user.email,
          },
        : { data: '이메일 혹은 암호가 잘못됨' }
    }
  },
);

const asyncLoginUserPending: CaseReducer = (state, action) => {
  state.loadingState.loginUser.loading = true;
  state.loadingState.loginUser.success = false;
  state.loadingState.loginUser.error = false;
  state.loadingState.loginUser.errorMsg = null;
};

const asyncLoginUserFulfilled: CaseReducer = (state, action) => {
  state.loadingState.loginUser.loading = false;
  state.loadingState.loginUser.success = true;

  console.log(action.payload.data);
  state.uid = action.payload.data.uid as string;
  state.email = action.payload.data.email as string;
  state.isLogin = true;
};

const asyncLoginUserRejected: CaseReducer = (state, action) => {
  state.loadingState.loginUser.loading = false;
  state.loadingState.loginUser.error = true;
  state.loadingState.loginUser.errorMsg = action.payload.data;
};

export default asyncLoginUser;
export {
  asyncLoginUserPending,
  asyncLoginUserFulfilled,
  asyncLoginUserRejected,
};

구현 방식이 잘못된것일수도 있지만 한눈에 봐도 코드 길이가 차이난다.
그래서 앞으로 비동기 데이터를 받아와야 하는 부분에서는 react-query를 사용할 예정이다.

이 다음 포스트는 FireStore의 설계와 구현이 되지 않을까 싶다.