https://github.com/ThinkMuk/todo-list-react

React, postCSS, localStorage 사용

Todo app에서 구현해야 할 것들 + 구현하면서 궁금했던 것들

• [x] 전체 아이템들 보여주기

• [x] 아이템 추가

  ❓ event 라는 것은 무엇인가

  ❓ 이벤트 핸들러(event handler)는 어떻게 사용하는 것인가

  ❓ this 는 정확하게 무엇인가

  ❓ form에 대하여

  ❓ preventDefault ?

  ❓ 구글링을 어떻게 하면 더 효율적으로 할 수 있는가…?

• [x] 아이템 체크박스

  ❓ input의 checkbox에 대하여

  ❓ input과 label에 id, htmlfor 에 대해

• [x] 아이템 삭제

  ❓ uuid 라는 것은 무엇인가

  ❓ 입력 값 없이 element를 업데이트 하거나 삭제하고 싶을 때

• [x] 아이템 필터링

  ❓ onClick={handleEvent(value)} 와 onClick = {() ⇒ function(value)} 의 차이점 (Arrowfunction의 중요성)

  ❗ 컴포넌트, 함수 작명의 중요성

• [x] PostCSS로 CSS 입히기

  ❓ #root (css에서 #의 의미)

  ❓ :root

  ❓ css에서 : , :: 의 의미

  ❓ css의 단위

  ❓ css에서 className을 다양하게 사용하여 스타일 변화시키는 법

  ❓ 항목이 너무 많아 컨텐츠가 위 아래로 밀려날 때 대처법

• [x] useContext를 사용한 다크모드 지원

  ❓ React의 랜더링

  ❓ React의 useContext 더 알아보기

  ❓ document.documentElement.classList

  ❗:root 변수 선언의 중요성 (feat. 다크모드)

• [x] 로컬 스토리지에 저장

  ❓ localStorage 사용법

  ❓ JSON.stringify, JSON.parse

  ❓ useState에 함수를 넣으면 생기는 일