[MBTI-Test PJ_Final] MBTI Test

💟 MBTI Test 메인 화면 및 작동 영상

 

 

• Github 링크 : https://github.com/JinchaeKim/MBTI-Test_PJ.git
• 배포 링크 : https://mbti-test-pj.vercel.app/

---

🖥️ 프로젝트 소개

• MBTI 성격 유형 테스트를 진행하고 다른 사람들의 결과를 볼 수 있는 페이지입니다.
• 회원가입/로그인, 프로필 관리, 테스트 결과 저장 기능을 활용하여 페이지를 구현하였습니다.
• JWT인증과 REST API 통신으로 회원정보를 관리합니다.
• Axios를 활용하여 비동기 데이터를 관리합니다.
• json-server를 사용해 로컬 환경에서 API를 구축합니다.

 

🕰️ 개발 기간

2025 / 02 / 20 ~ 2025 / 02 / 25

 

 

⚙️ 개발 환경

react, vite, context API, react router, tailwind css, JWT

 

 

📌 주요 기능

✔️ Home : 사용자가 웹사이트의 기본 정보를 얻고, 로그인 페이지로 이동할 수 있도록 안내합니다.

✔️ Login : 사용자가 자신의 계정으로 로그인할 수 있도록 합니다.

✔️ Signup : 새로운 사용자가 계정을 생성할 수 있도록 합니다.

✔️ Profile : 사용자가 자신의 프로필 정보를 확인하고 수정할 수 있도록 합니다.

✔️ Test : MBTI 테스트를 진행합니다. 모든 항목에 답해야 결과를 확인할 수 있습니다.

✔️ TestResult : 사용자의 테스트 결과를 보여줍니다.

✔️ TestResultList : 다른 사용자의 테스트 결과를 확인할 수 있습니다.
       사용자는 자신의 결과를 공개 / 비공개 / 삭제 처리할 수 있으며 다른 사용자의 화면에도 적용됩니다.

 

 

🚨 트러블슈팅

• Tailwind 공통 컴포넌트 스타일링
• JWT 인증 API 연결
• Visibility, isOwner

 

✨마무리

협업 과제가 끝난 다음날,

하루 안에 22개의 강의를 들어야 하며 바로 그 다음날엔 개인 과제 발제라는 것을 들은 지난주는 충격에 빠졌었다.

과제 제공 당일 새벽까지 어찌저찌 다 듣고 MBTI 과제 시작했다.

이번 과제의 중점 내용은 인증/인가와 JSON 서버를 다뤄보는 것이기 때문에 강의 중 필요한 내용만 다시 들어보고, 제공된 로직을 따라치면서 진행했다. 복잡하고 어려운 이론만 반복하기 보다는 직접 사용해보니 이해가 빨리되는 부분은 확실했다.

 

물론 모든 내용을 다 이해해서 진행하는 분은 없겠지만.. 인증/인가 외에도 자주 쓰일 듯한 tanstack query와 zustand의 내용을 전혀 모른채로 구현하였다. 이전에도 이런 방식으로 과제를 구현했고, 과제가 끝나면 또 새로운 강의가 제공됐기 때문에 지나친 부분들이 있었다.

 

과제를 해나갈 수록 확실히 내것이 되지 않은 내용들은 점점 수면 위로 떠올랐다.

로직이 복잡해질 수록 쓰임과 흐름을 정확히 파악하지 못한 점이 드러났고 이번 과제에서는 state와 useEffect가 그 부분이었다.

 

그래서 구현을 잠시 멈추고 리액트 공식 문서를 다시 살펴보았다.

state를 정말 많이 사용했지만 흐름상~ 사용했고 공식적으로 정리해둔 글들을 보니 생각 정리가 다시 되었다.

리액트 공식 문서는 친절하게 잘 설명되어 있기 때문에 종종 살펴봐야겠다..!

 

오늘 과제 제출과 내일 협업 프로젝트 사이의 시간에는 심화 주차 강의를 다시 들어보겠다는 다짐을 한다.