안녕하세요! 가족과 함께하는 스마트 라이프입니다. 드디어 우리가 배운 마법들을 하나로 합쳐볼 시간이 왔어요! 오늘은 직접 ‘할 일 목록(To-Do List)’ 앱을 만들어 볼 거예요. 내가 할 일을 입력하면 목록에 척척 추가되고, 다 하면 지울 수도 있는 진짜 웹 프로그램을 만드는 거죠!
1. 오늘의 마법 재료 (배운 것 복습하기)
우리가 지금까지 배운 재료들을 준비해 볼까요?
- 데이터 바인딩(v-model): 내가 입력창에 쓰는 글자를 실시간으로 기억해요.
- 복제 마법(v-for): 할 일 목록 바구니에 있는 내용을 화면에 쭉 보여줘요.
- 클릭 이벤트(@click): ‘추가’ 버튼을 누르면 마법을 실행해요.
2. 마법 레시피: 할 일 목록 만들기
아래 코드는 우리가 배운 마법들이 어떻게 어우러지는지 보여줍니다. 눈으로 먼저 읽어보고 직접 실행해 보세요!
<div id="app">
<h2>✨ 우리 가족 마법 할 일 목록</h2>
<!-- 입력 마법: v-model이 내가 쓰는 글자를 'newTodo'에 담아요 -->
<input v-model="newTodo" placeholder="할 일을 입력하세요..." @keyup.enter="addTodo">
<button @click="addTodo">마법으로 추가!</button>
<ul>
<!-- 복제 마법: todos 바구니를 뒤져서 리스트를 만들어요 -->
<li v-for="(todo, index) in todos" :key="index">
{{ todo }}
<button @click="removeTodo(index)">지우기</button>
</li>
</ul>
<p v-if="todos.length === 0">오늘의 마법이 모두 끝났어요! 푹 쉬세요. ✨</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
newTodo: '', // 새로 입력할 글자 바구니
todos: ['방 정리하기', '코딩 마법 공부하기'] // 할 일 목록 바구니
}
},
methods: {
addTodo() {
if (this.newTodo !== '') {
this.todos.push(this.newTodo); // 바구니에 쏙 넣기
this.newTodo = ''; // 입력창 비우기
}
},
removeTodo(index) {
this.todos.splice(index, 1); // 바구니에서 빼기
}
}
}).mount('#app');
</script>
3. 스마트한 생활 속 응용
아이들과 함께 이 리스트를 활용해 보세요. ‘오늘 먹고 싶은 간식 리스트’나 ‘주말에 하고 싶은 일들’을 함께 입력해 보며, 내가 만든 프로그램이 실제로 작동하는 기쁨을 느껴보는 것이 중요합니다. 코딩은 결국 우리의 삶을 더 편리하고 즐겁게 만드는 도구니까요!
마치며: 여러분은 이제 어엿한 웹 개발자!
단순한 내용을 보여주는 단계를 넘어, 이제 사용자와 대화하고 정보를 관리하는 수준까지 올라왔습니다. 정말 대단해요! 다음 시간에는 이 모든 마법의 소스 코드들을 더 예쁘게 꾸미는 **’스타일 마법(CSS)’**을 Vue.js와 함께 사용하는 법을 배워볼게요!
