[mbti사이트]회고록

프로젝트 개요🎬

로그인한 사용자만 mbti 테스트를 보여주는 사이트다.

기술 스택🧷

• 프론트엔드 : react + redux + router + axios + tanstack query + tailwind + json server + sweetalert2

개발과정🎈

아이디어 구상

• mbti 테스트를 하고, 사용자끼리 결과를 공유하는 사이트를 구상하게 되었다.

구현

• 맨 처음 진입시 로그인 / 회원가입 화면 노출
  
  • 실시간 유효성 검사
  • 토큰은 2시간으로 설정하여 2시간뒤엔 자동 로그아웃됨
  • 로그인시에만 테스트화면이 넘어갈 수 있도록 router로 구현
• mbti 테스트 페이지
  
  • mbti 테스트후 데이터 저장
• mbti 테스트 결과 페이지
  
  • 유저마다 저장된 mbti 결과 데이터를 tanstack query로 뿌림
  • mbti 테스트한 해당 유저만 공개여부, 삭제 버튼 노출
• 마이 페이지
  • 닉네임 변경하여 redux로 유저정보를 관리

테스트 및 배포

• vercel에 배포
  링크

mbti test

• glitch 배포

배운점🤖

• 기술적 성장: redux의 클라이언트 상태관리 , tanstack query의 서버 상태관리 , json-server 서버와 통신  
• 문제 해결: api문서, 구글링을 통해 해결

후기✏️

드디어 tanstack query를 사용하여 서버 상태관리를 했다!

클라이언트 상태관리는 redux로 해서 로그인 제어와 프로필수정등 사용되었고,

json-server를 처음사용했는데, 서버와 통신하면서 데이터를 tanstack query로 받아서 뿌려줬다!

 

예전에 혼자 유튜브 api를 이용해서 tanstack query를 사용했었는데, 안쓰다보니 다 까먹었고...

옛날 문법등 사용한것같아서 다시 복습겸 사용하게 되었다!

 

이번엔 api 문서를 보면서 auth, testResult를 axios로 인스턴스 만들어서 사용자, 테스트결과를 관리하였다

이때가 좀 어려웠던 것 같다

 

트러블슈팅

상황🤔

sweetalert2 + useRef를 쓸경우

Swal.fire({
    icon: "success",
    title: "성공!",
    text: "성공적으로 닉네임이 변경되었습니다.",
}).then(() => {
	inputRef.current.focus();
});

 

에러👻

경고문 + focus가 안먹힘

해결과정👀

=> 0을 줘도 안됨

=> index.html에 aria-hidden="false"을 줘도 안됨

=> didClose기능을 써도 안됨

해결🌟

짧게 setTimeout을 주기

setTimeout(() => {
  inputRef.current.focus();
}, 500);

---

상황🤔

List컴포넌트에서 tanstack query의 데이터를 map으로 뿌리고,

Item컴포넌트에서 props로 받은 데이터를 구조분해하여 ui에 표기하면 오류가 났음

//List.jsx
{testResults.map((data) => (
	<TestResultItem key={data.id} data={data} />
))}

//Item.jsx
const { visibility, resultData, timestamp, userData } = data;
...
{
	<div>
      <div className="flex items-center">
        <strong>{userData.id}</strong>
        <span>{userData.nickname}</span>
      </div>
      <div>
        <strong>{resultData}</strong>
      </div>
      <div className="flex justify-end">
        <button
          type="button"
          onClick={() => toggleMutation.mutate(userData?.id)}
          className="button-style"
        >
          {visibility ? "비공개" : "공개"}
        </button>
        <button
          type="button"
          onClick={() => removeMutation.mutate(userData?.id)}
          className="button-style"
        >
          삭제
        </button>
      </div>
    </div>
  }

 

에러👻

해결과정👀

=> Item컴포넌트의 data를 단축평가로 가져와서 {data && (...)} 해도 안됨 (data가 빈배열이라도 넘어가기때문에 비추)

=> List컴포넌트의 map돌리기전에 옵셔널체이닝으로 {testResults?.map(...)}해도 안됨 (testResults가 빈배열이라도 있다고 간주하여 비추)

 

해결🌟

- List컴포넌트의 testResults.length가 0보다 클때에 map돌리기

- Item컴포넌트의 data를 단축평가에서 Object.keys(data).length > 0으로 바꾸기

//List.jsx
{testResults.length === 0 ? (
    <p>아직 테스트 결과가 없습니다.</p>
  ) : (
    testResults.map((data) => <TestResultItem key={data.id} data={data} />)
)}

//Item.jsx
{Object.keys(data).length > 0 && (
   ...
)}

 

📌코드보러가기

GitHub - minji7901/mbti