Vue 공식 가이드 문서에서 v-model의 수정자 처리, 다중(multiple) v-model 사용법에 대해서 나와있다.

하나의 v-model 수정자를 이용해 set, get과 같은 옵션을 사용하는법이 소개 되지만, 다중 v-model의 사용했을 때, 수정자를 받는 받식만 소개되고 set과 같은 옵션을 사용할 수 있는 방법이 빠져있어 추가 해본다.

composition 스타일 지향해서 composition 방식으로만 소개 합니다.

🤖 예제 코드 ::: 공식 가이드 playground 예제를 활용

<script setup>
import { ref } from 'vue'
import MyComponent from './MyComponent.vue'
  
const firstText = ref('')
const secondText = ref('')
</script>

<template>
  <MyComponent 
    v-model:first.capitalize="firstText" 
    v-model:second.capitalize="secondText" 
  />
</template>

App.vue

<script setup>
const [first, modifiers1] = defineModel('first', {
    set(value) {
    if (modifiers1.capitalize) {
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
    return value
  }
})

const [second, modifiers2] = defineModel('second', {
    set(value) {
    if (modifiers2.capitalize) {
      return value.charAt(0).toLowerCase() + value.slice(1)
    }
    return value
  }
})

</script>

<template>
  first: <input type="text" v-model="first" />
  <br/>
  second: <input type="text" v-model="second" />
</template>

MyComponent.vue

위 코드는 2개의 input과 v-model을 갖는 Mycomponent.vue를 App.vue에서 import 해서 사용하는 코드이다.

옵션의 사용법은 defineModel() 매크로의 두번째 인자에 사용해주면 된다.

기능은 아래와 같다.

'''

first라는 name을 가진 v-model이 capitalize라는 수정자를 가지면, 첫글자는 대문자로 set 후 return

second라는 name을 가진 v-model이 capitalize라는 수정자를 가지면, 첫글자는 소문자로 set 후 return

'''

pnpm으로 vue 프로젝트 생성하기

vue3 프로젝트의 패키지 관리자를 pnpm으로 선택하고 프로젝트를 새로 생성해본다.

🛠 프로젝트 생성

$ pnpm create vue

위와 같이 프로젝트 생성 명령어를 사용한다. pnpm create vue@latest 와 동일하게 최신버젼의 vue를 사용한다.

만약, 특정 버젼의. vue를 사용하려면 "pnpm create vue@원하는버젼" 으로 명령어를 수정해준다.

🛠 옵션 선택하기

✔ Project name: …
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

프로젝트를 생성 명령어를 사용하면 위 처럼 옵션을 하나씩 선택하게 질의가 나온다.

1. 프로젝트 이름 -> 본인이 원하는 프로젝트 이름을 적는다.

2. 타입스크립스 사용여부 -> 타입스크립트는 사용한다.

3. JSX 사용여부 -> js에 html를 결합한 코드를 이용 가능하나 js 공식 문법이 아니기에 사용하지 않는다.

4. 라우터 사용 여부 -> url 변경의 라우터를 사용할 수 있기에 추가한다.

5. 피니아 사용여부 -> 스토어의 유용한 기능을 제공하니 사용한다.

6. vitest 사용여부 -> 개인 프로젝트라서 테스트가 수월하여 사용하지 않는다.

7. end-to-end test -> 마찬가지로 사용하지 않는다.

8. ESLint -> 문법 체크를 도와주는 기능인데 편리하니 사용한다.

9. Prettier -> 작성하 코드를 예쁘게 정리해주는 플러그인으로 편하니 사용한다.

위 플러그인들은 필요시 다시 추가할 수 있으니 당장 무엇인지 모르겠으면 다 No를 선택해도 무방하다.

위 처럼 프로젝트가 생성이 완료됩니다.

선택한 옵션 구성에 따라서 모양이 조금은 다를 수 있습니다.

프로젝트 생성 후 json 파일에 빨간색 줄이 생기고 오류가 발생하는 경우가 있는데 이 경우에는 사용하고 있는 IDE를 껏다 켜주시면 됩니다.

생성된 파일의 설정을 IDE 잘 인식하지 못하는 경우가 종종 있습니다.

저의 경우도 "tsconfig.node.json" 파일에서 "extends": "@tsconfig/node18/tsconfig.json" 를 찾을 수 없다는 오류가 나왔는데 IDE로 사용하는 VScode 를 재부팅해주니 바로 해결되었습니다.

pnpm 설치하기

vue 프로젝트의 패키지 관리를 npm -> pnpm으로 변경하고자 한다.

pnpm은 npm보다 여러 방면에서 향상된 기능을 제공한다고 한다.(용량, 캐시 용량 절약 등)

회사의 신규 프로젝트도 패지키 관리를 pnpm을 사용하고 있고 개인 프로젝트도 pnpm을 사용하는 것이 여러방면으로 도움이 될 듯 하다.

🛠 설치 준비물

pnpm을 설치하기 위해서는 Node.js의 버젼이 18.0 이상이여 한다고 한다.

$ node --version

터미널에서 위 명령어를 쳐서 노드 버젼을 확인하자.($는 명령어를 의미하니 $는 빼고 타이핑 해줘야한다.)

결과값이 v18.0.0 이상이라면 설치 가능할 것이다.

🛠 설치 하기

$ npm install -g pnpm

터미널에서 pmpm을 설치하는 명령어를 이용해서 설치 한다.

>>>
added 1 package in 236ms

1 package is looking for funding
  run `npm fund` for details

위와 비슷한 결과가 나오면 설치가 성공된 것이다. (>>>는 결과를 의미하는 것으로 실제로 나오는 것은 아님)

🛠 설치 오류 해결하기

>>>
npm ERR! code EACCES
npm ERR! syscall symlink
npm ERR! path ../lib/node_modules/pnpm/bin/pnpx.cjs
npm ERR! dest /usr/local/bin/pnpx
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, symlink '../lib/node_modules/pnpm/bin/pnpx.cjs' -> '/usr/local/bin/pnpx'

위 처럼 설치 오류가 나올 수 있다.

설치 중 접근해야하는 파일의 권한이 없는 문제인데, 관리자 권한으로 설치 명령어로 바꿔주면 해결된다.

$ sudo npm install -g pnpm

>> Password:

명령어를 치면 Password: 라는 결과가 나오고 본인 pc의 로그인 비밀번호를 쳐주면 된다.(타이밍 결과는 원래 보이지 않으니 그냥 쳐주면 된다.)

Vue3 TypeError: Cannot read properties of undefined (reading '$store') 해결하기

Vuex의 store 사용할 때 자주 볼 수 있는 오류 입니다.

vue2와 vue3의 store의 사용법이 달라서 일어날 수 있는 오류 입니다.

1. main.js 확인

vue2에서 vue3를 오면서 main.js에 store를 사용하고하는 명시법이 바뀌었기에 많이 나는 오류 입니다.

해결법

import { createApp } from 'vue'
import App from './App.vue'
import { store } from './store/store'

createApp(App)
    .use(store)
    .mount('#app')

main.js

store.js를 import한 후 use(store) 추가해 주어야 App 전역에서 store에 접근이 가능합니다.

2. script 에 useStore 사용

특정 component에서는 잘 사용이 되었는데 특정 component에서는 위 같은 오류가 난다면 script를 확인 해야합니다.

import { createStore } from "vuex";

export const store = createStore({
   state: {
    items: ['item1', 'item2']
   },
   mutations: {
    consoleItem() {
        console.log('addOneItem')
    }
   }
});

main.js 예시

<template>
	<li v-for="item in $store.state.items" v-bind:key="item">
    	{{ item }}
	</li>
</template>

component 예시

<template> 태그 안에서는 $store.state.items 처럼 $store 키워드에 바로 접근할 수 있습니다.

<script> 태그 안에서 위처럼 $store 혹은 this.$store 처럼 $store 키워드를 통해서 접근했다면, undefined 오류가 날 수 있습니다.

이 경우, useStore API를 통해서 store 생성해서 사용해야합니다.

<template>
	<li v-for="item in $store.state.items" v-bind:key="item" @click='callStore'>
    	{{ item }}
	</li>
</template>

<script setup>
    import { useStore } from 'vuex';

    const store = useStore();	//store 정의

    const callStore = () => {
        store.commit('consoleItem');	//store.js의 mutations의 consoleItem 호출
    }
</script>

script에서 store 사용한 component 예시

위 처럼 vuex에서 제공하는 useStore를 사용해 store를 불러와서 사용할 수 있습니다.

composition API porps, emits 사용법

Vue에 추가된 composition API는 Vue2에서의 option API보다 컴포넌트를 조금 더 독립적으로 만들기 유리하다.

관심사의 분리(상위 컴포넌트는 데이터 컨테이너 역할로 데이터를 직접 조작, 하위 컴포넌트는 데이터를 조작하지 않고 표현만을 담당)를 통해 컴포넌트의 재사용률을 높일 수 있다.

props와 emits 사용법 예시

아래예시는 App.vue 안에서 TodoList.vue 컴포넌트를 사용하는 것이다.

App.vue

<template>
  <div id="app">
    <TodoList :todoItemProps="todoItems" @emitClickList="alertList"></TodoList>    
  </div>
</template>

<script setup>
import TodoList from './components/TodoList.vue'
import { ref } from 'vue';

const todoItems = ref(['itemOne', 'itemTwo', 'itemThree']);

const alertList = (idx) => {
  alert(todoItems.value[idx]);
}
</script>

상위 컴포넌트인 App.vue에서 하위 컴포넌트에게 datadls props를 내려주고 하위 컴포넌트에게 이벤트인 emits을 받는다.

하위컴포넌트(TodoList.vue)의 todoItemsProps란 이름의 props에 상위컴포넌트(App.vue)의 todoItems라는 배열을 내린다.

하위컴포넌트(TodoList.vue)의 emitClickList란 이름의 이벤트에 상위컴포넌트(App.vue)의 alertList 라는 함수를 실행한다.

TodoList.vue

<template>
    <div>
        <ul>
            <li v-for="(todoItem, idx) in props.todoItemProps" v-bind:key="todoItem">
                <span>{{ todoItem.item }}</span>
                <span @click="clickList(idx)">Alert</span>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
	//상위 컴포넌트에서 todoItemsProps라는 이름의 props를 선언(type은 배열)
	//type => 문자열: String, 숫자형: Number, 배열: Array, 논리형: Boolean
	todoItemProps: Array
})

const emit = defineEmits(['emitClickList'])

const clickList = (idx) => {
    //idx 인자를 emitClickList 라는 이름으로 상위 컴포넌트에 전달
    emit('emitClickList', idx); 
}

</script>

1. props, emit은 모두 객체로 defineProps, defineEmits 함수를 이용하여 선언 및 정의한다.

2. props에는 상위 컴포넌트에서 받은 데이터 타입을 정의한다.

3. emit에는 상위 컴포넌트에 넘겨줄 emit들을 배열로 선언한다.

todoItemProps 안에는 상위 컴포넌트에서 넘겨준 todoItems 라는 배열이 들어있다.

배열을 꺼내쓸 때는 in 표현식을 이용해서 배열 안의 데이터에 접근할 수 있다. (아이템, 인덱스) in 배열값

아이템, 인덱스 순서로 제공되고 이름은 임의로 정할 수 있다.

@click을 통해서 클릭 이벤트가 일어났을때 clickList 함수가 실행되고 해당 함수는 emitClickList라는 이름으로 인자인 idx를 상위 컴포넌트에 올려준다.

상위 컴포넌트에서 해당 emit이 일어났을 때, 수행될 함수를 정의한다.