Vue.js 마법 학교 7강: 밋밋한 옷은 안녕! 반짝반짝 스타일 마법 (v-bind:class)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 만든 할 일 목록은 기능은 멋지지만, 조금 밋밋해 보였죠? 오늘은 우리 웹사이트에 멋진 옷을 입혀주는 스타일 마법을 배워볼 거예요. 상황에 따라 옷을 갈아입는 :class(v-bind:class) 마법사입니다! 1. 스타일 마법: 상황에 따라 변하는 카멜레온 옷…
카테고리 VUEJS
Vue.js 마법 학교 6강: 실전! 내가 만드는 마법의 할 일 관리 도구
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 드디어 우리가 배운 마법들을 하나로 합쳐볼 시간이 왔어요! 오늘은 직접 ‘할 일 목록(To-Do List)’ 앱을 만들어 볼 거예요. 내가 할 일을 입력하면 목록에 척척 추가되고, 다 하면 지울 수도 있는 진짜 웹 프로그램을 만드는 거죠!…
Vue.js 마법 학교 5강: 레고 블록들의 대화! 주고받는 마법 전화기 (Props & Emit)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 우리는 나만의 레고 블록인 ‘컴포넌트’를 만드는 법을 배웠어요. 그런데 이 블록들이 서로 대화를 할 수 없다면 어떨까요? 마치 소리는 안 들리고 화면만 나오는 TV처럼 답답하겠죠? 오늘은 블록들끼리 소식을 전하는 마법 전화기인 Props(프롭스)와 Emit(에밋)을…
Vue.js 마법 학교 4강: 나만의 레고 블록 만들기! (컴포넌트 마법)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 배운 투명 망토와 복제 마법, 재미있었나요? 오늘은 Vue.js 마법의 꽃이라고 불리는 ‘컴포넌트(Component)’에 대해 배워볼 거예요. 이름은 어렵지만, 사실은 ‘나만의 레고 블록’을 만드는 것과 같답니다! 1. 컴포넌트: 반복되는 마법을 하나로 묶기 우리가 레고로 멋진…
Vue.js 마법 학교 3강: 사라졌다 나타나는 투명 망토와 무한 복제 마법
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간까지 우리는 데이터 바구니와 클릭 버튼을 만들어 보았습니다. 오늘은 조금 더 신기한 마법을 배워볼 거예요. 바로 조건에 따라 물건을 숨기거나 나타나게 하는 v-if(투명 망토)와, 수많은 아이템을 한 번에 소환하는 v-for(복제 마법)입니다! 1. v-if: 조건이…
Vue.js 마법 학교 2강: 내 마음을 읽는 마법 거울과 명령 버튼 만들기
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 우리는 Vue.js 마법사를 우리 웹사이트에 초대하는 법을 배웠습니다. 오늘은 그 마법사가 가진 가장 강력한 두 가지 능력인 데이터 바인딩(Data Binding)과 클릭 이벤트(Click Event)를 배워보려고 합니다. 이 두 가지를 익히면 정적인 웹사이트가 마치 살아있는…
Vue.js 마법 학교 1강: 클릭하면 반응하는 똑똑한 웹사이트의 비밀
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 우리는 지난 시간들에서 파이썬과 PHP를 통해 컴퓨터와 대화하고 웹의 기초를 다지는 법을 배웠습니다. 오늘은 웹사이트에 ‘생명’을 불어넣어 사용자의 행동에 즉각적으로 반응하게 만드는 아주 멋진 마법 도구를 소개하려고 합니다. 바로 Vue.js(뷰 제이에스)입니다. 2026년 현재, 우리가 사용하는…