Todo-Project: A JavaScript repository from wdahlia

TODO 배포 URL [https://gilded-narwhal-6bf912.netlify.app/]

container
- dark mode, light mode 변경
- Context API 사용하여 구현
navbar
- all, active, completed - 필터링 기능 구현
- all - 전체 Todo 리스트 출력
- active - checked 되지 않은 Todo 리스트 출력
- completed - checked 된 Todo 리스트 출력
todo list
- ul 태그와 li 태그 부분, 컴포넌트 쪼개기
todo
- checkbox가 되었을때 체크 표시 아이콘이 담긴 inline-block
- input checkbox (완료, 미완료)
- 휴지통 Icon
- todo 삭제 기능 구현
- todo checked 된 상태 기억 구현
todo input
- todo add 하는 input text 부분
- submit시 todo input 글자 수 제한 처리 해주기
  - 즉, 글자 수 넘기면 submit 안되고 todo 생성 안되게끔
Pagination
- 각 filter마다 달라지는 개수 고려해야함
- 컴포넌트가 어디에 위치해야 하는지
- 할 일 5개씩 보여줄 것
- 페이지가 바뀔 때 마다, 원형 버튼 색상 변경
- 마우스 왼쪽 스크롤 가능하게 만들 수 있는지
반응형 태블릿 사이즈, 모바일 사이즈 구현
- figma에 디자인 추가
- 태블릿의 경우 PC와 같은 화면
- 모바일의 경우 탭바가 가로로 변경

컴포넌트를 스타일링 할때 CSS Module이라는 기술을 사용시 CSS 클래스가 중첩되는 것을 방지
CSS 파일을 Box.module.css 처럼 .module.css 형식으로 파일을 만듦
import로 불러온 styles에서 객체안에 있는 값을 참조해야함
레거시 프로젝트에 리액트를 도입 시 유용
- 기존 프로젝트에 있던 CSS 클래스와 이름이 중복되어도 스타일이 꼬이지 않게 도와줌
- CSS 클래스 네이밍 규칙을 만들기 귀찮을 때
네이밍 규칙

주어진 미디어 쿼리 문자열의 분석 결과를 나타내는
- 아래의 코드의 경우 min-width: 400px 뷰포트 너비 400px 이상일때 if 문의 코드 실행 나머지는 else 문의 코드 실행

if (window.matchMedia("(min-width: 400px)").matches) {
	// ...
} else {
}

- onAdd props 전달하기 console.log(todo) 찍었을때 나오는 인자

wdahlia/Todo-Project