Description

• 패키지 버전 업데이트

Progress

2022.11.17

• axios: 0.27.2 → 1.1.3
• react-router-dom: 6.3.0 → 6.4.3
• react-query: 3.39.1 → @tanstack/react-query: 4.16.1

2023.5.5

• @tanstack/react-query : ^4.16.1 → ^4.29.5
• @tanstack/react-query-devtools : ^4.16.1 → ^4.29.6
• react-router-dom: ^6.4.3 → ^6.11.1

1.

• #9 (comment)
• 
• setButton 함수명 구체적으로 변경

2.

• #9 (comment)
• 
• Input 컴포넌트 타입 변경

3.

• #9 (comment)
• FC 사용 관련 이슈 확인

4.

• #9 (comment)
• Strict mode 학습 & 적용

• /auth 경로에 로그인, 회원가입 기능 개발 (로그인, 회원가입을 별도의 경로로 분리해도 무방)
  • #4
• #5
  • 이메일 조건 : @, . 포함
  • 비밀번호 조건 : 8자 이상 입력
  • 이메일과 비밀번호가 모두 입력되어 있고 조건을 만족해야 제출 버튼이 활성화됨
• #6
  • 로그인 API를 호출하고, 올바른 응답을 받았을 때 루트 경로로 이동시킴
  • 응답으로 받은 토큰은 로컬 스토리지에 저장
  • 다음 번에 로그인 시 토큰이 존재한다면 루트 경로로 리다이렉트
  • 어떤 경우든 토큰이 유효하지 않다면 사용자에게 알리고 로그인 페이지로 리다이렉트

추가 - 로그아웃 기능 구현

Description

• React Router의 action
• Form 컴포넌트 수정

Description

• react-router-dom 업데이트 된 방식으로 라우팅 방식 수정
• 로그인 시 loader 적용하고 useEffect 삭제

Description

• 기존 formData의 타입이 명시되지 않아 발생하던 에러 해결
• Property 'email' does not exist on type 'EventTarget'.ts(2339)

Description

• 기존 Home 컴포넌트에서 todo data 요청 로직이 있고, 이것을 prop drilling으로 데이터를 내려주는 방식이었다.
• 이 데이터는 List 컴포넌트에서 사용되므로, List 컴포넌트에서 요청하는 것으로 변경하였다.

Description

• 다크 & 라이트모드 구현

Description

• 헤더에 있는 Form Button의 위치 조정
  • react-router-dom의 Form 컴포넌트를 쓰면서, 버튼의 위치가 약간 안 맞는 것을 발견함.

Progress

• Form 컴포넌트에 line-height: 0을 주어 해결

C: Todo 추가 버튼을 클릭하면 할 일이 추가됨
R: 한 화면 내에서 Todo List와 개별 Todo의 상세를 확인 가능하도록 구현
U: Todo 수정 버튼을 클릭하면 수정 모드를 활성화하고, 수정 내용을 제출하거나 취소할 수 있음
D: Todo 삭제 버튼을 클릭하면 해당 Todo를 삭제할 수 있음

Description

• TypeScript alias path 설정 후 import 시, ESLint에서 해당 경로를 인식하지 못하여 에러 발생

Progress

• eslint-import-resolver-typescript 설치

  $ npm i -D eslint-import-resolver-typescript
  

• eslintrc 수정

  {
    "settings": {
      "import/resolver": {
        "typescript": {}
      }
    }
  }
  

Description

• React Roter의 <Form> 속성인 action="destroy"를 적용하여 아이템 삭제 방식 변경

기존 방식

<Button size="xSmall" background="black" text="Delete" onClick={handleDeleteClick} />

Progress

• 기존 Button으로 되어 있는 것을 Form 컴포넌트로 변경
• Form 컴포넌트에 action="destory" 적용
• onSubmit handler에 컨펌이 아닐 시 event.preventDefault() 적용
• action 함수에서 deleteTodo API 호출, invalidateQueries 호출, redirect 등 로직 추가
• router에 destroy 경로 path 추가 및 action 설정

Ref

• https://reactrouter.com/en/main/components/form#action

Description

• webpack-bundle-analyzer 패키지를 활용하여 번들 사이즈 체크

Progress

• 해당 패키지 devdependency로 설치
• 패키지 별 번들 사이즈 확인

Description

• 각 상황에 맞게 Pop-up, Snackbar, Toast 적용하기

Toast

다양한 라이브러리 중, npm 다운로드 수가 가장 많은 react-toastify로 결정

• dark theme, light theme 적용
• prevent duplicate 적용 (로그인 실패 시 메시지가 중복하여 쌓이는 것 방지)

React-toastify documentation 사이트 참고하여 사용

