🔥 필수 구현 사항
- 지출 관리 시스템에 회원가입 / 로그인 기능 구현
- 반드시, 강의에서 제공하는 jwt 인증서버를 사용하도록 합니다.
- 인증이 되지 않는다면 서비스를 이용 할 수 없도록 해주세요.
- json-server 를 이용해 지출 데이터에 대한 CRUD 를 구현해 주세요.
- 지출 데이터에 누가 해당 지출을 생성 했는지가 포함시켜 봅시다.
- API 호출 시, fetch 대신 axios 를 필수적으로 사용하도록 합니다.
- 페이지에서 (jsx) 파일에서 API 응답 값을 바로 사용하지 말고, 꼭 Tanstack Query (ReactQuery)를 거쳐서 이용하도록 합니다.
- 상태 관리를 위해 Props-drilling, Context API, Redux 사용대신 Tanstack Query 를 사용해야 합니다.
💪 선택 구현 사항
- Styled-components 로 스타일링 한 부분을 Tailwindcss 를 사용하여 리팩토링을 해 봅시다.
- 리액트의 큰 장점 중 하나는 정말 다양한 UI 라이브러리가 존재하고 그것들을 쉽게 내 어플리케이션에서 사용 할 수 있다는 점입니다. Modal, Toast 등 어플리케이션을 화려하게 만들어 줄 수 있는 라이브러리들을 탐험해보고 적용시켜 봅시다.
- 기능이 많아지는 만큼 컴포넌트들에서 점점 더 많은 상태관리를 하게 될 텐데요. Custom Hook 을 구현하여 대신 처리하도록 시도해 봅시다.
- 지출 CRUD API 호출 시 accessToken 이 유효할 경우에만 요청할 수 있고, 만료된 경우 로그아웃 처리되도록 합니다.
- 로그인 된 유저의 정보를 전역적으로 관리하는 로직을 zustand 를 이용해 작성해봅시다.
기간
6/10~6/14일 2시까지!
.