vue 2

vue v-model 한글 입력 문제: IME 조합 문자 처리 매커니즘

서론input이나 textarea와 같이 텍스트 입력을 처리하는 HTML 요소로 한글을 입력할 때 원하는 대로 동작하지 않는 상황이 있습니다. 아래 vue로 작성된 예시를 보면 한글 입력시 문제가 발생합니다."ㅇ", "아", "안" 입력 중에는 `length`가 0이고, "안"이 완성되어야 `length`가 1이 됩니다. 영어를 입력하면 문제없이 입력된 글자수에 따라 length가 늘어나는 것을 볼 수 있습니다.왜 한글 입력시 'ㅇ' 만 입력해도 length가 1이 안되는 걸까요? 이번 글에서는 vue에서 IME(Input Method Editor) 조합 문자를 처리 방식을 분석하고, 한글 입력문제를 해결하기 위한 방안을 알아보겠습니다.본론먼저 이 문제가 vue의 문제인지, 아니면 브라우저에서 한글 입..

vue 2025.05.30

Vue에서 TanStack Query 설정 및 전역 에러 처리하기

배경프로젝트에서 api 호출에 대한 에러 및 데이터를 효율적으로 관리하기 위해 TanStack Query를 도입했습니다. vue에서 TanStack을 사용하기 위한 기본 세팅과 useQuery에 대한 전역 에러 처리 과정에 대해 소개합니다.도입설치다음과 같은 명령어로 tanstack/vue-query를 설치합니다.npm i @tanstack/vue-querypnpm add @tanstack/vue-queryyarn add @tanstack/vue-query초기 세팅vue-query.ts 파일을 생성하고 VueQueryPlugin를 활용하여 초기 세팅을 진행합니다.import { VueQueryPlugin } from "@tanstack/vue-query";vueApp.use(VueQueryPlugin);..

vue 2025.05.08