[회고] PostMobism

🔗 Links

vercel
github
figma

프로젝트 개요

PostMobism 은 BE Api를 활용하여 회원가입, 로그인, 게시글 CRUD 그리고 댓글 작성을 할 수 있는 사이트입니다

총 2명이 참여하였고, 설 연휴 기간 제외 2024-02-03 ~ 2024-02-17 약 12일 동안 진행하였습니다
후에는 배포 및 자잘한 오류 수정 및 리팩토링을 진행하였습니다

---

역할 분담 및 목표

역할 분담 방식

✓ 효율보다는 "많은 것을 얻어가는 것" 에 초점을 맞춘 역할 분담

이전에 진행하면서 아쉬웠던 것들을 이번엔 제대로 챙기는 것이 목표였기 때문에,
이전에는 보통 로직이 겹치기에 한 사람이 회원가입/로그인을 모두 진행했다면 이번에는 그 안에서 나눠서 진행하였습니다
ex) you: 회원가입/포스트, me: 로그인/댓글

이때 서로 함수명이나 폴더명 등 로직이 겹치치거나 혼동이 올 수 있어서 PR review를 꼼꼼하게 진행하기로 했습니다

---

나의 역할

Login, Comment, postDetailModal

목표

1. 정확하고 효율적인 백엔드 Api 분석

• 시퀀스 다이어그램
• Thunder Client

2. 제대로! 로직 이해하기 + 협업!!

• auth, refreshToken 로직 이해 및 구현
• 리니어, githubIsuue, prReview, JS DOCS를 통한 체계적이고 효율적인 협업

3. RTK

• RTK를 사용한 전역상태관리
• RTK Query를 사용한 무한스크롤링 구현

---

목표 달성 여부 및 성과

1. 정확하고 효율적인 백엔드 Api 분석 ❌

• 시퀀스 다이어그램
• Thunder Client

위는 팀원분께서 백엔드 Api분석을 시퀀스 다이어그램입니다

분석이 처음이라 어떻게 해야할지 모르겠어서 그냥 생각을 정리하듯이 해갔는데,
팀원분 덕분에 시퀀스 다이어그램에 대해서 알게되어 함께 다시 정리했습니다!

---

🔴 실패 요인 분석

1. input output 연상 부족

잘한 것 같지만, 빠진 것이 있다면 Thunder Client로 실제 활용할 data의 인풋 아웃풋 값을 제대로 연상하지 못했습니다
백엔드 API 분석을 예상으로만 진행하다 보니, 실질적으로 구현할 때 예상대로 되지 않았던 부분들이 있었습니다

2. 익숙하지 않은 툴, 효율적인 진행의 어려움

또한 Api 분석, 시퀀스 다이어그램 그리기, 피그마 모두 익숙하지 않다보니 효율적인 진행이 잘 되지 않았던 거 같습니다

---

🔵 극복 방법

1. ThunderClient로 정확한 data 요청 및 분석

회색 사각형으로 가려진 부분은 backendURL 입니다

⚡️ SignUp/In

⚡️ postPost

⚡️ getPost

⚡️ patchPost

⚡️ deletePost

⚡️ getPostDetail

⚡️ postComment

⚡️ getComment

2. 시퀀스 다이어그램 툴을 사용

draw.io (무료)

ThunderClient로 분석한 것을 바탕으로 요청 실패와 성공시 값을 나눠서 나올 수 있는 버그들에 대해 예측했습니다

왼쪽에는 불필요한 요청이나 토큰 세팅 등에 대한 상세 내용들을 어떻게 처리할지 예상해보았습니다

---

2. 제대로! 로직 이해하기 + 협업!! ✅

협업은 chap-chap 프로젝트에서 열과 성을 다했던만큼, 그 때 했던 것들을 바탕으로 잘 진행하였습니다.

🤝 리니어

🤝 GitHub Issue

🤝 PR Review

🤝 PR Template

---

3. RTK ✅

comment.slice.ts

import { TCommentsResponse } from "@/type/type"
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"
import { CommentApi } from "./comment.api"
import { CommentDataType } from "@/pages/main/components/post-detail-modal/components/comment/comment-form"

type CommentState = {
  commentList: TCommentsResponse | null
  loading: boolean
  error: string | null
}

const initialState: CommentState = {
  commentList: {
    data: [],
    pageNation: undefined,
  },

  loading: false,
  error: "",
}

// getComments : read
export const getComments = createAsyncThunk<TCommentsResponse, { page: number; postId: string }>(
  "comment/getComments",
  async ({ page, postId }) => {
    try {
      const posts = await CommentApi.getComment({ page, postId })
      return posts
    } catch (error) {
      throw new Error("게시글 데이터를 불러오는 데 실패했습니다!")
    }
  },
)

export const postComment = createAsyncThunk("comment/postComment", async ({ parentId, content }: CommentDataType) => {
  try {
    const commentData = { parentId, content }
    const res = await CommentApi.postComment(commentData)
    return res.data
  } catch (error) {
    throw new Error("댓글 작성에 실패하였습니다")
  }
})

