connecting dots

todo 리스트에 필터 기능 추가 실습전체 원본 todo 리스트는 가지고 있고, 필터링을 할 때 완료 전/완료 후 배열을 다시 만들어서 띄워줘야 됨 버튼을 누르면 value 바뀌도록 액션 설정  버튼을 누르면 각 버튼에 따라 active가 붙는 화면 clsx 라이브러리클래스를 여러 개 적용하고 싶을 때 !npm i clsx 기존 코드 setFilterStatus(filter.value)}> {filter.text} clsx 적용 코드.btn { border: none; padding: 10px;}.active { background-color: royalblue; color: white;} subscribeWithSelector 미들웨어 사용subscribeWithSelector는 zustand..

화살표 함수 코드 축약 Main.tsx 파일에 있던 setTodo(), deleteTodo() 함수 store로 이사 시키기데이터를 불러 오는 getTodos()를 store로 이동시켜주었기 때문에투두 리스트를 새로 수정하는 setTodo(), 투두를 삭제하는 deleteTodo() 역시 store로 이사를 시켜야 한다 !데이터 권한이 이제 Main -> store로 넘어간 상황이니 수정, 삭제하는 부분도 store에서 제어해줘야 한다. 기존 Main.tsx store에서 가지고 올 수 있도록 TodoItem 파일 수정 옮긴 후 똑같이 작동하는 화면 모달에 삭제, 수정기능 추가전체 코드import styles from './TodoItemModal.module.css'import { useNavigate..

모달 CSS .modal { position: fixed --> 화면 전체를 덮어야 할 때(화면을 기준으로) width: 100vw --> 화면의 가로너비 100%, height: 100vh --> 화면의 세로너비 100%}.overlay { position: absolute --> 부모요소인 modal을 기준으로 (position을 갖는 것이 우선순위를 갖는다 !) width: 100% --> 뷰포트 쓰지 않아도 됨. 부모요소에 영향을 어차피 받기 때문에.contens { calc(100vh-40px) --> 전체 뷰포트 height에서 위아래 20px씩 공간 남겨놓겠다 overflow: auto --> 자동으로 넘치면 스크롤} z-index- position이 설정된 element에서만..