하수도키의 성장일기

개발일기/Vue.js

[Vue.js] 새로운 v-model 살펴보기#3 (v-model custom modifiers)

v-model 수식어(v-model modifiers) 지난 포스팅에서 2개의 v-model을 사용하는 법을 살펴봤다. 이번 포스팅에서는 vue3에서 v-model 커스텀 수식어(modifiers)를 사용하는 것을 살펴보겠다. v-model 수식어 살펴보기 vue2에서 사용했던 v-model 수식어들도 vue3에서 사용이 가능하다. .lazy : input 이벤트 대신 change 이벤트를 받는다. .number: 문자를 유효한 숫자로 변경한다. trim : 공백을 없애준다. v-model 커스텀 수식어 살펴보기 이전 포스팅에 만들었던 SalutationName 컴포넌트를 이어서 사용한다. capitalize라는 수식어를 만들어 보겠다. v-model:model 선언 후에 . 추가한 다음 수식어를 적어주..

개발일기/Vue.js

[Vue.js] Vue 테스트 코드 작성하기(Jest)

Vue에서 Unit Test(단위테스트)를 해보자. 개요 vue를 통해 unit test를 살펴보자. vue-test-utils,jest를 사용할 예정이다. 테스트를 하는 이유는 자신감 증가, 퀄리티있는 코드, 잘 정리된 문서를 꼽을 수 있다. 테스트를 위한 세팅 터미널에서 아래 명령어를 입력 후 사진과 같이 설정한다. vue create unit-testing-vue 설치가 되고 package.json파일을 열면 아래 코드가 있는데 이걸로 테스트를 한다. "scripts": { ... "test:unit": "vue-cli-service test:unit" }, npm run test:unit tests/unit 폴더에 테스트할 파일을 넣는다. 첫번째 유닛 테스트(Data 업데이트 될때 UI 변경) 로..