TIL (231115)

Jtiiin:K·2023년 11월 15일

내일배움캠프

목록 보기

30/85

오늘 한 일

알고리즘 코드카타
쉽게 다시 보는 리덕스(특강)
redux 강의 다시보기
개인과제 진행
└ redux 적용
└ 날짜 표기 방식 바꾸기
└ 디자인 수정
└─ 공용컴포넌트 만들기(ImgGroup)
└─ Detail 페이지 수정

오늘 공부한 내용

✅ 음양 더하기

📍 https://velog.io/@jetiiin/음양-더하기

✅ 리듀서 보충특강

📍 https://velog.io/@jetiiin/Redux-2

✅ vertical-align

주로 텍스트의 수직 정렬을 가운데로 조절할 때 사용 (display: block에서는 안먹힘)
특히, vertical-align: middle은 부모 요소의 높이에 따라 다르게 동작
(vertical-align: middle을 사용하여 가운데 정렬을 원한다면 부모 요소의 높이에 따라 다르게 동작할 수 있으므로 각각의 요소에 대해 특정한 크기와 높이를 설정하고 실험해보실 것을 권장)
(하지만 flex로 해결하는게 더 편함 🙃)

✅ new Date() 가공하기

new Date() 로 나오는 결과값 "2023-11-15T13:37:03.850Z" 을
23. 11. 03. 오전 11:07:09 형식으로 바꾸기

  const formattedDate = (currentDate) => {
    return new Intl.DateTimeFormat('ko-KR', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      hour12: true,
    }).format(currentDate);
  };
  const currentDate = new Date();
  formattedDate(currentDate)

어려웠던 내용

✅ redux 사용법 너무 어렵다

redux를 세팅하고 연결까지 했는데 적용하기가 너무 어려웠다
이유는 내가 redux 사용 방법을 잘못 알았기 때문에...
redux가 add, edit, delete 등의 로직도 다 갖고 있어야 한다고 착각해서
(심지어 useState를 전부 없애야 된다고 생각함ㅎㅎ)
컴포넌트들이 갖고 있던 함수(=로직)들을 다 redux로 옮겨 오려고 했다
그러다 보니 처음부터 막히는 부분이 많았고 계속 헤매게 됐다
(예를 들어 form 태그에서 submit시 발생하는 event를 넘겨받아서
redux에서 event.preventDefault()를 해야되는데 payload로 받아지지 않는다던지...🥴)
알고보니 redux는 전역상태에 관한 상태 변화만 관리하는 것이었다!
컴포넌트에서 수정 로직을 거친 정보를 payload로 받아 상태 업데이트만 시켜주니 정상적으로 적용됐다!
(하루종일 실패하며) 상태관리 라이브러리의 뜻을 제대로 알아버린 날..ㅎㅎ

느낀점

리덕스때문에 오후 시간을 다 잡아먹었다 ㅎㅎ
마지막엔 너무 안돼서 극대노함 😡
다른 분께 한탄하며 힌트얻고 튜터님 찾아가서 물어보고 와서 그제야 해결함
진작에 물어볼 걸ㅋㅋㅋㅋㅋ

근데 사실 기능은 동작하지만 아직도 왜 되지? 왜 안되지? 의 연속이다
이렇게 어려운 리덕스가 제일 많이 쓰이는 툴이라니..
다들 천잰가 🤔