vue.js

목표샘플 프로젝트의 작은 Vuex 모듈 하나를 Pinia로 실제로 옮겨보고,컴포넌트에서는 mapXXX 대신 store hook(useAuthStore 등)을 써보는 것이 목표입니다. Vue 2 기반 샘플 프로젝트, Vue 3 + compat build 적용,로그인용 auth Vuex 모듈, Router 3, Axios까지 구성된 상태라고 가정합니다. 준비 상태 점검현재 샘플의 상태 관리는 이런 느낌입니다.2025.12.01 - [Web/Vue] - Vue 3 마이그레이션 연습용 샘플 Vue 2 프로젝트 준비하기// src/store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({..

Ⅰ. 이 글의 목표이번 글의 목표는 저위험 컴포넌트부터 Vue 3 Composition API로 바꿔 보는 연습을 해보는 것입니다.이미 Vue 3 + Compat build까지 해둔 상태라고 가정하고, 이번 글에서는기존 Options API 컴포넌트 → Composition API Ⅲ. export default { ... } → Vue 3에서는 mixin보다 composable 함수를 권장합니다.같은 기능을 composable로 옮겨보면 아래와 같습니다.// src/composables/useDateFormat.js (변경 후)export function useDateFormat { const formatDate = (date) => { if (!date) return '' ..

1. Compat build 개념 정리전에 만든 샘플 프로젝트는 순수 Vue 2 + Router 3 + Vuex + Axios 구조입니다.이번 글의 목표는 이 코드를 거의 손대지 않고, Vue 3 럳타임에서 돌아가게 올려보는 것입니다.그때 사용하는 것이 Vue 3 Compat Build(@vue/compat)입니다.한 줄로 정리하자면, Compat build는 Vue 3 엔진 위에서 Vue 2 문법을 최대한 그대로 돌려주는 호환 모드입니다. 특징을 정리하자면, 프로젝트는 vue@3를 사용하지만, 템플릿/옵션 API/전역 API 등 Vue 2 스타일 코드 상당수를 그대로 허용하고,Vue 3에서 제거 및 변경된 API를 쓰면 콘솔에 경고창을 띄워서 수정이 필요한 부분을 알려주며,완전히 갈아엎기 전에 Vue ..

