vue2

목표샘플 프로젝트의 작은 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..

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 2 코드를 Vue 3로 마이그레이션 해야 하는 상황이 종종 있습니다.그래서 Vue 2와 Vue 3의 공통점과 차이점이 뭔지,특히 코드를 어떤 식으로 변경해야 하는지 (Options API → Compsition API)정리해두면 나중에 마이그레이션 할 때 훨씬 수월합니다.이번 글에서는 개발자가 실제로 만지는 부분 기준으로 공통점, 차이점을 뽑아서 정리해볼게요. 2. 공통점과 차이점공통점Vue 2와 Vue 3는 기본 철학이 같습니다.템플릿 문법 {{ }}, v-bind, v-on, v-if, v-for 등SFC 구조(, Vue 3 (Composition API + setup) Cont: {{ count }} +1 차이점을 정리해보겠습니다..

Vuex가 무엇인지, Vuex를 이용해 Vue 전역 상태 관리하는 방법이 궁금하다면?2025.11.20 - [Web/Vue] - Vuex 기초: Vue 전역 상태 관리 (state, getters, mutations, actions, modules) Vuex 기초: Vue 전역 상태 관리 (state, getters, mutations, actions, modules)Vue에서 컴포넌트끼리 데이터를 주고 받는 방식이 궁금하다면?2025.11.19 - [Web/Vue] - Vue.js SFC, props, emit으로 부모-자식 데이터 흐름 잡기 Vue.js SFC, props, emit으로 부모-자식 데이터 흐름 잡기Vue가 뭔지,sproutinghye.tistory.com 이번에는 아주 간단한 전역 ..

Vue에서 컴포넌트끼리 데이터를 주고 받는 방식이 궁금하다면?2025.11.19 - [Web/Vue] - Vue.js SFC, props, emit으로 부모-자식 데이터 흐름 잡기 Vue.js SFC, props, emit으로 부모-자식 데이터 흐름 잡기Vue가 뭔지, 그리고 Vue의 기본 문법이 궁금하시다면? 2025.11.18 - [Web/Vue] - Vue.js 입문 : 기본 철학과 기본 문법 정리 Vue.js 입문 : 기본 철학과 기본 문법 정리1. Vue.js는 어떤 프레임워크인가? Vue.js는sproutinghye.tistory.com 1. 왜 Vuex가 필요할까?간단한 프로젝트에서는 props와 $emit만으로도 데이터 흐름을 관리할 수 있습니다.하지만 화면이 많아지고, 컴포넌트가 복잡해..