[WIL] 리액트 심화주차 | 이노베이션 캠프 동북권 - 5주차 회고

🚢 이번 항해는?

3주간의 주특기 주차 마지막까지 잘 달려왔다.🥳

 

매주 과제의 필수 기능들을 구현해 보며 트러블 슈팅을 하는 과정에서 책과 검색의 도움을 정말 많이 받았다. 그러는 과정에서 리액트의 기초를 많이 다질 수 있었고, 팀원 분들과 더 공부해보고 싶은 주제를 정리해와서 서로 가르쳐 주기도 했다. 특히 최적화나 서스펜스, 무한스크롤 등 익숙지 않았지만 관심 있었던 주제도 같이 이야기 나눠볼 수 있어서 알찬 시간이었다. 3주 동안 같은 팀이었던 팀원 분들께 감사하다.

 

리액트 주차 팀 과제 - 맡은 분량 정리 노션

 

💜 매거진 프로젝트

이번 리액트 심화주차의 과제는 로그인 유저용 매거진 사이트를 만들어 보는 것이었다.

개인적으로 나는 디자인이 예뻐야 만드는 재미도 있는 편이라, 지금까지 리액트 주차를 거치면서 시간이 좀 걸리더라도 모든 과제를 피그마로 우선 디자인을 해보고 작업했었다. 피그마를 잘 사용하지 못했었는데 리액트 주차 동안 익숙해지는 데까지는 성공한 것 같다. 워낙 좋은 툴이라 더 다양한 기능을 배워보고 싶기도 하다.

 

 

로그인 여부는 간단하게 recoil로 isLoggedInAtom을 만들어서 관리했고, 지난 주에는 적용하지 못했던 redux-toolkit을 이번 과제엔 드디어 간단하게나마 적용해볼 수 있었다.

 

리덕스 툴킷은 thunk를 내장하고 있어서 createAsyncThunk를 사용해 비동기 작업 관련 함수를 작성하고, createSlice로 초기값과 액션, 리듀서(reducers, extraReducers)들을 한꺼번에 객체 하나에 담아 전달할 수 있다. 또한 리덕스 툴킷은 immer를 도입했기 때문에 객체의 불변성을 유지할 수 있어서 상태값을 직접 변경할 수 있다는 점에서 차이가 있었다.

 

// postSlice.js

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { db } from 'shared/firebase';
import { getDocs, addDoc, collection, query, orderBy } from 'firebase/firestore';

export const getPosts = createAsyncThunk('post/getPosts', async () => {
  // ...
});

export const createPost = createAsyncThunk('post/createPost', async (newPost) => {
  // ...
});

const postSlice = createSlice({
  name: 'post',
  initialState: [],
  reducers: {},
  extraReducers: {
    [getPosts.fulfilled]: (state, { payload }) => payload,
    [createPost.fulfilled]: (state, { payload }) => [payload, ...state],
  },
});

export default postSlice.reducer;

 

그리고 로그인/회원가입을 위해 react-hook-form을 사용하였다. 아직 사용해본 경험이 적어서 잘 사용한 것인지에 대한 확신은 없지만, 확실히 validation 처리 및 조건 미충족 시 버튼 비활성화 등을 간편하게 할 수 있어서 좋은 라이브러리라는 생각이 들었다.

 

 

https://github.com/ddooyn/veryperi-magazine-2022

GitHub - ddooyn/veryperi-magazine-2022: 로그인 유저용 매거진 사이트 - 이노베이션 캠프 리액트 심화주차

 

🤗 Together

금요일부터 드디어 스프링 주특기를 선택한 백엔드 분들과 함께 미니 프로젝트를 시작하게 되었다. 프론트엔드 2명, 백엔드 3명으로 팀이 구성되었다. API를 금,토요일에 같이 설계하고, 받은 피드백을 통해 보완하면서 프론트와 백엔드 사이의 충분한 소통이 중요하다는 것을 알 수 있었다. 프로젝트 주제는 공동구매나 배달, 공연/전시회에 함께 할 사람을 모집하는 플랫폼으로 정해졌다. 그래서 HeyYo 라는 이름을 지어보았는데 함께해요 같이해요 라는 뜻을 담고 있다.

 

프론트를 함께 맡게된 팀원분과 react-query와 Suspense에 대한 이해를 확실히 하고 프로젝트에 임하고 싶어서 이 주제에 대한 스터디를 제안해 반나절 동안 함께 했다. react-query 라이브러리가 불과 일주일도 안된 사이에 deprecated 되어서 당황했지만 공식문서를 읽으며 @tanstack/react-query 와 @tanstack/react-query-devtools 라이브러리를 설치하고 바뀐 4버전에 대해 같이 정리하며 공부했다. 결과적으로 같이 공부한 결과가 만족스러워서 이번 프로젝트에 잘 활용해 볼 수 있을 것 같다. 프로젝트 결과가 벌써 기대된다.