MBTI 테스트 📔
본인의 MBTI를 테스트해 볼 수 있는 사이트입니다.
배포 링크 : https://mbti-test-app-six.vercel.app/
깃허브 링크 : https://github.com/smu06030/mbti-test-app
파일 구조 🗂️
📦src
┣ 📂assets
┣ 📂api
┣ 📂components
┃ ┣ 📂Header
┃ ┣ 📂Layout
┃ ┣ 📂Result
┃ ┗ 📂Test
┣ 📂constants
┣ 📂mock
┣ 📂pages
┃ ┣ 📂private
┃ ┗ 📂public
┣ 📂queries
┣ 📂routes
┣ 📂store
┣ 📂utils
┣ 📜App.jsx
┗ 📜main.jsx
주요 기능💡
구현 사항
✅ 회원가입, 로그인, 프로필 관리 기능 구현
- JWT 인증 서버를 사용하여 회원가입, 로그인, 프로필 수정
✅ MBTI 테스트 제공
- 로그인한 유저만 진행할 수 있고 총 20개의 문항으로 구성된 테스트
✅ 테스트 결과 관리
- 테스트 결과의 공개 여부를 변경할 수 있고 삭제 기능
도전
✅ 로그인 유지 기능
- localstorage를 활용해 JWT 토큰 저장
✅ Zustand
- 유저 정보 저장
✅ Tanstack Query
- 비동기 데이터 관리 및 캐싱으로 테스트 결과 상태 관리
✅ axios
- 인스턴스로 코드 재사용성과 유지보수를 높임
사용 기술 🛠️
프론트 엔드
버전 관리
어려웠던 점 ❓
[트러블 슈팅] MBTI 테스트 (Glitch에서 JSON-server의 응답 속도 차이)
Glitch에서 JSON-server의 응답 속도 차이발생한 오류 🔥MBTI 테스트 앱을 개발하며 Glitch 플랫폼에서 JSON-server를 배포하여 사용했습니다. 하지만 로컬 환경에서의 실행 속도와 비교했을 때 상당한
mingos-habitat.tistory.com
깨달은 점 ❕
[개인 프로젝트] MBTI 테스트 - useQuery, useMutation 커스텀 훅 리팩토링
리팩토링 이유 📖Tanstack Query를 사용하면서 여러 컴포넌트에서 중복되는 로직이 발생해 유지보수가 어렵다는 생각이 들었습니다. 그래서 `useQuery`와`useMutation`을 커스텀 훅으로 리팩터링 하고 `qu
mingos-habitat.tistory.com
'공부 > 프로젝트' 카테고리의 다른 글
| [모아 프로젝트] 버전 관리와 사용자 피드백을 통한 꾸준한 개선 (0) | 2024.11.19 |
|---|---|
| [팀 프로젝트] issue daily (2) | 2024.10.17 |
| [팀 프로젝트] Go 캠핑! (1) | 2024.09.23 |
| [리팩토링] 커스텀 훅을 활용한 날씨 데이터 관리 구조 개선 (1) | 2024.09.15 |
| [개인 프로젝트] MBTI 테스트 - useQuery, useMutation 커스텀 훅 리팩토링 (0) | 2024.09.09 |
| [팀 프로젝트] 방콕 스타일 회고 (0) | 2024.09.04 |
| [팀 프로젝트] 방콕 스타일 (2) | 2024.09.04 |
| [팀 프로젝트] 방콕스타일 - 검색 기능 구현 (Debounce) (3) | 2024.09.02 |
