개인 프로젝트3 종료~!
240520 ~ 240530

10일이나 했는데, 좀 아쉽다 역시! 좀 더 열심히 할 것.

개인과제

다시 과제 진행 중 헷갈렸던 것

'대부분 얘 어떻게 썼지' 했다.

Link

사용법

Link to = {"/@@@/"}

• 응용

Link to = {`/@@@/${id}`}

느슨한 유효성 검사

if (
      date == targetExpenseValue.date &&
      item == targetExpenseValue.item &&
      amount == targetExpenseValue.amount &&
      content == targetExpenseValue.content
    ) {

사실 유효성 검사할 때 좀 느슨하게 했다...^^ ㅎㅎ... 타입이 조금 다르게 나오려나...! 하고 걱정했던 것도 있는데, 일단 기능 구현 다 하고 손봐야지 하고 고치지도 않았던 것이 기억난다.
type of 로 검사했는데 다 타입이 같아서 일단 엄격 검사로 진행했다.

redux (rtk)

여전히! 아직도 리듀서 함수 작성하는 부분이 헷갈린다~!ㅋㅋㅋ
본능적으로 set..... 어쩌고 하면서 useState를 한 번 생각해줘야 하는 작업을 가지고 있다...!!

일단 그렇게 작성하고 나서, 옮기면 그나마그나마 할만 하다. (근데 이제 또 함수명 짓는 게 어려워서...🥹)

비제어 컴포넌트

이번에 과제 하면서 useState, useRef, 생성자 함수 등등 뭔가 많이 사용했는데, 은근히... 어렵다! ㅋㅋㅋ 원하는 결과를 내기 위해서는 뭔가 정말 많은 변수가 있음

이번에 두 번 생성된(홈과 디테일 페이지 각각) 인풋에 useState도 아니고 useRef도 아니고 formData로 통일해서 쓰고 싶어서 고민한 결과물...

    const formData2 = new FormData(event.target);

    const formObject = {
      id: targetExpenseValue.id,
      date: formData2.get("date"),
      item: formData2.get("item"),
      amount: formData2.get("amount"),
      content: formData2.get("content"),
    };

리듀서 함수 쓰는 거 감안... 페이로드 값에 넣어줄 때 좀 편하게 넣고 싶어서 object를 따로 땄다. formData2.get으로 했는데, useRef 였음 밸류 값으로 기재했으면 됐을 거 같다.

한 번에 관리하고 싶어서 그런 건데, 클릭될 때마다 날짜 초기값 조절 못하는 것은 조금 아쉬워서.... 다음에 만약 어떤 과제를 할 기회가 있다면 어떤 식으로 꾸려가야 할지 고민은 더 필요할 것 같다. formData를 사용해야 겠다면... 데이트만 따로 빼서 관리하는 게 어쨌든 맞을 것 같기도 하고.

CSS

Sweetalert2

알럿이 다 끝나고 난 이후에 이동했으면 좋겠다 싶어서 만지작거리는 중...

      if (result.isConfirmed) {
        //삭제 로직
        dispatch(removeExpenses(id));
        //삭제 알럿
        Swal.fire({
          title: "삭제되었습니다!",
          text: "지출 내역이 삭제되었습니다.",
          icon: "success",
        }).then(() => {
          navigate("/");
        });
      }

then() 매서드를 넣어주고 나니 해결 완료~!

과제 해설 영상 자체 피드백

useNavigate

뒤로가기

onClick={() => navigate(-1)}

초기값 설정

달력 초기값 설정

2024-${String(month).padStart(2, "0")}-01

목표 문자열의 길이=2 (10,11,12도 있으므로)
두자리가 되지 않는다면 앞에 0을 좌측(앞)에 0 넣는 것

그런데~ 나는 비제어 컴포넌트를 사용했다... 개별 input 값을 직접 제어하기는 어려운 구조를 사용해서 이번 것은 넘어가기로~!

CSS

reset.css

스타일 컴포넌츠로 글로벌 스타일 줬는데 reset.css가 나았을 지도 모른다는 생각...

스타일 컴포넌츠

생각해보니 contain 쪽은 다 똑같은 걸 줬는데 이건 왜 스타일 컴포넌츠 통일할 생각을 못했는지 의문!!!!!

export const Section = styled.section`
  background-color: #ffffff;
  border-radius: 16px;
  padding: 20px;
`;

섹션에 export 줘서 이 친구 데리고 다닌다... 와 또 하나 배운다~~!

transition

저번이랑 다르게 꿀렁이는 법을 알았다.

  transition: transform 0.2s ease-in-out;

  &:hover {
    transform: scale(1.02);

이게 조금 더 짧고 편한 것 같다. transition, transform, scale

리액트 깃허브 배포

리액트 깃허브 배포
[출처] https://taro156.tistory.com/81

열심히 하라는 거 하고 만들어질 때까지 잠깐 기다리기.... 한국인의 인내심으로 기다리다가 됐을까...? 하고 새로고침하면...

못봤던 창이 뿅 생겨나있다!! 와!

근데 실패했다....... 깃이 싸움 걸었는데 또 짐.... 이번엔 해결방법을 찾을 수가 없어서 깃 모험에 올리지도 못한다... 다음에 다시 도전하기로 함....

과제

과제 제출한 것

(어쩌다보니까 색이 자꾸만 저래짐...) width 값을 지정해줘서 줄여도 줄여지지가 않는다!

다시 혼자서 해본 것

만족스럽게 해결한 건 아닌데, 그래도 어느 정도 뭔가 뭔가 반응함.... 색도 뭔가 산뜻해짐....

알고리즘

9로 나눈 나머지
음이 아닌 정수를 9로 나눈 나머지는 그 정수의 각 자리 숫자의 합을 9로 나눈 나머지와 같은 것이 알려져 있습니다.
이 사실을 이용하여 음이 아닌 정수가 문자열 number로 주어질 때, 이 정수를 9로 나눈 나머지를 return 하는 solution 함수를 작성해주세요.

-> 나는 포문으로 풀었다잉

[더 공부해야 할 다른 사람의 문제 풀이]

reduce

function solution(number) {
    return [...number].reduce((a,b) => +a+(+b))%9;
}

리듀스가 있었네!!
스플릿으로 하나하나 풀었는데 생각해보니 스프레드도 있었다. 알고리즘은 안 하면 확실히 머리가 굳는 듯....

[오늘의 회고록]

와이파이가 아픈 듯T.T 자꾸만 버벅인다!

생각지도 못했는데 벌써 1/3 이 지났다. 앞으로 2.5배쯤만 힘내기로~