real-bird / wanted-pre-onboarding-frontend

원티드 프리온보딩 프론트엔드 선발 과제 개선 프로젝트

(개인 프로젝트) Wanted FE To Do List (2023.09~2023.10)

개요

• 원티드 프리온보딩 인턴십 프론트엔드 11차 선발 과제를 개선한 To Do List 사이트

배포

https://wtd-fe-rb.netlify.app/

Demo ID & PWD

ID : [email protected]
PWD : testwtdfe

사용 스택

• TypeScript, React, React Router, Redux Toolkit, Tailwind CSS, Vite, Vitest

주요 기능

혼재한 로직 분리

도메인 로직 분리

• 프로젝트 초기에 대중없이 작성하여 View와 도메인 로직이 혼재했습니다.
• class 문법 학습 후 기능별로 나누어 객체를 구성했습니다.
  • fetch 함수는 공용으로 사용하는 options를 인터셉트하여 요청하는 HttpClient 클래스로 만들었습니다.
  • 로그인/회원가입 도메인은 AuthService에서, ToDo 도메인은 ToDoService는 클래스 내에서 요청 로직을 구현하고 관리했습니다.
• View 컴포넌트에 전달할 상태와 함수들은 각 도메인 담당 커스텀 훅을 만들어 로직을 구현했습니다.

View 컴포넌트 분리

• 공용으로 사용하면서 도메인과 관련없는 디자인 시스템 컴포넌트 위주로 먼저 분리했습니다.
  • 특히, 이벤트 속성을 자주 사용하는 마크업은 각각의 속성 인터페이스를 상속하여 커스텀 컴포넌트로 구현했습니다.
    • input - InputHTMLAttributes<HTMLInputElement>, button - ButtonHTMLAttributes<HTMLButtonElement>
  • Input 컴포넌트는 비제어 컴포넌트로 사용할 수 있도록 forwardRef로 감쌌습니다.

Redux Toolkit 적용

Context API와 useState에서 RTK로

• 이전에는 context에서 내려준 fetch 메서드를 호출하여 반환값을 커스텀 훅(useFetch)의 useState에 저장해 상태를 반환했습니다.
• 프로젝트 규모가 매우 작기에 상태 관리 라이브러리 선택은 합리적이지 않았지만 몇 가지 이유에서 Redux 적용을 선택했습니다.
  1. 상태 관리 라이브러리 학습의 필요성
  2. context provider 래핑을 신경 써야 하는 것과 로직을 두 번 거치는 불편함(context->useFetch) 제거
  3. 가장 대중적이며 역사 깊은 라이브러리

createAsyncThunk를 이용한 비동기 통신

• 데이터 패칭 시, 제가 만든 useFetch 커스텀 훅은 추가, 수정, 삭제 작업 후 setState로 일일이 반영했습니다.
• RTK를 적용하면서 createAsyncThunk를 사용해 CRUD 비동기 액션을 생성했습니다.
  • 상태 변화는 extraReducers 메서드에서 반영해 서비스 로직에서는 dispatch만 하도록 리팩토링했습니다.
  • addMatcher를 이용하여 extraReducers에서 반복적으로 사용되는 로딩 상태 코드를 하나의 묶음으로 줄여 가독성을 높였습니다.
• 서비스 훅에서 관리하던 상태를 도메인별 reducer로 관리함으로써 서비스 훅의 코드 가독성이 높아지고 상태 관리의 유지보수가 편해졌음을 느꼈습니다.

공식 문서만 보고 라이브러리 적용

• 스스로 익히고 적용하는 힘을 기르고자 강의, 서적, 검색에 최대한 의지하지 않고 공식 문서만 이용해 구현했습니다.
• [RTK] 공식 문서만 보고 Redux Toolkit 적용해 보기(1)
• [RTK] 공식 문서만 보고 Redux Toolkit 적용해 보기(2)

테스트 코드 작성

• 테스트 코드를 익힐 목적으로 모든 컴포넌트의 테스트 코드를 작성했습니다.
• 코드 변경이 일어난 경우 문제가 발생한 컴포넌트를 빠르게 보수하는 이점이 있음을 배웠습니다.
• 라이브러리는 Jest와 Testing Library를 이용했습니다.
  • Vite로 마이그레이션하면서 Vitest로 변경하였습니다.

wanted-pre-onboarding-frontend's Issues

최적화

• 입력 횟수에 따른 렌더링 최소화
  • sign up
  • sign in
  • todos

관심사 분리

• 디자인 시스템 별 분리
• 서비스 별 분리
  • sign in
  • sign up
  • to do list

사전 과제 develop하기

• 관심사 분리
• 테스트 코드 작성
• 최적화

테스트 코드 작성

• 컴포넌트 코드 별 테스트 코드
  • common
  • sign
  • todo
• 서비스 별 테스트 코드
• 전체 앱 테스트 코드

장기 미접속 시 페이지 401 이슈

• 1주일 후 토큰 만료에 따른 localStorage 토큰 제거
• JSON이 아닌 형태로 저장된 기존 토큰 제거