//Reducer와 action 정의
export const commentSlice = createSlice({
  name: "comment",
  initialState,
  reducers: {},
  //extraReducers를 사용하여 비동기 액션(getPosts)의 성공, 실패 및 보류 상태에 따라 상태를 업데이트
  extraReducers(builder) {
    builder
      // getPost : read
      .addCase(getComments.pending, state => {
        state.loading = true
      })
      .addCase(getComments.fulfilled, (state, action) => {
        state.loading = false
        state.error = null
        state.commentList = {
          data: state.commentList?.data.concat(action.payload.data)!,
          pageNation: action.payload.pageNation,
        }
      })
      .addCase(getComments.rejected, (state, action) => {
        state.loading = false
        state.error = action.error.message || "예기치 못한 에러로 게시글 데이터를 불러오지 못했습니다!"
        state.commentList = null
      })
      // postComment: create
      .addCase(postComment.pending, state => {
        state.loading = true
      })
      .addCase(postComment.fulfilled, (state, action) => {
        state.loading = false
      })
      .addCase(postComment.rejected, (state, action) => {
        state.loading = false
        state.error = action.error.message || "댓글 작성에 실패하였습니다"
      })
  },
})

// export const { setPostList } = postSlice.actions

export default commentSlice.reducer

store.ts

import userReducer from "@/features/user/user.slice"
import postReducer from "@/features/post/post.slice"
import commentReducer from "@/features/comment/comment.slice"
import { configureStore } from "@reduxjs/toolkit"
import { commentApi } from "@/hooks/use-get-comment-list-query"

export const store = configureStore({
  reducer: {
    user: userReducer,
    post: postReducer,
    comment: commentReducer,
    [commentApi.reducerPath]: commentApi.reducer,
  },
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
      serializableCheck: false, // 불필요한 경고를 피하기 위해 추가
    }).concat(commentApi.middleware),
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

RTK Query 이용한 무한스크롤링 구현

import { TCommentsResponse } from "@/type/type"
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"

const token = localStorage.getItem("access_token")

export const commentApi = createApi({
  reducerPath: "commentApi",
  baseQuery: fetchBaseQuery({
    baseUrl: import.meta.env.VITE_BACKEND_URL,
    headers: {
      authorization: `Bearer ${token}`,
    },
    credentials: "include",
  }),
  tagTypes: ["Comment"],
  endpoints: builder => ({
    getCommentList: builder.query<TCommentsResponse, { postId: string; pageParam: number }>({
      query: ({ postId, pageParam }) => ({
        url: `/data/comment?parentId=${postId}&page=${pageParam}&apiKey=${import.meta.env.VITE_API_KEY}&pair=${import.meta.env.VITE_PAIR}`,
        method: "GET",
      }),
      providesTags: ["Comment"],
      serializeQueryArgs: ({ queryArgs }) => {
        const newQueryArgs = { ...queryArgs }
        if (newQueryArgs.pageParam) {
          newQueryArgs.pageParam = 0
        }
        return newQueryArgs
      },
      merge: (currentCacheData, responseData) => {
        if (currentCacheData.data) {
          return {
            ...currentCacheData,
            ...responseData,
            data: [...currentCacheData.data, ...responseData.data],
          }
        }
      },
    }),
  }),
})

export const { useGetCommentListQuery } = commentApi

---

어려웠던 점 & 알게 된 점 & 개선 방안

1. BE Api 제대로 된 분석

위에 쓴대로 thunder client, draw.io를 통해 극복!

2. RTKQuery를 통한 무한스크롤링

공식문서를 읽어봐도 많이 어려웠습니다..
남은 리팩토링을 진행하며 다시한 번 잘 되지 않았던 부분을 보고 정리할 것입니다
전역 상태 관리와 무한 스크롤링은 react-query, useInfiniteQuery를 사용하는 것이 어떨까..^^

---

마무리

타입스크립트, RTK, 백엔드 API분석을 위한 프로젝트였던 거 같습니다
아직 어렵긴하지만 그래도 점점 익숙해져가는 게 느껴졌습니다

다 처음할 때는 어렵지만, 한 번 하고 다음에 또 사용하면 그래도 익숙해진다는 것을 알게되어 새로운 Library 및 Tool에 대한 두려움이 좀 사라졌습니다

백엔드 API 분석은 아무래도 아직 백엔드와의 협업경험이 모자라다보니 어쩔 수 없는 부분이긴 하지만, ThunderClient + 시퀀스 다이어그램 + 개발자 도구 검사 창에 익숙해져서 부족함을 메꿔나가야겠습니다!

특히 이번 프로젝트 때 예상치 못하게 아프고, 또 연휴가 끼면서 프로젝트가 조금 밀리는 일이 있었는데 컨디션 건강 관리를 잘하고... 계획을 프로젝트에 차질이 없도록 세워서 더 책임감있게 임해야겠다는 생각이 들었습니다.