Vue.js 심화 2탄 12강: 더 복잡한 길도 척척! 마법 지도 업그레이드 (Router 심화)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지금까지 우리는 성 안의 방들을 옮겨 다닐 때 기본적인 지도를 사용했어요. 하지만 성이 커지면서 ‘비밀의 방 안의 또 다른 방’이 생기기도 하고, 길을 잃어버릴 때도 있죠? 오늘은 어떤 복잡한 길도 한눈에 찾아주는 업그레이드 마법 지도,…
카테고리 VUEJS
Vue.js 심화 2탄 11강: 재료가 올 때까지 잠시만 기다려요! (Suspense)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 우리가 마법 우체국(API)을 통해 멀리 있는 성에서 소식을 가져올 때, 배달부가 오는 동안 시간이 조금 걸릴 수 있어요. 이때 화면이 텅 비어있으면 사용자들이 “마법이 고장 났나?”라고 생각할 수 있겠죠? 오늘은 재료가 도착할 때까지 예쁜 대기…
Vue.js 심화 2탄 10강: 슝~ 하고 나타나는 어디로든 문! (Teleport)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 우리가 마법 성을 짓다 보면, 가끔 아주 깊숙한 방(컴포넌트) 안에서 만든 알림창이나 팝업이 성 전체 화면 한가운데에 나타나야 할 때가 있어요. 하지만 방 안에 갇혀 있으면 성 밖으로 나가기가 힘들죠? 오늘은 이 문제를 해결해주는 순간이동…
Vue.js 심화 2탄 9강: 나만의 특별 주문을 만들어요! 마법 가루 (Custom Directives)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지금까지 우리는 v-if(나타나기 마법)나 v-for(복사 마법) 같은 공인 마법 주문들을 써왔어요. 그런데 가끔은 세상에 없는 나만의 특별한 주문이 필요할 때가 있죠? 오늘은 내가 직접 이름을 짓고 능력을 부여하는 마법 가루, 커스텀 디렉티브(Custom Directives)를 배워볼게요! 1.…
Vue.js 심화 2탄 8강: 뒤섞인 마법 재료를 깔끔하게! 마법 주머니 정리술 (Composition API)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 우리가 만든 마법 성에 이제 방도 많아지고 마법 도구도 엄청나게 늘어났어요! 그런데 도구가 너무 많아지니 어디에 뭐가 있는지 찾기가 힘들어졌죠? 오늘은 흩어진 마법 재료들을 용도별로 예쁜 주머니에 담아 정리하는 마법 주머니 정리술, Composition API(컴포지션 API)…
Vue.js 심화 2탄 7강: 척척박사 계산기 vs 끝까지 지켜보는 감시카메라 (Computed & Watch)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 기분에 따라 옷을 갈아입는 변신술을 배웠죠? 오늘은 우리 웹사이트를 더 똑똑하게 만들어줄 두 가지 마법 도구를 소개할게요. 복잡한 계산을 순식간에 끝내는 마법의 돋보기(Computed)와 데이터가 바뀔 때까지 지켜보는 마법의 감시카메라(Watcher)예요! 1. Computed: 미리 계산해두는…
Vue.js 심화 2탄 6강: 기분에 따라 옷을 갈아입어요! 마법의 변신술 (Dynamic Class)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 시간을 재는 타이머 마법을 배웠죠? 오늘은 그 시간에 맞춰, 혹은 우리의 기분에 맞춰 웹사이트의 색깔과 모양을 실시간으로 바꾸는 마법의 변신술을 배워볼게요! 1. 다이내믹 바인딩: 살아있는 옷장 보통 웹사이트의 색깔은 한 번 정하면 바뀌지…
Vue.js 심화 2탄 5강: 재깍재깍, 스스로 움직이는 마법! (setTimeout & setInterval)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 보물들을 예쁘게 포장하는 법을 배웠죠? 오늘은 우리 웹사이트에 ‘시계’를 달아줄 거예요. 우리가 버튼을 누르지 않아도, 시간이 되면 스스로 나타나거나 매초 마다 숫자가 바뀌는 시간 조절 마법을 배워볼게요! 1. 두 가지 시간 마법: 알람…
Vue.js 심화 2탄 4강: 보물들을 한 상자에 담아요! 마법 포장법 (JSON)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 우리는 마법 창고(LocalStorage)에 물건을 보관하는 법을 배웠죠? 그런데 보물이 수백 개라면 어떻게 할까요? 창고지기는 “상자 하나에 물건을 하나씩만 담아주세요!”라고 고집을 피운답니다. 그래서 오늘은 여러 보물을 하나의 문자열 상자로 묶어주는 마법 포장지, JSON(제이슨)을 배워볼게요!…
Vue.js 심화 2탄 3강: 껐다 켜도 그대로! 마법의 비밀 창고 (LocalStorage)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에는 외부 소식을 가져오는 법을 배웠죠? 그런데 공들여 가져온 정보나 우리가 정성껏 만든 설정이 브라우저를 새로고침하면 사라져 버린다면 너무 슬플 거예요. 오늘은 우리 웹사이트의 기억력을 책임지는 마법의 비밀 창고, LocalStorage(로컬스토리지)를 배워볼게요! 1. LocalStorage: 우리…
Vue.js 심화 2탄 2강: 배달부의 비밀 규칙! 똑똑한 우체국 관리 (Interceptors)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 우리는 외부 성에서 소식을 가져오는 배달부 Axios를 만났죠? 그런데 배달부가 수백 명이라면 어떨까요? 매번 똑같은 부탁을 하느라 입이 아플 거예요. 오늘은 배달부들에게 미리 공통 규칙을 정해주는 인터셉터(Interceptors) 마법을 배워볼게요! 1. 인터셉터: 출발 전…
Vue.js 심화 2탄 1강: 외부 소식을 가져오는 마법 우체국 (Axios와 API)
안녕하세요! 가족과 함께하는 스마트 라이프입니다. 우리가 만든 마법 성이 이제 아주 똑똑해졌지만, 성 안의 정보만 보여주기엔 세상에 재미있는 일이 너무 많죠? 오늘은 성 밖의 날씨, 뉴스, 맛집 정보를 실시간으로 배달해주는 마법 우체국, Axios(엑시오스)를 배워볼게요! 1. API와 Axios: 세상과 연결되는 통로…