ksundev 님의 블로그

Vue.js 동적 앱 만들기 - TodoFooter 컴포넌트 구현이번 포스트에서는 TodoFooter.vue 컴포넌트를 구현하여 모든 할 일을 한 번에 삭제하는 기능을 만들어보겠습니다.1. 간단한 구조의 Footer 컴포넌트TodoFooter 컴포넌트는 매우 간단한 구조로 되어 있습니다. 전체 할 일 목록을 초기화하는 기능만 담당합니다. 전체 초기화 템플릿 구조 분석단일 기능: "전체 초기화" 버튼 하나만 포함클릭 이벤트: @click="clearTodo"로 클릭 시 메서드 호출2. methods에 전체 삭제 기능 구현하기TodoFooter 컴포넌트는 단 하나의 메서드만 가지고 있습니다.export default { methods: { clearTodo() { localStor..

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

(TodoHeader.vue는 기능이 딱히 없으므로 css 적용까지만 했습니다.)Vue.js 동적 앱 만들기 - TodoInput 컴포넌트 구현지금까지는 정적 HTML만 완성했기 때문에 앱이 동작하지 않을 것입니다.이제 data와 methods를 추가하여 동적인 앱으로 만들어봅시다!이번 포스트에서는 TodoInput.vue 컴포넌트에 대해서만 다루겠습니다.1. data()에 입력값을 받을 변수 지정하기Vue.js에서 사용자 입력을 처리하기 위해서는 먼저 data() 함수에 입력값을 저장할 변수를 정의해야 합니다.export default { data() { return { newTodo: "", // 사용자 입력값을 저장할 변수 }; }, // ... 나머지 코드};왜 data(..