개인과제

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

name

input 필드에 네임 까먹었다..... 유효성 검사 와르륵 안 됐음^-^............... 바부......

CSS

grid와 flex

그리드와 플렉스는 아직도... 그 개념만 어렴풋이 이용할 수 있고, 더 응용하려고 하면 아니요 괜찮습니다; 하고 넘어가고 싶다.

그리드

  display: grid;
  grid-template-columns: repeat(6, 1fr);

원래 이걸 그리드로 줬는데 그리드가 내 생각처럼 안 움직여서 팀원 분의 조언을 받아 플렉스로 바꿨더니

  display: flex;
  flex-wrap: wrap;
  justify-content: center;

된다.

신기...🧐🦕

이제 밑 작업도 비슷하게 움직이길 바라면서 다시 코딩 해본다....

태그 분리

1. 흰 배경 컨테이너...
   배경은 흰색,
   요소들이 세로로 정렬됐으면 좋겠으니까 display : flex, flex-direction: column;
   마진이랑 패딩 값은 그냥 좀 주는 걸 선호해서 조금 주고
   컨테이너 안에서 요소들 넘치고 + 다닥 다닥 붙은 거 싫으니까 flex-wrap: wrap, gap: 1rem;

2. 요소들 다 모아놓은 박스 하나...
   배경은 일단 안해놨는데, 오트밀색이라도 주는 것도 나쁘지 않았을 것 같다.
   보더 주고
   안에 글자 너무 다닥다닥 붙은 게 싫으니까 패딩값 주고
   일단 내부 두 개가 멀리멀리 떨어져야 하니까 justfy-space 하려고 하는데 뭔가 이상함 뭔가뭔가..... 뭔가........ flex : 1 냅다 주니까 안 해도 됨 하......ㅋㅋ 알 수가 없다 css......

3. 아무튼 각각 태그에 스팬태그 넣고..... 날짜랑 아이템+항목은 세로로 정렬할 거라 div로 하나 묶어서 다시 한 번 display : flex, flex-direction: column; 준다.
   나눌 구역 착착 나누면 css 어렵지 않다고 하고 싶었는데 어렵군^^*

flex-shrink

: 0: 요소가 절대로 줄어들지 않게 고정
헷갈려~~

text-overflow

white-space: nowrap; // 해당 줄 넘어가도 그냥 가~~~
overflow: hidden; // 넘어가면 숨겨~~
text-overflow: ellipsis; // 숨길 때 ... 표시

인데... 😌
해당 글이 길어지면 max-width 값을 주는 것 밖에 나는 생각나지 않는데, 예시 페이지에서는 그런 값을 안 준다. 창을 줄이면 얘도 알아서 줄어든다...!!
나는 일단 max-width 값을 vw 로 줘서 줄이면 줄어들게는 했는데... 아무튼 의문임

갑자기 또 생각이 드는 게

flex-wrap vs white-space

🧐⬆️ 아니 근데 넌 뭐냐? 싶었다. 너랑 white-space 랑 뭐가 다른데? 🥹

공식 문서가 짱이다... flex-wrap은 flex items 항목을, white-space는 element 요소를 다루는 모양이다...

이걸 토대로 다시 css 열심히 짜는 중... 나는 지금 flex-wrap에 nowrap을 주는 게 아니라, white-space 가 필요하다....

스탠다드 과제

useMemo

TODO: 콘솔창을 확인해보고 input 타이핑할 때 마다 List 컴포넌트가 불필요하게 리렌더링되지 않게 useMemo 사용해서 해결해 보세요.

필요한 거 맞게 쓴 거 같은데 왜 안 되는 걸까? 했는데 생각해보니 그냥 memo와는 다르게 useMemo는 의존성 배열이 있었다!

 const filteredItems = useMemo(
    () => items.filter((item) => item.toLocaleLowerCase().includes("item")),
    [items]
  );

() => 이렇게 시작하고 [] 이거까지... 깜빡했군.

custom hook

src 안에 hooks 라는 폴더 만들기
use@@ 라는 파일 만들기~!

옮기고 옮기고 그 다음에 return { 보낼 거 };

받을 하위 컴포넌트로 가서
const { 보낼 거 } = use@@(); 임포트 하면 완료~!

[오늘의 회고록]

뭔가... 뭔가 만들긴 함..... 좀 뭔가 뭔가 아쉬워서 그렇지.........

이런 느낌.........