MBTI 테스트 사이트) KPT 회고✍️

1. Project - MBTI 테스트 사이트📇

01. 완성 사이트 엿보기

MBTI 사이트 바로가기

• Home
  

• Test
  

• MyPage
  

• Results
  

• MyResult
  
  ⬆️ 본인 계정이면 공유하기 버튼 표시

  
  ⬆️ 로그아웃/타 계정이면 테스트 버튼 표시

• SignUp
  

• Login
  

• 반응형

제목	이미지
Home	Test
Results	MyPage

2. Project KPT Review🗒️

01. 개인 회고

• KEEP : 만족하는 부분

- 클라이언트 상태관리와 서버상태 관리에 대한 개념을 배웠다.
- zustand, tanstack query 등 새로운 라이브러리를 많이 접할 수 있었다.
- README를 열심히 작성하였다.

• PROBLEM : 문제가 발생한 부분

[기능부분]
- 라이브러리에 대한 이해도가 많이 부족하였다.

[기타]
- 강의 내용 등에서 참고한 코드를 그대로 따라치려고 했다.
- 과제가 너무 하기 싫었다...

• TRY : 개선방안

[기능부분]
- 라이브러리 공식문서를 많이 보자!

[기타]
- 라이브러리를 체득할 때까지 연습하자!
- "뭐 어쩌겠어. 그래도 해야지" 마인드 함양!

02. 튜터님의 피드백

• 대부분의 라이브러리는 공식 문서를 제공하며, 가장 신뢰할 수 있는 정보이다.
• 라이브러리 공식 문서의 Quick Start 가이드나 API Reference 섹션을 자주 참고하면서 기능을 확인하며 시작해보자.
• 작은 단위의 예제부터 따라하면서, 하나씩 응용해가며 이해도를 높이자.
• 라이브러리가 어떤 문제를 해결하기 위해 만들어졌는지 파악하며, 라이브러리의 필요성을 직접 체감해보자.
• TanStack Query를 사용하면 클라이언트 상태/서버 상태를 명확하게 구분할 수 있다. 기존 useEffect에서 데이터를 가져오고 useState로 관리하던 부분을 TanStackQuery의 useQuery로 리팩토링해보자.
• 데이터 조회 로직(queries)와 데이터 변경 로직(mutations)를 분리하여 폴더를 구성하면 좋다.
• 개발용 서버와 배포용 서버의 API URL이 다른 점을 Vite의 내장 상수인 import.meta.env.PROD를 활용해보자. import.meta.env.PROD는 프로덕션 모드(배포한 사이트)에서 true를 반환하므로, 삼항 연산자를 사용하여 API URL을 동적으로 관리할 수 있다.
• 프로필 페이지에서 닉네임을 변경할 때, 기존 닉네임을 미리 채워 넣으면 UX를 개선할 수 있다. 또한, 닉네임 변경사항이 없을 경우 클라이언트에서 검증을 해줘도 좋다.