그래도 해야지. 어떡해

이전 글 [React] Todo List 만들기 (#1 개선사항 정리) [React] Todo List 만들기 (#2 필터링 개선하기) 🔧 목표 • 로컬 스토리지(Local Storage)를 사용하여 데이터를 저장한다. 리스트에 추가한 데이터는 새로고침/재접속을 할 때마다 초기화 된다. 이는 별도의 데이터베이스를 사용하지 않고 브라우저 내에서만 데이터가 처리되기 때문이다. 이번 포스팅에서는 이러한 문제를 해결하기 위해 로컬 스토리지를 활용하여 데이터를 저장하는 방법을 다룰 것이다. 💡 Tips - Local storage : 브라우저를 종료하고 재시작해도 데이터가 유지된다. (ex. 자동 로그인) - Session storage : 브라우저 세션이 종료되면 데이터는 자동으로 삭제된다. Local Stor..

[React] Todo List 만들기 (#1 개선사항 정리) 문제점 ‘active’ 필터링 후, 체크된 리스트가 다시 체크해제되는 오류 수정 Component 패널을 열어 확인해 보니, 리스트 첫 줄(좌측 사진)을 보면 check가 풀려있다. 그런데(우측 사진) class는 -completed가 들어갔고 checked: true로 되어있었다. #1. 기존 코드 1.1 Header.jsx handleFilter('all')}>All handleFilter('active')}>Active handleFilter('completed')}>Completed 1.2 TodoList.jsx const [filter, setFilter] = useState('all'); // 1. 체크 const toggleChe..

[React] Todo List 만들기 (#2 필터링 개선하기) 이틀 동안 React로 투두리스트를 만들었다. 리스트 추가하는 것부터 다크모드까지 구현하는 데에 시간이 많이 걸렸다. 강의를 듣고나서 내가 만들었던 투두리스트를 수정해보려고 한다. 1. 목표 무작정 리액트로 만든 투두리스트 개선사항을 정리하고 하나씩 해결해본다. 1.1 프로젝트에 사용할 기술 React useState, useEffect, useContext 등 리액트 훅을 사용한다. PostCSS creact-react-app으로 기본 탑재되어 있는 PostCSS를 사용하며 활용법을 익힌다. 1.2 완료 목록 리스트 추가하기 리스트 삭제하기 다크모드 구현 2. 개선할 사항 2.1 컴포넌트 정리 하나로 작성된 파일에서 컴포넌트를 분리한다. ..