Vue.js 실전 프로젝트: 우리 가족 ‘마법 스마트 패드’ 메인 화면 만들기
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 드디어 기다리고 기다리던 시간입니다! 기초부터 심화까지 모든 마법을 마스터한 여러분과 함께, 오늘은 진짜로 쓸 수 있는 ‘우리 가족 마법 스마트 패드’의 메인 화면을 만들어 볼 거예요. 1. 프로젝트 설계: 어떤 마법들이 들어갈까요? 우리가 배운 마법들을…
카테고리 VUEJS
Vue.js 심화 마법 11강: 최고의 소통 마법사! 소식을 전하는 전령 (Custom Events)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 드디어 Vue.js 심화 마법 학교의 마지막 시간입니다! 지난 시간에는 증조할아버지와 비밀 무전기를 썼다면, 오늘은 자식이 부모에게 “이건 이렇게 처리해 주세요!”라고 아주 상세하게 부탁하는 마법 전령, Custom Events(커스텀 이벤트)의 고수 기술을 배워볼게요. 1. Custom Events: 내…
Vue.js 심화 마법 10강: 층층이 전달은 그만! 비밀 무전기 마법 (Provide / Inject)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 우리가 만든 마법 성이 점점 높아져서 이제 1층, 2층을 넘어 10층까지 생겼다고 상상해 보세요. 1층에 계신 증조할아버지가 10층에 있는 증손주에게 사탕을 주려면, 중간에 있는 모든 가족을 거쳐야 할까요? 너무 힘들겠죠? 오늘은 중간 단계를 쏙 빼고…
Vue.js 심화 마법 9강: 무엇이든 담을 수 있는 마법의 창문! (Slot)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 우리가 만든 레고 블록(컴포넌트)들은 모양이 정해져 있어서 가끔 답답할 때가 있죠? 예를 들어, 똑같은 ‘알림창’ 블록인데 어떤 때는 글자를 넣고 싶고, 어떤 때는 그림을 넣고 싶을 때가 있어요. 오늘은 블록 안에 내가 원하는 걸 무엇이든…
Vue.js 심화 마법 8강: 내 마음을 읽는 똑똑한 입력창 만들기! (커스텀 v-model)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지금까지 우리는 v-model이라는 마법으로 입력창에 글자를 쓰면 바로바로 데이터 바구니에 담기는 걸 배웠어요. 오늘은 이 마법을 한 단계 더 발전시켜서, 우리 입맛에 딱 맞는 나만의 똑똑한 입력창을 직접 설계하는 법을 알아볼게요! 1. 커스텀 v-model: 마법…
Vue.js 심화 마법 7강: 허락된 마법사만 들어오세요! 성 문지기 마법 (Navigation Guards)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 우리 마법 성에 여러 개의 방이 생기다 보니, 아무나 들어가면 안 되는 ‘비밀의 방’이나 ‘보물 창고’도 생겼어요. 오늘은 특정 페이지에 들어가기 전, “잠깐! 당신은 들어올 자격이 있나요?”라고 물어보는 똑똑한 문지기 네비게이션 가드(Navigation Guards)를 배워볼게요! 1.…
Vue.js 심화 마법 6강: 번개보다 빠른 웹사이트 만들기! (성능 최적화 기초)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 우리가 지은 마법 성이 점점 커지다 보니, 가끔은 성 문이 늦게 열리거나 마법이 느리게 발동할 때가 있어요. 오늘은 우리 웹사이트를 가볍고 빠르게 만들어주는 성능 최적화 마법을 배워볼게요! 1. 성능 최적화: 가벼운 가방이 빨리 달려요 여러분,…
Vue.js 심화 마법 5강: 내 마법을 친구에게 빌려줘요! (Composables)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 우리는 Composition API로 마법 지팡이를 강화하는 법을 배웠죠? 오늘은 내가 만든 멋진 마법 주문 하나를 다른 성이나 다른 방에서도 똑같이 쓸 수 있게 빌려주는 마법 도구 상자, Composables(컴포저블)을 배워볼게요! 1. Composables: 언제 어디서든…
Vue.js 심화 마법 4강: 더 강력해진 마법 지팡이! 주문을 묶어주는 Composition API
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지금까지 우리는 아주 멋진 마법들을 많이 배웠어요. 그런데 마법 주문이 너무 많아지면 어떻게 될까요? 지팡이가 무거워지고 주문이 꼬일 수도 있겠죠? 오늘은 복잡한 마법 주문들을 종류별로 예쁘게 묶어서 관리하는 최신 마법, Composition API(컴포지션 API)를 배워볼게요! 1.…
Vue.js 심화 마법 3강: 마법이 태어나서 사라질 때까지! (라이프사이클 훅)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 우리가 만든 레고 블록(컴포넌트)들도 생명이 있다는 사실, 알고 계셨나요? 오늘은 블록이 화면에 처음 나타날 때부터 사라질 때까지의 과정을 관리하는 라이프사이클 훅(Lifecycle Hooks)에 대해 배워볼게요! 1. 라이프사이클: 웹사이트의 일생 강아지가 태어나고, 쑥쑥 자라고, 잠을 자러 가는…
Vue.js 심화 마법 2강: 가만히 지켜보다가 짠! 나타나는 마법의 눈 (Watcher)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 배운 부드러운 변신 마법, 잘 연습해 보셨나요? 오늘은 우리 웹사이트에 아주 특별한 ‘감시자’를 한 명 세워둘 거예요. 바로 데이터가 바뀌는 걸 가만히 지켜보고 있다가, 특정한 일이 생기면 바로 움직이는 마법의 눈, Watcher(왓처)입니다! 1.…
Vue.js 심화 마법 1강: 슈욱~ 나타나는 변신 마법 (Transition)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 우리 웹사이트가 이제 아주 똑똑해졌지만, 화면이 바뀔 때 ‘툭툭’ 끊기는 게 조금 아쉬웠죠? 오늘은 우리 웹사이트에 부드러운 움직임을 더해주는 애니메이션 마법, Transition(트랜지션)을 배워볼게요! 1. 트랜지션: 순간이동 대신 부드러운 걷기 지금까지 v-if로 물건을 나타나게 하면 눈…