• Login 성공 시
• Logout 성공 시
• todo 삭제 완료 시
• 로그인 하지 않은 상태로 Home 페이지에 접근하려고 할 시
• 로그인 이메일, 비밀번호가 일치하지 않을 시

Description

• axios를 사용한 API 함수들 리팩토링

Progress

• timeout 적용
• AxiosRequestConfig 타입 적용

1. #20 (comment)

• localStorage의 property key에 공백을 넣어 user token이라고 정했는데, localStorage 역시 object인 만큼 camelCase naming convention을 따라 userToken으로 명명하는 것이 낫다고 생각하게 되었다.

2. #20 (comment)

3. #20 (comment)

• 삭제 버튼 클릭 시 바로 삭제되도록 하지 않고, confirm 창을 띄워서 확인될 때에만 삭제되도록 변경하였다.

Description

• global pending UI를 적용하기 위해 React Router의useNavigation이 반환하는 state를 활용

Progress

• useNavigation 활용
• state === loading일 때 스타일 적용

Description

• React
• TypeScript
• Webpack
• ESLint
• Prettier

Description

• 기존의 Error Handling Page를 업그레이드하여 좀 더 세심한 에러 처리가 가능하도록 변경
  • 기존 방식 : React Router의 useRouteError hook을 활용
  • ErrorPage를 Route 컴포넌트의 errorElement에 놓게 되면, 이 hook이 action, loader, rendering 중에 발생하는 모든 에러를 던져 줌
  • isRouteErrorResponse : route error가 route error response일 경우 true를 반환함

Progress

• isRouteErrorResponse를 활용하여 route와 관련된 에러일 때와, 그 외 에러일 때를 구분

Description

• 오늘의 날짜, todo 생성일과 업데이트일을 보여주기 위하여 사용하는 라이브러리
• 대표적인 라이브러리인 moment.js와 day.js를 비교한 후, 현재 프로젝트에 더 맞는 것을 선택

번들 사이즈 비교

• Bundlephobia라는 사이트에서 package를 검색했을 때 번들링 된 사이즈를 알려줌

[email protected]

• minified 290.4kB

[email protected]

• minified 6.5kB

[email protected]

• minified 89.4kB

My choice

• 투두 리스트의 생성 및 수정 시간만 보여주면 되는 아주 간단한 기능만 필요하기 때문에 번들된 사이즈가 가장 작은 dayjs를 선택
• day.js 소개 페이지를 보면, I18n(Internationalization, 국제화)를 지원하고 있다. 하지만 이것을 코드에 포함하지 않는다면 빌드할 때 포함되지 않아 더욱 좋다.
• List of breakdown range
  

Reference

• Why you should choose Day.js instead of Moment.js?
• Dream Coding - 자바스크립트 포맷 꿀팁

Description

• new todo 버튼을 누르면 기존 New todo 페이지로 이동하여 새로운 투두를 만드는 방식이 아닌 다른 방식으로 변경
• new todo 버튼을 누르면 디폴트 제목인 'New todo'로 새로운 투두가 생성되며, 유저는 추후 edit 버튼으로 내용을 채울 수 있다.

Description

• React Router의 NavLink에서 className 부여 시 isPending을 활용하여 UX 향상

Progress

• List 컴포넌트의 NavLink 컴포넌트에 isPending 추가
• pending일 시 스타일링

Description

• 유저의 사용성 고려하여 UI와 Routing 변경

Before

UI

• Header에 Logout 버튼이 있고, New Todo 버튼이 Todo container의 우측 상단에 있음
• 조금 더 사용성이 좋도록 위치 변경

Routing

• edit Form으로 갔을 때도 라우팅이 될 수 있도록 변경

Description

• destroy action 수행 시 에러가 발생했을 때, 좀 더 적합한 에러 처리 도입

Progress

• destroy 경로에 errorElement 추가

• #8
  • C: Todo 추가 버튼을 클릭하면 할 일이 추가됨
  • R: 한 화면 내에서 Todo List와 개별 Todo의 상세를 확인 가능하도록 구현
  • U: Todo 수정 버튼을 클릭하면 수정 모드를 활성화하고, 수정 내용을 제출하거나 취소할 수 있음
  • D: Todo 삭제 버튼을 클릭하면 해당 Todo를 삭제할 수 있음
• #16
  • 개별 Todo를 조회 순서에 따라 페이지 뒤로가기를 통하여 조회 가능
• 한 페이지 내에서 새로고침 없이 데이터가 정합성을 갖추도록 구현
  • 수정되는 Todo의 내용이 목록에서도 실시간으로 반영됨
• 새로고침을 했을 때 현재 상태 유지

Description

• 개별 투두 목록마다 라우팅을 적용하여 뒤로가기를 클릭했을 때 조회 가능하도록 하기
• 개별 투두 목록 클릭 시 현재 선택된 투두가 하이라이팅 되도록 구현