FACTS(사실, 객관) : 내가 한 일
MBTI 테스트 사이트 - ID를 가져오지 못함
문제발생
원인추론
모르겠음
어디선가 잘못 보내주고 있다.
해결방안
const handleSubmit = async (e) => {
e.preventDefault();
if (mode === "login") {
// 로그인 할 경우
const response = await AuthURL.post("/login", {
id: formData.id,
password: formData.password,
});
console.log("response.data", response.data);
localStorage.setItem(
ACCESS_TOKEN_LOCALSTORAGE_KEY,
response.data.accessToken
);
setUser({
id: response.data.id,
nickname: response.data.nickname,
accessToken: response.data.accessToken,
});
setIsLogin(true);
setUser에서 id를 그냥 id로 받아오고 있었다. 서버에서는 userId로 보내주고 있으므로 id를 userUd로 수정하니 정상적으로 받아올 수 있었다..
MBTI 테스트 사이트 - 결과불러오기
문제발생
결과를 불러오지 못한다
원인추론
db구조.
내 db구조는 users안에 유저 정보가 들어있고 그 유저 정보 안에 해당유저가 테스트를 한 결과를 또 배열로 넣어주는 이중?구조로,
다른 로그인 정보로 테스트를 하면 그 유저 정보안에 테스트 정보가 쌓이도록 만들었는데
해결방안
db구조를 바꾸고 어제 작성했던 닉네임으로 사용자를 조회하고~찾아서 있으면 넣어주고 없으면 생성해서 넣는 그런 로직 모두 삭제..🥹
"testResults": [
{
"id": "6f2e",
"nickname": "a",
"result": "ESTJ",
"answers": [
"예",
"아니오",
"예",
"예",
"예",
"예",
"예",
"예",
"예",
"예",
"예",
"예",
"예",
"예",
"예",
"예",
"예",
"예",
"예",
"예"
],
"date": "2024-09-11T01:39:08.585Z",
"visibility": true
}
]
MBTI 테스트 사이트 - 본인의 테스트 공개/비공개전환
문제발생
이런 에러가 뜨면서 공개/비공개 전환에 실패하고
삭제도 되지 않는다
원인추론
1. onUpdate가 뭘까 TestResultItem에서는 props로 result, user, onUpdate, onDelete를 가져오고 있다.
2. 이것을 보내주는 곳을 찾아본다.
TestResultItem과 TestResultList 두곳인데, 서로 props로 가져오기만 하고 onUpdate나 onDelete가 정의되고 있는 곳은 없다 !!
// 공개 할지 말지
const handleToggleVisibility = async () => {
try {
const newVisibility = !result.visibility; // 현재 공개여부의 반대값 을 선언해 서버에 업데이트 요청
await updateTestResultVisibility(result.id, newVisibility);
onUpdate();
} catch (error) {
console.error("테스트 결과의 공개/비공개 전환에 실패했습니다 : ", error);
alert(
"테스트 결과의 공개/비공개 전환에 실패했습니다. 다시 시도해 주세요."
);
}
};
console.log(result);
// 테스트 결과삭제
const handleDelete = async () => {
try {
await deleteTestResult(result.id);
onDelete();
} catch (error) {
console.error("Delete failed : ", error);
alert("Delete failed. Please try again");
}
};
해결방안
바뀐상태를 업데이트 해주는 과정이 필요함.
Tanstackquery를 사용하고 있으므로 invalidateQueries를 사용해 이전의 상태(내용)를 썩은 상태로 만들고 새로운 상태로 다시 패치해줘야 하는것. 이렇게 되면 onUpdate, onDelete는 필요가 없다! 이 부분을 모두 지우고
const queryClient = useQueryClient();
useQueryClient를 사용해
// 공개 할지 말지
const handleToggleVisibility = async () => {
try {
const newVisibility = !result.visibility; // 현재 공개여부의 반대값 을 선언해 서버에 업데이트 요청
await updateTestResultVisibility(result.id, newVisibility);
queryClient.invalidateQueries(["testResults", user.nickname]); // 이전의 내용(상태)을 썩은상태로 만들고 리패치해줌
} catch (error) {
console.error("테스트 결과의 공개/비공개 전환에 실패했습니다 : ", error);
alert(
"테스트 결과의 공개/비공개 전환에 실패했습니다. 다시 시도해 주세요."
);
}
};
console.log(result);
// 테스트 결과 삭제
const handleDelete = async () => {
try {
await deleteTestResult(result.userId, result.id);
queryClient.invalidateQueries(["testResults", user.nickname]); // 이전의 내용(상태)을 썩은상태로 만들고 리패치해줌
} catch (error) {
console.error("Delete failed : ", error);
alert("Delete failed. Please try again");
}
};
이렇게 수정하니 삭제도, 공개/비공개 전환도 정상적으로 된다!
FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌
FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것
Tanstackquery 사용법
조금..?
능숙하게 하려면 더 많이 써봐야 할 것 같다
vs코드에서는 파일이름을 바꿀때 단순히 대문자 => 소문자로 바꾸면 인식을 못한다
(예를 들면 todo.jsx => Todo.jsx 의 경우..)
그래서 이렇게 바꾸고나면 바뀐 파일명으로 제대로 import해도 에러가 뜨는데 이경우, vs코드 상단의
이부분을 클릭해서
> Developer: Reload Window
( 개발자 : 창 다시 로드 )
를 작성하고 엔터 누르면 더이상 오류도 뜨지 않고 수정한 파일명이 정상적으로 불러와진다
FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지