컨텍스트 api에 유저 정보 담는 거 다시 하기 => 리덕스에 했다
해더에 이미지랑 정보 불러와야 함
유저 정보 구축되면,
crud 구현 강의 보면서 만들고 제출
24시까지 도전해보고 안 되면 해설 영상 보기~!

배포 도전!

개인 과제

트러블 슈팅

useEffect

닉네임이 이상하다~!^-^!!!!

useEffect(() => {
    const getUserInfo = async () => {
      const token = localStorage.getItem("accessToken");
      if (token) {
        try {
          const { data } = await axios.get(
            "https://moneyfulpublicpolicy.co.kr/user",
            {
              headers: {
                Authorization: `Bearer ${token}`,
              },
            }
          );
          console.log(data);
          dispatch(changeProfile(data));
        } catch (error) {
          console.log(error);
        }
      }
    };

    getUserInfo();
  }, []);

user 정보에 임시 데이터를 넣어놨는데 그게 나오는 모습~! 마운트 될 때 한 번만 불러와서 그런 듯 하다.

그냥 임시 데이터 냅다 지우면 된다. 간단 해결~!^-^ 혹은 의존성 배열이 빈 배열인데, dispatch 담아도 되지 않을까 싶다~!

삼항 연산자

        {user.avater ? (
          <img className="profile-img" src={user.avatar} />
        ) : (
          <img className="profile-img" src={MetamongDefaultImg} />
        )}

기본 값에 기분 좋으라고 메타몽 이미지를 넣어놔서일까 변경 후 헤더는 잘 변경되는데, 마이페이지에 띄워놓은 건 안 됐다. 별 문제는 아니라서 혹시~ 하고 값 변경 (설정하지 않았을 때 기본값이 null임을 확인)

        {user.avater !== null ? (
          <img className="profile-img" src={user.avatar} />
        ) : (
          <img className="profile-img" src={MetamongDefaultImg} />
        )}

되네...

동기적 움직임

  const mutation = useMutation({
    mutationFn: postExpenses,
    onSuccess: () => {
      Swal.fire({
        icon: "success",
        title: "지출이 작성 완료되었습니다.",
        text: "직접 확인해보세요!",
      })
      queryClient.invalidateQueries(["expensesData"]);
        navigate(0);
      });
    },
  });

이렇게 했더니 알럿 뜨기도 전에 새로고침 당했다...!

  const mutation = useMutation({
    mutationFn: postExpenses,
    onSuccess: () => {
      Swal.fire({
        icon: "success",
        title: "지출이 작성 완료되었습니다.",
        text: "직접 확인해보세요!",
      }).then(() => {
        queryClient.invalidateQueries(["expensesData"]);
        navigate(0);
      });
    },
  });

then 매서드로 확인 누르면 새로고침 되게 완료

유효성 검사

해당 유저만 접근하게...

 const theUser = data.filter((item) => item.userId === user.id);
    const thePost = theUser.filter((item) => item.id === id);

    if (thePost && thePost.length > 0 && thePost[0].id === id)

굉장히 고민했던 부분....
이런 저런 곳에서 정보를 가져오다보니까 해당 검사가 좀 복잡해졌다.

그래서,
1. thePost가 있는지 (언디파인드가 아닌지)
2. 1개 이상 존재하는지

처음에는 언디파인드만 검사했는데, 길이도 중요한 듯 하다.

thePost가 존재하는 경우, thePost.length > 0 조건은 대개 참(True)이나, 이 조건은 배열인 thePost에 요소가 하나 이상 있는지를 확인하는 것

나는 legnth를 지우면 안 된다.

왜냐... 내가 filter 매서드를 썼기 때문!
thePost는 theUser 배열에서 특정 조건(id가 일치하는)을 필터링해서 만든 새로운 배열입니다. 이때 theUser에 해당 id의 데이터가 없다면 thePost는 빈 배열이 된다.

이번 과제는 유독 작업하면서 이런 말을 계속 반복했다.

[이번 과제 회고록]

의문점

1) 이미지 파일 url로 변환해줘야 할 줄 알았는데 냅다 됨 (왤까)
2) 패치에 바디를 명시해줘야 할 줄 알았는데 안 넣어줘도 됨 (왜지)
3) 패치에 "Content-Type": "multipart/form-data", 이 녀석 왜 되는지 의문임... formDat도 아니고 form-data로 기재했는데 된다고 (왜지)
4) 로그인에는 엑세스 코드가 있어서 거기서 멋지게 가져오고 싶었는데 get이 안 됨 (왜ㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐ)

좀 더 개선해보고 싶은 점

1) 내 코드는 삼항 연산자로 떡칠이 되어있다.

{user.avater !== null ? (
          <img className="profile-img" src={user.avatar} />
        ) : (
          <img className="profile-img" src={MetamongDefaultImg} />
        )}

되긴 되는데 이게 맞는지 정말 의문 뭔가 깔끔해 보이지 않는다. 더 보기 쉽고 뭔가 편안한 방법은 없을까... 계속 고민해봐야겠다.

개선하고 싶은 점

튜터님 코드에 있던 유효성 검사 부분

const datePattern = /^\d{4}-\d{2}-\d{2}$/;
      if (!datePattern.test(newDate)) {
        Swal.fire({ title: "날짜를 YYYY-MM-DD 형식으로 입력해주세요." });
        return;
      }

      const parsedAmount = parseInt(newAmount, 10);
      if (!newItem || parsedAmount <= 0) {
        Swal.fire({ title: "유효한 항목과 금액을 입력해주세요." });
        return;
      }

나는 보통 함수 안에 우글우글우글 if-if-if-if 지옥으로 넣어놓는데, 이렇게 하니 정말 깔끔하다. 변수명을 짓기 어려워도 이건 꼭 습득해서 이후의 유효성 검사에 이런 방향으로 넣어놔야겠다.

샘플 자료

^^b.....