여행과 일상

input 요소 처리 시 nextTick 이 사용 될 만한 예제에 대해 설명해 보겠습니다. 먼저 input 에 대한 입력 조건은 아래와 같습니다.숫자만 입력 가능하다.6자리 이상은 입력되지 않는다. 위에 대한 조건을 바탕으로 하는 기본 코드는 아래와 같습니다.   위의 코드를 실행 시 숫자와 영어 입력 시 조건에 부합하는 결과가 나오게 되는데요, 만약 한글을 입력하게 된다면, 그대로 표시가 되는 걸 보실 수 있습니다. 이유를 찾아보니... 영어 문자의 경우 vuejs 와의 입력과 동기화가 잘되므로 데이터 모델 변경 시 뷰에 즉각적인 반영에 있어서 문제가 없다고 합니다.하지만 한글은 조합형 문자인 경우가 있고 이러한 경우에 문자열의 변화가 느려질 수 있는데, 이때 vuejs 의 비동기 업..

개요pinia store 에서 vue-router 사용 시 undefined 로 인해 정상적인 동작을 하지않는 상황이 발생 사실 이건 당연한, 간단한 구조적 문제였는데.. 저와 같은 실수를 하는 사람이 없길 바라며 작성하는 게시글입니다.. 개발 환경build tool: viteframework: vue3state management: pinia 코드main.js import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' import router from './router' const app = createApp(App) app.use(createPinia()) app.use(ro..

개발환경현재 개발중인 환경은 아래와 같다front framework: vue3 (v3.2.13)build tool: vite (v3.1.9) 상황개발을 하다보면 local, dev, prod 와 같은 개발환경에 따라 다른 처리가 필요한 부분이 꼭 생기게 된다.vue3, vite 를 사용하여 개발하는 지금, 이러한 처리가 필요한 부분이 발생하여 해당 환경에 맞게 처리 후 테스트 할 환경으로 빌드를 하기 위해 아래와 같이 빌드를 실행하였다. npm run build --mode local정상적으로 진행 될 거라 생각했지만 아래와 같은 오류가 발생하였다. Error: "local" cannot be used as a mode name because it conflicts with the .local p..

이번에는 공통으로 사용되는 함수들을 모아 전역 변수로 선언한 후 해당 변수를 통해 함수를 호출하는 방법을 알아보도록 하겠습니다.먼저 공통 함수들을 선언하는 파일을 utils.js 라고 명명하고 아래와 같이 작성합니다.  // utils.js export default { // 숫자 외 문자삭제 후 리턴 inputNumber: (v) => { return v.replace(/[^0-9]/g, '') } } 그리고 main.js 에서 utils.js 파일을 import 후 전역 변수에 $utils 라는 이름으로 등록합니다.  // main.js import { createApp } from 'vue' import App from './App.vue' import ro..

아래는vue3 에서 script setup 방식으로 전역변수를 사용하는 예제 입니다. 전역변수 설정case 1provide 를 사용하여 전역변수를 설정하는 방법.file: main.js ... const appTitle = 'hello nobody' const app = createApp(app) .provide('$title', appTitle) .mount('#app') case 2config.globalProperties 를 사용하는 방식으로 provide 와 동일하게 vue3 에서 전역 애플리케이션 인스턴스에 속성을 추가할 수 있는 기능.file: main.js...const appTitle = 'hello nobody'const app = createApp(app)...app.con..