[Vue.js 2026-09-28] useLocalStorage 컴포저블 만들기 - watch로 상태 영속화, 직렬화 옵션, 탭 간 동기화, 상태 공유
다크 모드 설정, 최근 검색어, 작성 중인 글, 장바구니처럼 새로고침해도 유지되어야 하는 상태가 있습니다. 브라우저의 localStorage에 저장하면 되지만, 값을 바꿀 때마다 setItem을 호출하고 처음 로딩할 때 getItem으로 읽어 오는 코드를 컴포넌트마다 반복하는 것은 번거롭습니다. Vue 3의 Composition API를 사용하면 이 로직을 useLocalStorage라는 컴포저블로 한 번만 만들어 두고, const theme = useLocalStorage('theme', 'light')처럼 일반 ref와 똑같이 사용할 수 있습니다. 값을 바꾸면 자동으로 저장되고, 다시 로딩하면 저장된 값이 복원됩니다. 이번 글에서는 watch로 상태를 저장하는 기본 원리부터, 재사용 가능한 컴포저블 ..
[Vue.js 2026-09-28] 페이지네이션(Pagination) 컴포넌트 만들기 - slice 계산, v-model:page, 말줄임 페이지 번호, 페이지 크기 변경, 서버 페이징
게시판, 상품 목록, 관리자 테이블처럼 데이터가 많은 화면에는 거의 항상 페이지네이션(Pagination)이 필요합니다. 한 번에 모든 데이터를 보여 주지 않고 일정 개수씩 나눠 보여 주면서, 사용자가 페이지 번호를 눌러 이동할 수 있게 하는 UI입니다. 페이지네이션을 직접 만들어 보면 computed로 파생 데이터 계산하기, defineModel을 이용한 컴포넌트 v-model, 경계값 처리, watch로 상태 보정하기 등 Vue의 핵심 문법을 자연스럽게 연습할 수 있습니다. 이번 글에서는 배열을 페이지 단위로 자르는 기본 원리부터 시작해서, 재사용 가능한 Pagination 컴포넌트, 페이지가 많을 때 "1 … 4 5 6 … 20"처럼 말줄임으로 번호를 보여 주는 알고리즘, 페이지 크기 변경 처리, ..
[Vue.js 2026-09-28] 장바구니 만들기로 배우는 computed와 리스트 조작 - 수량 변경, 합계, 할인/배송비, 정렬, 전체 선택
Vue.js의 핵심 문법을 가장 잘 연습할 수 있는 예제 중 하나가 쇼핑몰 장바구니입니다. 장바구니에는 배열에 항목 추가/삭제, 수량 변경, 합계 계산, 할인과 배송비 규칙, 정렬, 체크박스 전체 선택 등 실무에서 자주 만나는 로직이 모두 들어 있기 때문입니다. 이번 글에서는 장바구니를 단계별로 만들면서 반응형 배열 조작과 computed(계산된 속성)를 어떻게 활용하는지 자세히 알아보겠습니다. 특히 "화면에 보이는 값은 상태에서 계산해서 얻는다"는 원칙에 따라, 합계나 할인 금액 같은 파생 데이터를 별도 상태로 저장하지 않고 computed로 만드는 방법에 집중합니다. 1. 상품 담기 - find와 push 장바구니 상태는 { id, name, price, qty } 형태의 객체 배열로 관리합니다. 상..
[Vue.js 2026-09-28] JSON 스키마로 동적 폼 렌더링하기 - v-for, component :is, 필드 컴포넌트, 조건부 필드, 검증 규칙
관리자 화면이나 설문, 설정 페이지처럼 입력 항목이 자주 바뀌는 폼을 매번 템플릿에 하나하나 작성하면 유지보수가 어렵습니다. 이럴 때 많이 사용하는 방법이 스키마 기반 동적 폼(Schema-driven Form)입니다. 폼의 구조(필드 이름, 타입, 라벨, 옵션, 검증 규칙)를 JSON 형태의 스키마 데이터로 정의해 두고, Vue 컴포넌트가 그 스키마를 읽어 알맞은 입력 요소를 자동으로 렌더링하는 방식입니다. 필드를 추가하거나 순서를 바꿀 때 템플릿을 수정할 필요 없이 스키마 데이터만 바꾸면 됩니다. 이번 글에서는 v-for와 v-model로 만드는 가장 단순한 동적 폼에서 시작해서, component :is로 필드 타입별 컴포넌트를 매핑하는 방법, 다른 값에 따라 보였다 숨는 조건부 필드, 스키마에 검..
[Vue.js 2026-09-28] v-bind와 v-on 고급 문법 - 객체 바인딩, 동적 인자, 같은 이름 단축, 다중 핸들러, .prop/.attr 수식어
v-bind(:)와 v-on(@)은 Vue 템플릿에서 가장 많이 쓰는 디렉티브입니다. 대부분은 :src="url", @click="save"처럼 하나의 속성이나 이벤트를 연결하는 형태로 사용하지만, 두 디렉티브에는 알아 두면 코드를 훨씬 간결하게 만들어 주는 고급 문법이 있습니다. 이번 글에서는 객체로 여러 속성을 한 번에 바인딩하는 v-bind="obj", 이벤트를 객체로 연결하는 v-on="{ ... }", 속성/이벤트 이름 자체를 변수로 만드는 동적 인자, Vue 3.4에서 추가된 같은 이름 단축 문법, 하나의 이벤트에 여러 핸들러를 연결하는 방법, 그리고 .prop / .attr / .camel 수식어까지 예제 코드와 실행 결과로 정리해 보겠습니다. 1. v-bind 객체 문법 - 여러 속성을 한..