일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- supabase
- 자료구조
- C언어로 쉽게 풀어쓴 자료구조
- 캠스터디
- 프로그래머스 #정수삼각형 #동적계획법
- discord.js
- webpack
- 크롬 익스텐션
- 파이썬
- 포도주시식
- Message Passing
- background script
- 공부시간측정어플
- 백준
- Chrome Extension
- nodejs
- content script
- 크롬 확장자
- 2156
- 백준 7579
- TypeScript
- X
- popup
- 디스코드 봇
- 백준 #7568번 #파이썬 #동적계획법
- react
- 동적계획법
- 갓생
- Today
- Total
목록전체 글 (95)
히치키치
💙 ListScreen type Props = {}; const ListScreen: React.FC = () => { const { addTask, tasks, setTasks, updateTaskCompletion } = useTaskStore(); // 할 일 내용 작성을 위한 state const [newTaskLabel, setNewTaskLabel] = useState(''); // 1. 할 일 작성 const handleNewTaskLabel = (event: ChangeEvent) => { setNewTaskLabel(event.target.value); }; // 1. 할 일 추가 const submitNewTaskLabel = (event: React.FormEvent) => { eve..
💙 CreateContext // /src/contexts/task-store.ts import React, { createContext } from 'react'; import { Task } from '../types'; // 1. context 생성 : task가 원소인 리스트 (할 일들) const TaskContext = createContext([[], () => {}]); export default TaskContext; 💙 useContext 훅 : useTaskStore // /src/hooks/use-task-store.ts import useLocalStorage from './use-local-storage'; import React..
💙 전역 상태관리 구조 잡기 💙 Screen 구조 잡기 1. ListScreen (1) 할 일 작성 (2) 할 일 추가 (3) 할 일 완료 체크 (4) 완료된 할 일 일괄 삭제 (5) 할 일 삭제 2. FocusScreen (1) 할 일 완료 체크 (2) 할 일 미완료 중 랜덤 선택 (3) 할 일 미완료 중 가장 첫번째 화면에 띄우기 💙 ListScreen 기능에 따른 코드 구조 잡기 useState : newTaskLabel, setNewTaskLabel 1. 할 일 작성/추가 : input 태그와 form 태그 사용 useState의 newTaskLabel과 setNewTaskLabel을 통한 할 일 입력값(label) 관리 input 태그 : onChange 속성 실행 함수 : handleNewTa..
💙 요구사항 정리 1. localStorage 활용한 할일 관리 CRUD 웹 어플리케이션 2. ListScreen : 할 일 리스트업 : input form을 활용한 할 일 추가 : CSS을 활용한 할 일 완료 체크 : 휴지통 아이콘 클릭해 해당 할 일 삭제 : 전체 완료된 할 일 삭제 버튼 클릭해 완료된 할 일은 삭제 3. FocusScreen : 완료되지 않은 할 일 한 개 보이기 : 완료 버튼 클릭 -> 해당 할 일에 대해 완료 체크 : 스킵 버튼 클릭 -> 해당 할 일 말고 완료되지 않은 다른 할 일 한개를 보임 4. 미디어 쿼리 생성 함수를 활용해 반응형 어플리케이션 5. 토글 버튼을 활용해 다크모드/라이트모드 지원 6. React Context를 통해 ListScreen과 FocusScreen..