안녕하세요! 가족과 함께하는 스마트 라이프입니다. 드디어 기다리고 기다리던 시간입니다! 기초부터 심화까지 모든 마법을 마스터한 여러분과 함께, 오늘은 진짜로 쓸 수 있는 ‘우리 가족 마법 스마트 패드’의 메인 화면을 만들어 볼 거예요.
1. 프로젝트 설계: 어떤 마법들이 들어갈까요?
우리가 배운 마법들을 어디에 쓸지 정해봅시다!
- 컴포넌트: ‘날씨’, ‘칭찬 스티커’, ‘가족 게시판’을 각각의 레고 블록으로 만들어요.
- Props & Emit: 부모(스마트 패드)가 자식(스티커판)에게 점수를 전달하고 소통해요.
- Transition: 메뉴가 나타날 때 슈욱~ 하고 부드럽게 나타나게 해요.
2. 실전 코딩: 마법의 성 조립하기
모든 기술이 집약된 마법의 코드를 한 번 살펴볼까요? 각 부분에 어떤 마법이 쓰였는지 찾아보세요!
<!-- [부모 성: App.vue] -->
<template>
<div class="smart-pad">
<h1>🏰 {{ familyName }}의 마법 성</h1>
<!-- 1. 날씨 마법 (단순 데이터 바인딩) -->
<div class="weather">오늘의 날씨: ☀️ 맑음</div>
<!-- 2. 칭찬 스티커판 (컴포넌트 + Props/Emit) -->
<sticker-board
:points="totalPoints"
@add="increasePoints">
</sticker-board>
<!-- 3. 비밀 메시지 (Slot 마법) -->
<magic-card>
<template #header>❤️ 오늘의 응원</template>
<p>오늘도 즐겁게 코딩 마법을 부려봐요!</p>
</magic-card>
</div>
</template>
<script setup>
import { ref } from 'vue';
import StickerBoard from './StickerBoard.vue';
import MagicCard from './MagicCard.vue';
const familyName = ref('에듀패드');
const totalPoints = ref(0);
const increasePoints = () => {
totalPoints.value += 10; // 스티커를 받으면 10점씩 쑥쑥!
};
</script>
3. 우리 가족만의 개성 더하기
이 화면을 만든 뒤에 아이들과 함께 다음을 시도해 보세요.
- 배경색 바꾸기:
v-bind:style을 써서 아침에는 하늘색, 밤에는 보라색으로 바뀌게 해보세요. - 아이콘 넣기: 칭찬 스티커 대신 아이들이 좋아하는 캐릭터 아이콘이 나오게
v-for를 써보세요. - 소리 마법: 버튼을 누를 때 칭찬하는 목소리가 나오게 오디오 기능을 추가할 수도 있답니다.
마치며: 여러분만의 스마트 라이프를 응원합니다!
드디어 하나의 완벽한 작품이 탄생했습니다! 처음엔 글자 하나 바꾸는 것도 어려웠지만, 이제는 스스로 기능을 상상하고 코드로 구현할 수 있는 진정한 마법사가 되셨어요. 이 대시보드를 거실 태블릿에 띄워두고 온 가족이 함께 사용해 보세요. 기술이 주는 행복을 직접 느끼실 수 있을 거예요!
가족과 함께하는 스마트 라이프의 Vue.js 시리즈를 사랑해 주셔서 감사합니다. 다음 연재부터는 **’우리 집 비서 만들기: 파이썬 자동화’** 시리즈로 새롭게 찾아올게요! 모두들 행복한 코딩 하세요! ✨
