반응형 Dev/✅ Vue.js7 [Vue.js] 빠르고 간단하게 mixin 적용하기 Intro안녕하세요. 아아덕후입니다. 이 글에서는 Vue.js의 여러 컴포넌트에서 공통으로 사용하는 mixin에 대한 사용법을 정리하기 위해 글을 작성했습니다. 실제 현재 업무에서 여러 화면 및 컴포넌트에 Vuex를 이용해 state로 데이터를 관리하고 있습니다. 각 데이터에 대해서 금액 단위 적용, 날짜 포맷팅 등 수많은 state 데이터에 동일하게 적용되어야 하는 util 함수에 대해 mixin 함수를 사용하여 적용했습니다. Vue의 computed, methods 혹은 Vuex의 mutation, getters를 이용해 data를 변경가능 하지만 화면이 10개, 20개, 100개로 증가하게 되면 같은 코드를 10번, 20번, 100번 사용해야 하니까...! mixin을 이용한 공통 함수로 사용했습니.. 2024. 2. 20. Vuex 모듈 및 사용 방법 정리 Intro현재 Vue.js에서 공식적으로 지원하는 상태관리 라이브러리는 Vuex에서 Pinia로 변경되었지만, 업무에서 Vuex를 사용하고 있어 이를 정리하기 위해 작성한 글입니다. (그래도.. 아직.. Vuex 사용.. 하시는 분들.. 많으시죠..?) 저는 하나의 View 안에 여러 탭 간 이동을 구현해야 하는 업무가 있었습니다. 탭 간(레이아웃 단위 컴포넌트) 이동 시 라우터 이동과 라이프사이클에 따라 초기화되는 vue 인스턴스 data의 문제를 해결하고 각 탭의 상태 관리하기 위해 Vuex를 사용했었습니다. 이를 공유하고 다른 분 들께서도 조금 더 쉽게 Vuex를 적용하시는데 도움을 드리고 싶어 글을 작성했습니다. (Pinia에서는 Vuex에서보다 더 간단한 Composition-API 스타일의 A.. 2024. 2. 12. vue-router 설치부터 환경설정 및 사용방법 목차 1. router 설치 2. router 설정 3. router 예제 1. router 설치 (yarn , npm) yarn 설치 yarn add vue-router@4 npm 설치 npm install vue-router@4 참고 : https://router.vuejs.org/installation.html 2. router 설정 router를 사용하기 위해 3개 의 파일을 설정해야 합니다. 3개의 파일은 router-index.js / main.js / App.vue 입니다. index.js 첫 번째로, router 폴더를 생성하고 그 안에 index.js 생성해야 합니다. 해당 폴더는 밑에 main.js에서 호출하여 전역으로 router로 사용하기 위한 설정을 위한 폴더입니다. 왜냐하면 in.. 2023. 5. 2. [Vue] Axios를 이용한 http 통신 - 설치부터 예제, 비동기 처리까지. 목차 1. Axios 란? 2. Axios 설치 3. Axios 문법 4. Axios 사용 방법 (post) 5. Vue 에서 Axios 설정 6. Axios 예제 (Get, Post) 7. Axios 비동기처리 예제 (Get, Post) https://axios-http.com/kr/docs/intro 시작하기 | Axios Docs 시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코 axios-http.com 1. Axios란? - node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 라이브러리입.. 2023. 4. 18. [Vue.js] 이슈부터 해결하는 Vue 프레임워크 Deep Dive (feat. 공식문서) Vue.js 프레임워크를 이용해 개발하며 마주했던 문제와 해결 방법에 대해서 작성합니다. [Issue1] 상위 컴포넌트의 data의 값이 변경될 때, 하위 컴포넌트에 props로 바인딩 한 값이 변경되지 않는 현상. (업무 예시 : 요금조정 컴포넌트(상위 컴포넌트)에서 axios 통신으로 받아온 데이터(vuex- state)로 DatePicker 컴포넌트(하위 컴포넌트) 날짜 변경(props data)을 해야 하는데 변경되지 않는 이슈 발생) [Solve1] 하위 컴포넌트에 :key ="props value" 를 속성으로 추가하면, 해당 데이터 변경 시 해당 하위 컴포넌트 데이터 변경 감지함. 부모 컴포넌트 입니다. 용돈 주기 ( 해당 예시에서는 :key 없이도 잘 변경이 됩니다..! :key를 어떻게 .. 2023. 3. 28. [Vue.js] props & emit 사용 가이드 props : 부모(상위) 컴포넌트에서 호출하는 자식(하위) 컴포넌트에게 전달해주는 데이터(문자, 숫자, 객체) emit : 자식(하위) 컴포넌트에서 부모(상위) 컴포넌트에게 전달해주는 데이터 ex) 부모 컴포넌트 (구매리스트 : buyList.vue)에서 호출 된 자식 컴포넌트( 데이트피커 컴포넌트 : DatePicker.vue) { startDateEx = seletedValue; } " @selectEndDate=" (seletedValue) => { endDateEx = seletedValue; } 구매 목록(부모 컴포넌트) 에서 해당 emit 값을 받을 때, @인자명 = " ( seletedValue ) => { this.exData = seletedValue } " 이런 형식으로 작성이 되어있.. 2023. 3. 16. Vue.js 첫 실행 : 설치부터 프로젝트 생성 Steps (CLI, Router, Vuetify) 0. 준비물 Vue 설치 + node js (npm 사용 위해) + VScode (or Atom) 설치 1. Vue 프로젝트 생성을 위한 폴더 설정 VScode - CMD 혹은 Windows/MAC CMD를 이용해 Vue 프로젝트 실행할 폴더 경로 설정 저는 VScode를 이용했습니다. 2. Vue 설치 cmd에서 Vue 설치 커맨드 : npm install vue 3. Vue CLI설치 Vue CLI는 Vue 개발을 편하게 시작할 수 있도록 프로젝트를 구성해주는 도구입니다. 초기 프로젝트 구성을 자동적으로 해주어 (폴더 구조, lint, bulid, webpack 등) 설정에 대한 고민 없이 쉽게 프로젝트를 구상할 수 있도록 환경을 제공해줍니다. 커맨드 : npm install -g @vue/cli 경.. 2022. 4. 30. 이전 1 다음 반응형
