오늘 드디어 두 번째 개인 프로젝트가 끝났다!!!
프로젝트 기간이 3일로 매우 짧아서 너무너무 힘들었고 아쉬움도 많이 남았지만... 그래두 나름대로 잘 마무리한 것 같아서 뿌듯하다 😅
가장 아쉬웠던 점은 코드 정리가 부족했다는 것이다... 시간에 쫓겨가며 개발을 하다보니(핑계인듯) 컴포넌트를 충분히 분리하지 못했고, 커스텀 훅으로 뺄 수 있는 부분들도 빼지 못했다.
그리고 클라이언트 상태 관리를 익숙한 redux로 했지만, 새로 배운 zustand로 리팩토링해보고 싶었던 계획을 이행하지 못한 것도 아쉬움으로 남는다 ㅠ
그럼에도 이번 프로젝트를 통해 tailwindCSS, JWT 토큰 인증, axios를 이용한 api 호출, axios instance, Tanstack Query 등 처음 배우고 헷갈렸던 개념들을 프로젝트를 진행하며 직접 적용해보고 익힐 수 있어 매우 의미있었다.
다음 프로젝트 때는 꼭 zustand도 사용해보고 코드도 더욱 깔끔하게 정리하며 작성할 것이다!!!!!(제발...)
배포 링크: https://mbti-project-eight.vercel.app/
🕹️ 프로젝트 기능
1️⃣ Redux Toolkit, JWT 인증 API, LocalStorage를 활용한 로그인 상태 관리
configStore.js,authSlice.js에서 Redux Toolkit을 사용하여 로그인, 로그아웃, 유저 상태 관리auth.js에서 JWT 인증 서버와 통신하여 회원가입, 로그인, 프로펄 정보 획득 및 수정- LocalStorage에 JWT 토큰을 저장하여, 새로고침 후에도 로그인이 유지될 수 있도록 구현
2️⃣ json-server, Tanstack Query를 활용한 테스트 결과 상태 관리
testReuslt.js에서 json-server와 통신하여 테스트 결과 획득, 생성, 삭제, 공개/비공개 여부 변경TestResults.jsx,TestResultItem.jsx에서 Tanstack Query를 사용하여 테스트 결과 상태 관리
3️⃣ RRD(React Rounter DOM)을 활용한 페이지 라우팅
- 페이지 라우팅 구현
- 로그인 된 유저가 접근할 수 있는 페이지와 아닌 페이지 구분(
PriviteRoute/ProtectedRoute)
4️⃣ 로그인, 회원가입 실시간 유효성 검사
userForm에서validation.js를 활용해 폼 제출 전 input change마다 유효성 검사를 진행
5️⃣ accessToken 만료 시 로그아웃 처리
- 토큰이 만료된 상태에서 JWT 인증 서버와 통신 시도 시(프로필 변경, 테스트 결과 제출, 조회 등) 로그아웃 처리
6️⃣ MBTI 테스트
Text.jsx에서mbtiCalculator.js를 활용해TestForm.jsx의 결과에 따른 유저의 MBTI 유형 도출
⚙️ Development Environment
"@reduxjs/toolkit": "^2.3.0", "@tanstack/react-query": "^5.61.3", "axios": "^1.7.7", "react-router-dom": "^7.0.1", "react-toastify": "^10.0.6", "tailwindcss": "^3.4.15", "json-server": "^1.0.0-beta.3", "vite": "^5.4.10"
🖥️ Technologies & Tools (FE) 🖥️
