전체 글

Vue Router 기초와 Vue Router 3가 궁금하다면?2025.11.19 - [Web/Vue] - Vue Router 기초 (Vue 2 + Vue Router 3) Vue Router 기초 (Vue 2 + Vue Router 3)1. SPA에서 라우터가 필요한 이유Vue로 간단한 컴포넌트까지만 만들 때는 하나의 페이지에서만 작업해도 충분하지만,실제 서비스에서는 다음과 같은 화면이 필요해집니다./login: 로그인 페이지/usesproutinghye.tistory.com 1. 왜 Vue Router 4를 공부해야 할까?실무에서는 Vue 2 기반 레거시 프로젝트를 유지하면서새 기능이나 신규 서비스는 Vue 3 기준으로 올려야 하는 경우가 많습니다.그래서 Router 3만 따로, Router 4만 ..

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 차이점을 정리해보겠습니다..

1. 왜 Composable 패턴이 중요한가?Composition API를 쓰기 시작하면 어떤 로직을 다른 컴포넌트에서도복붙 말고 다른 방법으로 재사용하고 싶은 욕구가 들게 됩니다.Vue 2에서는 이런 문제를 mixins로 해결하려 하지만어디서 어떤 로직이 섞여 들어오는지 추적이 힘들고이름 충돌, this 컨텍스트 문제 등으로 디버깅이 어려웠습니다. 그래서 Vue 3 공식 문서에서는 Composition API + Composable 함수(useXXX)를 로직 재사용의 추천 방식으로 소개하고 있어요.관련 있는 상태(ref/reactive)와 함수들을 하나의 함수(useXXX)로 묶어서 여러 컴포넌트에서 가져다 쓰는 패턴입니다.이런 함수를 흔히 Composable 또는 Composition 함수라고 부릅니..

1. 서론Vue 2와는 달리 Vue 3에서는 Composition API를 쓰므로 전부 함수 형태의 훅(hook)으로 바뀝니다.created -> 따로 없음(대부분 setup 안에서 처리)mounted -> onMountedbeforeUnmount, unmounted -> onBeforeUnmount, onUnmountedupdated -> onUpdated 등Vue 3 공식 문서에서는 이들을 생명주기 훅(Lifecycle Hooks)이라고 부르고,Composition API 안에서 직접 import 해서 사용하는 패턴으로 설명합니다. 이번 글에서는Vue 2 라이프사이클과 Vue 3 Composition 라이프사이클의 대응 관계onMounted, onUnmounted를 중심으로 한 기본 사용 패턴이벤트/..

1. 왜 Composition API를 써야 할까?Vue2에서는 data, methods, computed, watch 같은 Options API로 컴포넌트를 구성했습니다.작은 컴포넌트에서는 직관적이지만, 컴포넌트가 커질수록 문제가 커집니다.관련된 로직이 data / methods / watch 여기 저기 흩어지고,하나의 기능(예: 폼 처리, API 호출)을 이해하려면 파일 전체를 위아래로 왔다 갔다 해야합니다.이 문제를 해결하기 위해 Vue 3에는 Composition API가 도입되었습니다.Composition API는 로직을 기능 단위로 묶고 재사용하기 쉽게 하기 위한 새로운 API 세트입니다.이번 글에서는 setup() 함수, ref, reactive 세 가지를 중심으로 정리해 볼게요. 2. s..

1. Vue3를 공부해야 하는 이유Vue는 표준 HTML/CSS/JS 위에서 동작하는 컴포넌트 기반 프레임워크현재 공식 문서와 생태계는 Vue2가 아닌 Vue3를 중심으로 움직임Vue2는 이미 장기 지원이 끝났고, 새로운 기능 및 라이브러리는 Vue 3를 우선 지원함 이번 글의 목표는Vue 3 프로젝트를 만드는 표준 방법(= Vite + create-vue)을 이해하고Vue 2와 다른 앱 초기화 방식(createApp)의 큰 그림을 잡고생성된 프로젝트 구조가 어떤 의미인지 파악하는 것입니다. 2. Vue 3 프로젝트 생성Vue 3 공식 문서는 로컬에서 Vue 앱을 만들 때 Vite 기반 스캐폴딩 도구인 create-vue를 사용하라고 안내합니다.Node.js 최신 버전(18 이상 권장)과 터미널을 사전에..

1. 왜 Vue CLI를 써야 할까?이전까지는 CDN으로 앞에서 공부했던 것처럼: 화면 구조이제는 이걸 SFC로 옮겨서 Counter.vue로 만들 수 있습니다. Count: {{ count }} +1 그리고 App.vue에서 사용합니다. Vue CLI 프로젝트에서의 카운터 이렇게 하면 기존 CDN 예제의 개념은 그대로 유지하면서,CLI 기반 프로젝트 구조로 자연스럽게 넘어갈 수 있습니다. 정리이번 글에서는 Vue CLI를 설치하고, 새 Vue 2 프로젝트를 만들고,폴더 구조를 훑어보고, 기존 CDN 예제를 SFC 컴포넌트로 옮기는 방법까지 정리해 봤습니다. 출처SimpleVue - vue-cli 알아보기Vue 공식 문서 -..

Vuex를 활용한 스토어, 전역 상태 관리가 궁금하다면?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 1. 왜 Vuex 모듈이 필요한가?처음에는 store/i..

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만으로도 데이터 흐름을 관리할 수 있습니다.하지만 화면이 많아지고, 컴포넌트가 복잡해..