최신 글로 돌아가기
Category

Vue

총 11개의 글

Vue 실시간 동기화 — 폴링 → SSE → WebSocket 단계별 전환 가이드

Vue Query 폴링에서 SSE, WebSocket으로 단계적으로 전환한 실전 경험. 각 방식의 장단점과 선택 기준, 구현 방법을 코드와 함께 정리합니다.

약 10분

Vue + dayjs KST 한국 시간 설정 완전 가이드 — timezone, format, locale

Vue 프로젝트에서 dayjs로 한국 시간(KST, UTC+9)을 처리하는 방법. timezone 플러그인 설정, ko locale, format 함수 실전 예제까지 정리합니다.

약 5분

Vue 이벤트 핸들링 완전 정리 — v-on, @click, .stop, .prevent 수정자

Vue v-on(@) 이벤트 바인딩부터 .stop, .prevent, .once, .self, .capture 수정자까지. Vue 이벤트 핸들링과 수정자를 표와 실전 예제로 완전 정리합니다.

약 4분

VeeValidate + yup으로 Vue 폼 유효성 검증 완전 정리

vee-validate와 yup을 사용한 Vue 폼 유효성 검증 완전 가이드. useField, useForm으로 실시간 검증을 구현하는 예제를 단계별로 정리합니다.

약 4분

Tailwind CSS 커스텀 색상(브랜드 컬러) 추가하기 — tailwind.config.js 설정

Tailwind CSS 설정 파일에 브랜드 컬러를 추가하고 prefix로 클래스 충돌을 방지하는 방법. extend와 colors 설정으로 디자인 시스템을 구축합니다.

약 3분

Vue Quasar + AOS 스크롤 애니메이션 적용 — Vite 프로젝트 설정

Vite + Quasar Vue 프로젝트에 AOS(Animate On Scroll)를 적용하는 방법. 설치, 초기화, data-aos 속성 사용법과 커스텀 설정까지 단계별로 안내합니다.

약 3분

Vue Composition API 코드 컨벤션 가이드 — 실무 기준 코드 스타일 정리

Vue.js Composition API 기반 코드 컨벤션 완전 가이드. 파일 구조, 변수 네이밍, props/emits 작성 규칙, script setup 패턴을 실무 기준으로 정리합니다.

약 4분

Quasar + TailwindCSS 함께 사용하기 — Vue 프로젝트 설정 완전 가이드

Vue Quasar 프로젝트에 TailwindCSS를 함께 설치하고 설정하는 방법. 충돌 없이 두 프레임워크를 함께 쓰는 설정을 단계별로 안내합니다.

약 3분

Vue 필수 라이브러리 모음 — Vue Router, Pinia, VeeValidate, Quasar, VueUse

Vue 프로젝트 실무에서 검증된 필수 라이브러리 모음. Vue Router, Pinia, VeeValidate, Quasar, VueUse의 특징과 선택 이유를 정리합니다.

약 4분

Vue vs React — Vue.js를 선택한 이유와 Pinia 생태계 장점

React 대신 Vue.js와 Pinia를 선택한 이유. 직관적인 템플릿 문법, Composition API, 가벼운 학습 곡선 등 Vue가 가진 실질적인 장점을 설명합니다.

약 2분

Vue "오늘 하루 보지 않기" 팝업 구현 — vue-cookies 완전 가이드

Vue에서 "오늘 하루 보지 않기" 팝업 구현 방법. vue-cookies로 쿠키를 설정해 하루 동안 팝업을 숨기는 예제 코드와 함께 단계별로 정리합니다.

약 3분