본문 바로가기

framework_library/vue32

📌 커스텀 디렉티브 만들기 (v-focus, v-mask 등) 📌 커스텀 디렉티브 만들기 (v-focus, v-mask 등)Vue 실무 구성 요소와 유틸 > 커스텀 디렉티브 만들기 1. 디렉티브란? 2. v-focus 예제 – 포커스 자동 지정 3. v-mask 예제 – 입력 마스킹 4. 디렉티브 라이프사이클 훅 5. 전역 등록 vs 지역 등록 6. 실전 팁 & 주의사항 🔚 마무리 & 다음 글 안내1. 디렉티브란? Vue 디렉티브는 HTML 요소에 v- 접두사를 붙여 특정 DOM 동작을 지시하는 특별한 속성입니다. 기본적으로 v-if, v-for, v-model, v-bind 등이 존재하지만, 개발자는 직접 커스텀 디렉티브를 정의할 수도 있습니다.2. v-focus – 포커스 자동 지정입력창 진입 시 자동으로 focus가 가도록 하는 디렉티브입니.. 2025. 5. 5.
📌 Vue.js에서 전역 EventBus 또는 mitt 활용법 📌 Vue.js에서 전역 EventBus 또는 mitt 활용법Vue 실무 구성 요소 > 6️⃣ 실무 구성 요소와 유틸 > 전역 EventBus 또는 mitt 활용법 1. 왜 EventBus가 필요한가? 2. Vue 2 방식의 EventBus 3. mitt란 무엇인가? 4. mitt 적용 예제 (전역 이벤트 처리) 5. mitt vs EventBus 차이점 정리 6. 실무 팁 & 주의사항 🔚 다음 글 안내1. 왜 EventBus가 필요한가?Vue에서는 일반적으로 props와 emit을 통해 부모-자식 간 통신을 합니다. 하지만 다음과 같은 경우에는 전역 이벤트 시스템이 유용합니다. 형제 컴포넌트 간 데이터 전달 루트에서 특정 컴포넌트에 이벤트 전파 Vuex를 쓰기엔 너무 단순한 일회성.. 2025. 5. 5.
📌 Axios 인터셉터 설정과 API 에러 처리 📌 Axios 인터셉터 설정과 API 에러 처리Vue 실무 구성 요소 > 6️⃣ 실무 구성 요소와 유틸 > Axios 인터셉터 설정과 API 에러 처리 1. Axios란 무엇인가? 2. 인터셉터란? (요청 / 응답 가로채기) 3. 실전 예제: 토큰 자동 포함 & 에러 메시지 처리 4. 공통 에러 핸들링 패턴 5. 전역 설정 vs 모듈화 전략 6. 실무 팁 & 주의사항 🔚 다음 글 안내1. Axios란 무엇인가?Axios는 Promise 기반의 HTTP 클라이언트로, Vue를 포함한 모든 JS 프로젝트에서 널리 사용됩니다. fetch보다 간결하고 인터셉터 기능이 강력하여 토큰 인증, 에러 처리, 요청 공통화에 적합합니다.2. 인터셉터란? (요청 / 응답 가로채기)Axios는 요청(reque.. 2025. 5. 5.
📦 Vue 상태 관리 - 모듈 분리와 Store 컴포지션 패턴 📦 Vue 상태 관리 - 모듈 분리와 Store 컴포지션 패턴Vue 상태 관리 시리즈 > 5️⃣ Vuex / Pinia 상태 관리 > 모듈 분리 및 Store 컴포지션 패턴 1. 왜 모듈 분리가 필요할까? 2. Vuex의 모듈 구조 3. namespaced 설정과 네임스페이스 방식 4. Pinia에서의 컴포지션 기반 Store 구조 5. 실전 구성 팁과 패턴 🔚 마무리 & 다음 글 안내1. 왜 모듈 분리가 필요할까?애플리케이션 규모가 커질수록 Store 안의 State, Mutation, Action, Getter가 뒤섞여 가독성과 유지보수성이 떨어집니다. 이럴 땐 기능 단위 또는 도메인 단위로 Store를 나누는 “모듈화”가 필요합니다.2. Vuex의 모듈 구조기본적으로 Vuex는 하나의.. 2025. 5. 5.
📦 Vuex에서 Pinia로 마이그레이션 하기 📦 Vuex에서 Pinia로 마이그레이션 하기Vue 상태 관리 시리즈 > 5️⃣ Vuex / Pinia 상태 관리 > 2️⃣ Pinia로 마이그레이션 하기1. 왜 Pinia로 이동해야 할까?2. 설치 및 기본 설정3. 기본 구조와 개념 비교4. Vuex → Pinia로 마이그레이션 팁5. 실무 적용 시 팁🔚 마무리 & 다음 글 안내1. 왜 Pinia로 이동해야 할까?Pinia는 Vue 공식 팀이 만든 차세대 상태 관리 도구입니다. Vuex보다 가볍고 직관적이며 Composition API와 완벽히 호환됩니다.Boilerplate 코드가 거의 없음 (mutation 없이 바로 상태 수정)타입스크립트 지원 우수 (자동 추론)Devtools 통합 지원모듈화가 간편 (store 분리 및 재사용이 쉬움)2. .. 2025. 5. 5.
📦 Vuex의 구조: State, Mutation, Action, Getter 📦 Vuex의 구조 완전 정복 - State, Mutation, Action, GetterVue 상태 관리 시리즈 > 5️⃣ Vuex / Pinia 상태 관리 > 2️⃣ Vuex의 구조 (State, Mutation, Action, Getter)0. Vuex 구조와 핵심 개념1. State - 중앙 집중식 상태2. Mutation - 상태 변경의 유일한 방법3. Action - 비동기 로직 처리4. Getter - 파생 상태 계산5. 전체 흐름 요약6. 실전 팁 & 주의사항🔚 마무리 & 다음 글 안내 0. Vuex 구조와 핵심 개념Vuex는 전역 상태 저장소입니다. 모든 컴포넌트에서 상태를 공유할 수 있으며, 상태의 흐름이 명확해집니다.(createStore로 넘기는 인자 속성명은 Vuex에서 예약.. 2025. 5. 5.

티스토리툴바