ksundev 님의 블로그

할일 완료 상태 토글 기능 구현하기이번 포스트에서는 할 일의 완료 상태를 토글하는 기능을 구현해보겠습니다. 특히 Vue.js의 반응형 시스템과 관련된 중요한 개념인 RMT 패턴에 대해서도 함께 알아보겠습니다.1. 현재 상황과 해결해야 할 문제현재 TodoList 컴포넌트의 상태현재 TodoList.vue는 프레젠테이션 컴포넌트로 변경되어 데이터 관리 기능이 App 컴포넌트로 이동했습니다. 하지만 완료 상태 토글 기능은 아직 구현되지 않았습니다.해결해야 할 문제체크 아이콘 클릭 시 완료 상태 변경완료된 할 일의 시각적 표시 (취소선, 색상 변경)localStorage에 변경된 상태 저장2. App 컴포넌트에 토글 메서드 추가하기App.vue에 toggleComplete 메서드 추가 ..

Vue.js 동적 앱 만들기 - TodoList 컴포넌트 구현저번 포스트인 TodoInput.vue에 이어서 이번 포스트에서는 Todo(할일)를 나타낼 리스트를 완성해보겠습니다.1. data()에 할 일 목록을 저장할 배열 정의하기TodoList 컴포넌트에서는 여러 개의 할 일을 관리해야 하므로 배열을 사용합니다.export default { data() { return { todoItems: [], // 할 일 목록을 저장할 배열 }; }, // ... 나머지 코드};todoItems 배열의 역할할 일 목록 저장: 여러 개의 Todo 객체를 배열 형태로 관리합니다동적 렌더링: 배열의 각 요소를 화면에 동적으로 표시합니다상태 관리: 할 일의 추가, 삭제, 완료 상태 변경을 추적합..