실제 서비스 코드를 바로 Vue 3로 버전업 하기 시작하면어디까지가 실수인지, 어디까지가 설계 변경인지 헷갈리고빌드가 깨질 때 원인이 Vue 3 때문인지, 기존 버그 때문인지 구분하기 어렵습니다.그래서 이번 글의 목표는 연습용으로 막 다뤄도 되는 Vue 2 + Router + Vuex 샘플 프로젝트 하나를 확보하는 것입니다. 이 샘플을 가지고 Vue 3 + compat build를 적용해보고Router 3 → Router 4, Vuex → Pinia 변환을 실험해보고실패/롤백을 마음 편히 반복할 수 있게 만드는 것이 핵심입니다. 샘플 프로젝트 구성 기준샘플 프로젝트는 너무 복잡할 필요 없습니다.대신 실제 프로젝트의 축소판처럼 구성하는 게 중요합니다.추천 조건은 다음과 같습니다.Vue 2.x 사용 (2...

Vue 3 마이그레이션 문서와 여러 블로그를 보면 공통적으로 나오는 조언이 있습니다.문법 공부보다 먼저 프로젝트에서 무엇을 쓰고 있는지 정리하라. 같은 Vue 2 프로젝트라도 어떤 곳은 filter, mixin, event bus를 많이 쓰고어떤 곳은 Vuex 모듈이 복잡하고또 어떤 곳은 axios 인터셉터와 전역 플러그인이 핵심일 수 있습니다. 이번 글의 목표는 프로젝트에서 실제로 쓰는 것들 목록을 뽑고각 항목 옆에 Vue 3에서의 대응 전략 한 줄을 붙이는 체크리스트를 만드는 것입니다.그러면 팀원과 어디부터 손대야 하는지 공유할 수 있게 됩니다. 1. 체크리스트 구조전역 환경 & 빌드템플릿 & 컴포넌트 패턴상태 관리(Vuex → Pinia)라우터(Router 3 → Router 4)네트워크 & ax..

1. 라이프사이클 변경 개요Vue 2 → Vue 3 마이그레이션에서 헷갈리기 쉬운 부분 중 하나가 라이프사이클 훅 이름과 인스턴스 API입니다.공식 마이그레이션 가이드는 특히 아래 항목들을 브레이킹 체인지로 강조합니다.beforeDestroy와 destroyed → beforeUnmount와 unmounted로 이름 변경일부 인스턴스 메서드 제거vm.$on, vm.$off, vm.$oncevm.$children, vm.$listeners 등오늘은 이 변경점들을 한 번에 정리하면서 기존 코드를 Vue 3 기준으로 어떻게 바꾸면 되는지를 보는 게 목표입니다. 2. 라이프사이클 훅 이름 매핑- Options API 훅 이름 비교Vue 2와 Vue 3에서 대부분의 훅 이름은 그대로지만, destroy 단계만 ..

1. v-model과 필터가 마이그레이션 핵심인 이유 Vue 2에서 Vue 3로 마이그레이션 할 때 생각보다 많이 깨지는 부분은양방향 바인딩 → v-model과 템플릿 필터 {{ value \| something }}입니다.특히 커스텀 컴포넌트에서 v-model을 어떻게 구현했는지,템플릿 곳곳에 필터를 얼마나 써놨는지에 따라 마이그레이션 난이도가 달라집니다. 오늘은 Vue 2에서 Vue 3로 갈 때 v-model이 어떻게 달라졌는지,.sync / 커스텀 v-model을 Vue 3에서 어떻게 바꾸는지,필터가 제거되면서 어떤 식으로 대체해야 하는지,프로젝트에서 뭐부터 검색해야 하는지 정리해보겠습니다. 2. DOM 요소의 v-model은 거의 그대로기본 form input에서 쓰는 v-model은 거의 그대..

Vue 2에서 3로 마이그레이션 하는 전체적인 틀이 궁금하다면?2025.11.27 - [Web/Vue] - Vue 2에서 Vue 3로: 공식 마이그레이션 가이드 구조 한 눈에 정리 Vue 2에서 Vue 3로: 공식 마이그레이션 가이드 구조 한 눈에 정리1. 서론이전까지는 Vue 3 생태계를 익혔다면, 이제부터는 Vue 2에서 Vue 3 마이그레이션을 보도록 하겠습니다.먼저 공식 마이그레이션 가이드가 어떻게 구성되어있는지를 구조적으로 읽어보겠습니sproutinghye.tistory.com 1. 전역 Vue에서 앱 인스턴스 app으로Vue 2 코드를 보면 보통 이런 패턴이 많이 나옵니다.import Vue from 'vue'import Router from 'vue-router'import Vuex fro..

1. 서론이전까지는 Vue 3 생태계를 익혔다면, 이제부터는 Vue 2에서 Vue 3 마이그레이션을 보도록 하겠습니다.먼저 공식 마이그레이션 가이드가 어떻게 구성되어있는지를 구조적으로 읽어보겠습니다.Vue에서 어떤 부분이 깨지는지, 어떤 기능이 deprecated인지,어떤 순서로 점진적으로 올리는 게 좋은지 정리해둔 문서를 제공하고 있습니다.이걸 목차 중심으로 한 번 훑어보고 나서 체크리스트를 만들어보겠습니다. 2. 공식 마이그레이션 가이드는 어디에 있을까?Vue 3와 Vue 2는 API 구조가 완전히 다른 게 아니라, 상당 부분은 호환되지만 일부가 깨지는 메이저 버전에 가깝습니다.그래서 Vue에서 전용 Migration Guide를 제공하고 있습니다.Vue 2에서 3로 갈 때 breaking chan..

1. 서론Vue 3와 관련한 내용들을 한 줄씩으로 요약하자면 아래와 같습니다.Vue Router 4createRouter, createWebHistory, useRoute, useRouter 기반 라우팅 구조 이해PiniadefineStore로 도메인별 store 정의, state / getters / actions로 전역 상태 관리 {{ count }} - {{ count }} 5. 마이그레이션 체크리스트이번 글은 기존에 Vue 2 기반으로 생성된 프로젝트를Vue 3 구조에 어떻게 끼워 맞출지 관점에서 체크리스트를 만드는 게 목표입니다. 라우터 관련router/index.js에서 new Router / mode / routes 구조 파악네비게이션 가드(beforeE..