프로젝트: React(TypeScript) 기반의 동적 UI 개발(5)-비밀번호 초기화, zustand, 쿼리스트링

비밀번호 초기화

auth.api.ts

resetRequest로 이메일이 있는지 판별하고,

resetPassword로 변경한 비밀번호로 초기화 해주는 코드를 구현

💢지금 방법은 모킹버전이기 때문에, 실무에서는 토큰을 같이 보내거나하는 일이 있지만 실습이기때문에 간소화하게 했다.

ResetPassword.tsx

Signup.tsx와 구조가 비슷해서 복붙해서 수정해서 사용했다.

status 200으로 원래 1111이던 password가 1234로 변경이 된 것을 볼 수 있다.

로그인과 전역 상태관리

zustand

yarn add zustand

도서 목록 페이지

도서 목록 화면 요구 사항

1. 도서(book)의 목록을 fetch하여 화면에 렌더
2. 페이지네이션을 구현
3. 검색 결과가 없을 때, 결과 없음 화면 노출
4. 카테고리 및 신간 필터 기능을 제공
5. 목록의 view는 그리드 형태, 목록 형태로 변경 가능

쿼리스트링 이점

• 상태공유
• 재사용성 보장
• 검색엔진 최적화 유리 (해당주소가 늘 유니크한 값을 가지고 있기 때문)
• 특정 마케팅 측면에서 데이터 추적과 분석에 유리

쿼리스트링 상수 작업

🔸하나의 파일로 상수를 만들어 관리하면 나중에 키가 바뀌거나 업데이트 됐을때

일일이 변경하지 않고 상수만 업데이트하여 사용할 수 있기때문 유지보수, 확장성 높이는데 좋다.

 

useCategory.ts

💢지금의 파일에서 isActive 타입을 boolean으로 주고 true 일때 선택된 버튼을 active하게 설정하는 코드에서 강의와 같은 코드라도 실행이 되지 않아서 좀 찾아보니 기존 Button.tsx 컴포넌트에서 props에 대해 interface를 설정한 것이 있었는데, 여기에서 extends React.ButtonHTMLAttributes<HTMLButtonElement> 이 부분을 확장시켰으나, function의 props에서 스프레드로 받아오지 않으니 실행이 되지 않을 것이었다. 그래서 아래와 같이 props와 input에서 ✨...rest✨ 를 추가해주니 코드가 실행되었다.

Button.tsx