PR: path3 task1,task2,task3,task4

[ijimlnosk]

task1

• RHF, yup을 이용하여 유효성 검사
• 가입하기 버튼 클릭 시 이전모든 단계에서 했던 데이터 alert에 보여짐
• 뒤로가기 버튼 및 웹 뒤로가기 클릭 시 이전 폼데이터 유지
• 유효성 검사 시 실시간으로 에러메시지 보여짐
• 유요성 검사에 어긋나면 버튼 비활성화

task2

• 보일러 템플릿 만들기
• 폴더구조

📦boiler-template
 ┣ 📂public
 ┃ ┣ 📜favicon.ico
 ┃ ┣ 📜index.html
 ┃ ┣ 📜logo192.png
 ┃ ┣ 📜logo512.png
 ┃ ┣ 📜manifest.json
 ┃ ┗ 📜robots.txt
 ┣ 📂src
 ┃ ┣ 📂assets
 ┃ ┃ ┣ 📂fonts
 ┃ ┃ ┗ 📂images
 ┃ ┣ 📂components
 ┃ ┃ ┗ 📂common
 ┃ ┃ ┃ ┣ 📜box.jsx
 ┃ ┃ ┃ ┗ 📜spacer.jsx
 ┃ ┣ 📂constants
 ┃ ┃ ┗ 📂design-token
 ┃ ┃ ┃ ┣ 📜color.js
 ┃ ┃ ┃ ┣ 📜layout.js
 ┃ ┃ ┃ ┣ 📜size.js
 ┃ ┃ ┃ ┣ 📜spacing.js
 ┃ ┃ ┃ ┗ 📜tokens.js
 ┃ ┣ 📂features
 ┃ ┣ 📂hooks
 ┃ ┣ 📂libs
 ┃ ┃ ┣ 📂axios
 ┃ ┃ ┃ ┗ 📜axiosInstance.js
 ┃ ┃ ┗ 📂redux
 ┃ ┃ ┃ ┗ 📜store.js
 ┃ ┣ 📂page
 ┃ ┣ 📂styles
 ┃ ┃ ┗ 📜global-style.js
 ┃ ┣ 📂utils
 ┃ ┃ ┗ 📜getDateDifferenceDescription.js
 ┃ ┣ 📜App.css
 ┃ ┣ 📜App.js
 ┃ ┣ 📜App.test.js
 ┃ ┣ 📜index.css
 ┃ ┣ 📜index.js
 ┃ ┣ 📜logo.svg
 ┃ ┣ 📜reportWebVitals.js
 ┃ ┗ 📜setupTests.js
 ┣ 📜.eslintrc.json
 ┣ 📜.gitignore
 ┣ 📜.prettierrc.js
 ┣ 📜README.md
 ┣ 📜package-lock.json
 ┗ 📜package.json

task3

• todo 추가 버튼 전역상태로 관리
• input custom hook으로 생성

task4

• pagination 컴포넌트 하나로 합침
• user 확인 따로 분리
• limit_page, limit_task 전역상태로 관리
• axios-instance 생성
• api 관리 파일 생성

[Zero-1016]

3주차도 고생하셨습니다.👍

남은 기간도 파이팅하시길 응원합니다.

[Zero-1016]

👍

[Zero-1016]

span태그는 단순 텍스트나 텍스트에 관련된 마크업 등 구문 콘텐츠에 스타일이나 속성의 범위를 적용하기 위해 감싸주는 태그입니다. 이는 주로 시각적 스타일을 위한 장식용 태그로 사용됩니다.

SpaceBox라는 이름에 맞는 태그는 레이아웃을 만들거나 콘텐츠를 나누는(division) 컨테이너로 사용하는 div 태그가 어울리지 않을까? 라고 생각이 드네요

[Zero-1016]

앞서 Chan님의 리뷰에서도 언급하였던 부분입니다...!

무슨 의도로 분리한 컴포넌트일까요?

[Zero-1016]

intercepter 안에 해당 로직까지 있으면 읽기에 불편하지 않을까? 라는 생각이 있습니다.

저 같은 경우 이전에 다음과 같이 분리하여 사용을 해보았습니다.

const checkAndSetToken  = () => {
 // 토큰을 검사하고 세팅해주는 함수
}

const handleTokenError = () => {
 // 에러를 검사해주고 각 에러에 맞게 처리해주는 함수
}

axiosInstance.interceptors.request.use(checkAndSetToken, handleAPIError);

axiosInstance.interceptors.response.use(
  (response) => response,
  handleTokenError
);

axiosInstance.interceptors.response.use((response) => response, handleAPIError);

[Zero-1016]

페이지네이션을 좀 더 가볍게 만들 수 있지 않을까? 라는 생각이 듭니다..!

상위 컴포넌트에서도 api를 호출할 경우 페이지네이션에 대한 정보를 불러오기 때문에 해당 api들이 두번 이상 호출되는게 좋은가? 라는 생각이 드네요

[Zero-1016]

<header/>, <footer/>와 같은 시맨틱 태그를 사용해보시는 것은 어떨까요?

[Zero-1016]

날짜 필드를 검증할 때, 2024-02-30과 같이 실제로 존재하지 않는 날짜를 걸러내는 것이 중요합니다.

🧐이미 구현하신 코드는 기본적인 형식을 검증하지만, 윤년이나 각 달의 일수를 고려하지 않아 실제로 유효하지 않은 날짜도 통과시킬 수 있을 것으로 보여집니다..!