히치키치

💙 요구사항 정리 1. localStorage 활용한 할일 관리 CRUD 웹 어플리케이션 2. ListScreen : 할 일 리스트업 : input form을 활용한 할 일 추가 : CSS을 활용한 할 일 완료 체크 : 휴지통 아이콘 클릭해 해당 할 일 삭제 : 전체 완료된 할 일 삭제 버튼 클릭해 완료된 할 일은 삭제 3. FocusScreen : 완료되지 않은 할 일 한 개 보이기 : 완료 버튼 클릭 -> 해당 할 일에 대해 완료 체크 : 스킵 버튼 클릭 -> 해당 할 일 말고 완료되지 않은 다른 할 일 한개를 보임 4. 미디어 쿼리 생성 함수를 활용해 반응형 어플리케이션 5. 토글 버튼을 활용해 다크모드/라이트모드 지원 6. React Context를 통해 ListScreen과 FocusScreen..

💙 할 일과 할 일 들 타입 지정 1. task ( = 할 일 1개 ) 구조 잡기 : 고유값, 할 일 내용, 완료 여부의 속성으로 구성된 하나의 객체 export type Task = { id: string; label: string; isComplete: boolean; }; 2. tasks ( = 할 일 여러개) 구조 잡기 : 1에서 설정한 객체인 task가 여러개로 담아져 있는 list 💙 ListScreen과 FocusScreen에 필요한 함수/변수 타입 지정 1. tasks ( = 할 일 여러개) : task가 리스트로 있음 2. setTasks : useState의 set 함수 & tasks 값 설정 3. addTask : task의 label 값을 인자로 받아 새로운 task를 생성하고 이를..

1. .prettierrc 규칙 설정 { "singleQuote": true } 2. tsconfig.json : 타입스크립트 컴파일 설정 { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": ..