할 일 :
1. useRef 리팩토링 => 과제 제출

2. ai 도움 없이 리덕스 + 프롭스 드릴링으로 과제 처음부터 끝까지 해보기 (리덕스(RTK)에 익숙해지기)
   2-1. 스타일링 x 필요한 부분에만 스타일 컴포넌츠 사용하기
3. 베이직 강의 * 2배속 2개
4. 시간 남으면 스탠다드 강의 복습

개인과제

useRef

겁먹었는데 뭐야 이녀석 쉽잖아...

const dateInput = useRef();

input 박스가 하나라면 useRef 사용하는 게 참 좋은 방법이 될 수 있다는 생각이 들었다. 무척 간결하다.

useRef() 하나 만들어주고... 나는 수정에 이용할 생각이기 때문에, 괄호 안의 값은 비워둔다.

<Input ref={dateInput} defaultValue={targetExpense.date} />

*input은 스타일 컴포넌트라서 저렇다.
ref로 연결해주면 인풋창을 사용할 수 있다. (리랜더링과는 관계 없음) 그리고, 초기값은 defaultValue로 기재해주면 끝이다~!

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

리액트 라우터 돔

이거 설치 방법부터 더듬...

yarn add react-router-dom

라우터 생성하고 페이지 세팅...

리덕스

리덕스 설치

yarn add react-redux @reduxjs/toolkit

1. 스토어도 리듀서 {}
2. 리듀서 함수 내보낼 때 export const { 함수 이름 } = @@slice.actions
3. 스토어에서 받을 때 import @@Reducer 로 받기

useEffect

저장을 해야지 그렇지 그니까 이게 ? 변할 때마다... 하고서 useEffect 쓰고 난 다음에 얘 어떻게 사용했더라!!!! 이랬다.

얼른 리액트 문서 들어가... 친절하게 형광펜칠에다가 한글 번역되어있는 거 .... 편안... 😌🍰☕️

메인 로직이랑 의존성 배열. 맞다~!

localStorage

로컬 스토리지에 저장은 문자열~~^-^ 하 증말 맨날맨날 parseInt 까먹는다! 💩

파싱도 안 하는데 숫자로 변환하는 것은 잊지 말기~!

CSS

부모 요소에서 자식 개체간의 갭을 주고 싶을 때

display: flex;
flex-wrap: wrap;
gap: 1rem;

flex: 1

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%

1. 어떤 비율로 확장될지 = 1(사용 가능한 공간을 모두 같은 비율로 나누어 사용)
2. 어떤 비율로 축소될지 =1 (모든 아이템도 같은 비율로 축소)
3. 이 속성은 아이템의 초기 크기를 결정 (기본값은 auto)
   flex-basis를 0%로 설정하면 아이템의 초기 크기가 없어진다.

=> 아이템이 컨테이너의 크기에 따라 확장 및 축소되며, 초기 크기는 없고, 사용 가능한 공간을 모두 차지하게 됨을 의미한다.
*당연하지만 display : flex

왜 그러냐뇽 왜

버튼 만들었는데 왜 이렇게 친한 거야 얘들아.... 🥹

스탑 친밀 부탁.... (저장도 버튼 크기가 좀 이상한데)
버튼에 크기 주고, 루트랑 가장 큰 레이아웃에 값을 줬더니 뭔가뭔가 다행히 되긴 함... CSS는 계속해서 공부가 필요할 듯 하다!!!!

근데 CSS는 정말 마굴인 게 스타일 안 주려고 했는데 또 열심히 꾸미고 있음... (심지어 이거 색이 내가 제출한 프로젝트보다 예쁨 🙃 다음 개인 프로젝트 때 이 색 또 써봐야지 히히)

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.layout {
  max-width: 800px;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  gap: 20px;
  background-color: blanchedalmond;
  height: 100vh;
}

루트에다가 맥스값, 레이아웃(내가 가진 제일 큰 틀)에다가 맥스위드, 위드값 주니 뭔가 일단일단 내가 원하는 대로 나왔다. 버튼은 그리드 형식으로 했는데, 창이 줄어들면 움직이게 하고 싶었는데 아직 실패했다!!! 반응형 미디어 쿼리에 대해서는 열심히 더더 공부해보🦕...

하루만에 과제 다시 재구성하기는 실패하고 강의 열심히 더 보는 중... 👀 베이직 강의 밀렸더니 합쳐서 4시간...! 내일 더 열심히 하려고 알고리즘도 미리 풀어놨다..!!! (다음 강의는 강의 자체가 짧아요 해서 휴 다행~ 얼른 보고 다시 리덕스 해야지 하고 봤더니 다음 것도 2시간이라니 🥹 하나 더 남았단 말이에용)

내일도 열심히 하🦕