개발/Vue

Vue.js v-model 한글 사용 문제 초간단 해결 방법

ue.js를 사용하다보면, input 태그에 v-model 디렉티브를 사용해야될 경우가 굉장히 많습니다. 하지만, Vue에서 v-model 디렉티브를 활용할 때 한글과 같이 사용하면 조금 문제가 생기는데요. 영어를 사용할 때는 발생하지 않았지만, 한글에서는 왜 이러한 문제가 발생하는 것일까요? 현상 Vue에서 v-model 디렉티브를 사용할 때 일반적으로 아래와 같이 사용합니다. 영어와 같은 경우 정상적으로 양방향 바인딩이 되어 있음을 확인할 수 있습니다. 하지만 한글일 경우 어떻게 될까요? 한글을 타이핑하면 조금 문제가 발생하는데요. 발생하는 이슈는 아래와 같습니다. 한글을 입력할 때 키워드 데이터가 즉시 바인딩이 되는 것이 아닌 글자가 조합이 되어야 그제서야 바인딩이 되는 모습입니다. 왜 이러한 이슈..

개발/기타

스토리북(Storybook) v5.3 시작하기 - Vue에서 사용하는 방법

스토리북의 기본 정의나 사용법에 대해서는 여기에서 상세히 설명 되어 있으니 참고하시면 됩니다. 스토리북(Storybook)은 굉장히 많은 프론트엔드 view 라이브러리를 지원하고 있습니다. 스토리북은 현재 React, Vue, Angular, Mithril, Marko, HTML, Svelte, Meteor, Ember, Riot, Preact를 지원하고 있습니다. 그 중 Vue.js에서 스토리북을 사용하는 방법을 소개하도록 하겠습니다. 패키지 버전(dependencies) { "dependencies": { "vue": "^2.6.11" }, "devDependencies": { "@babel/core": "^7.10.5", "@storybook/addon-actions": "^5.3.19", "@st..

개발/Vue

[Vue] vue.js Mixin을 활용해서 재사용성을 늘리자! (Understanding Mixins in Vue JS)

소프트웨어 개발 원칙에는 여러 가지가 있는데 그중 하나 DRY(Do not Repeat Yourself) 원칙이 있습니다. "같은 동작을 하는 코드를 반복적으로 작성하지 마라" 라는 뜻을 가지고 있는데 Vue에서는 중복 코드를 제거하기 위해 여러 재사용 테크닉이 존재합니다. 믹스인, 사용자 지정 디렉티브, 플러그인, 필터가 그 기술에 속해있죠. 이번 포스팅에서는 믹스인을 활용해서 기능을 재사용하여 중복 코드를 제거해보도록 하겠습니다. ✍️ Mixin(믹스인) 이란? Mixin은 기능을 따로 정의해두고 필요할 때 마다 해당 믹스인 파일을 Vue 컴포넌트에 결합해서 사용하는 방법을 말합니다. 일반적으로 Vue 컴포넌트에 기능을 추가하기 위해 필요할 때마다 재사용할 수 있습니다. SASS라는 CSS 전처리기를..

개발/Vue

vue.js 사용자 지정 디렉티브를 활용해서 코드를 깔끔하게 작성하는 방법 (vue custom directive)

🤚 들어가기 전에 Vue에는 기본적으로 내장된 디렉티브가 존재합니다. v-model과 v-show가 대표적인 예시죠. 하지만 이외에도 사용자가 직접 디렉티브를 만들고 등록할 수도 있습니다. 디렉티브를 잘 만들어 놓으면 굉장히 유용하게 재사용할 수 있습니다. 💻 디렉티브 등록 방법 사용자 지정 디렉티브를 등록하는 방법에는 2가지 방법이 있습니다. 전역으로 등록하는 방법과 로컬 컴포넌트에 등록하는 방법입니다. 전역 선언 Vue 인스턴스 선언하기 전에 Vue.directive 전역 등록을 시켜줍니다. 지역 선언 로컬 컴포넌트에 directives로 등록하는 방법입니다. 아래와 같이 지역적으로 directives를 등록하면 됩니다. 💻 훅 함수 디렉티브에는 아래와 같은 다양한 훅 함수를 제공합니다. bind 디..