vue3 (6) ์ธ๋ค์ผํ ๋ฆฌ์คํธํ [Vue] Multiple v-model ์์ ์(modifiers) ์ฒ๋ฆฌํ๊ธฐ(์ต์ ์ฌ์ฉํ๊ธฐ) Vue ๊ณต์ ๊ฐ์ด๋ ๋ฌธ์์์ v-model์ ์์ ์ ์ฒ๋ฆฌ, ๋ค์ค(multiple) v-model ์ฌ์ฉ๋ฒ์ ๋ํด์ ๋์์๋ค. ํ๋์ v-model ์์ ์๋ฅผ ์ด์ฉํด set, get๊ณผ ๊ฐ์ ์ต์ ์ ์ฌ์ฉํ๋๋ฒ์ด ์๊ฐ ๋์ง๋ง, ๋ค์ค v-model์ ์ฌ์ฉํ์ ๋, ์์ ์๋ฅผ ๋ฐ๋ ๋ฐ์๋ง ์๊ฐ๋๊ณ set๊ณผ ๊ฐ์ ์ต์ ์ ์ฌ์ฉํ ์ ์๋ ๋ฐฉ๋ฒ์ด ๋น ์ ธ์์ด ์ถ๊ฐ ํด๋ณธ๋ค. composition ์คํ์ผ ์งํฅํด์ composition ๋ฐฉ์์ผ๋ก๋ง ์๊ฐ ํฉ๋๋ค. ๐ค ์์ ์ฝ๋ ::: ๊ณต์ ๊ฐ์ด๋ playground ์์ ๋ฅผ ํ์ฉ App.vue first: second: MyComponent.vue ์ ์ฝ๋๋ 2๊ฐ์ input๊ณผ v-model์ ๊ฐ๋ Mycomponent.vue๋ฅผ App.vue์์ import ํด์ ์ฌ์ฉ.. [TypeScript] VScode "๋ชจ๋ ๋๋ ํด๋น ํ์์ ์ฐพ์ ์..." ์ค๋ฅ VScode์์ ts๊ฐ ์ค์น๋ ํ๋ก์ ํธ๋ฅผ ์ด์์ ๋, ์์ฃผ "๋ชจ๋ ๋๋ ํด๋นํ์์ ์ฐพ์ ์ ์์ต๋๋ค....(Cannot fine module...)"์ ์ค๋ฅ๋ฅผ ์์ฃผ ๋ณผ ์ ์๋ค. Vue3 ํ๋ก์ ํธ์ ts๋ฅผ ์ถ๊ฐํ์์ ๋, ๋ฐ๋ก ์ด๋ฌํ ์ค๋ฅ๊ฐ ๋ฌ๋๋ฐ ํด๊ฒฐ๋ฒ์ ์ ์ด๋ณธ๋ค. ํ๋ก์ ํธ๋ฅผ ๋ฐ๋ก ์์ฑํ์ ๊ฒฝ์ฐ, ๋ณดํต vite.config.ts, tsconfig.node.json, tsconfig.app.json, App.vue ์์ ํ์ธ๋๋ค. ์ค์ ์ค์น๋ tsํ๋ฌ๊ทธ์ธ๊ณผ VScode์์ ๊ธฐ๋ณธ์ผ๋ก ์ ๊ณตํ๋ ํ๋ฌ๊ทธ์ธ์ด ์ถฉ๋ํ์ฌ ๋๋ ์ค๋ฅ์ธ๋ฐ, ์ค์ npm ํน์ pnpm istall์ด๋ build๋ ์ ๋๋๋ฐ ๋ถ์ ๋ฐ์ค ๋ฑ์ผ๋ก ๋ฌธ๋ฒ์ ์ค๋ฅ์ฒ๋ผ ํ๊ธฐ๋๋ค๋ฉด, ์๋์ ๊ฐ์ ๋ฐฉ๋ฒ์ผ๋ก ํด๊ฒฐ๋๋ค.(install์ด๋ build๊ฐ ์๋๋ค.. [vue3] pnpm์ผ๋ก ํ๋ก์ ํธ ์์ฑํ๊ธฐ (ft. @tsconfig/node18/tsconfig.json ์ค๋ฅ) 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.. [vue3] pnpm ์ค์น (ft. errno -13 ์ค๋ฅ) pnpm ์ค์นํ๊ธฐ vue ํ๋ก์ ํธ์ ํจํค์ง ๊ด๋ฆฌ๋ฅผ npm -> pnpm์ผ๋ก ๋ณ๊ฒฝํ๊ณ ์ ํ๋ค. pnpm์ npm๋ณด๋ค ์ฌ๋ฌ ๋ฐฉ๋ฉด์์ ํฅ์๋ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ค๊ณ ํ๋ค.(์ฉ๋, ์บ์ ์ฉ๋ ์ ์ฝ ๋ฑ) ํ์ฌ์ ์ ๊ท ํ๋ก์ ํธ๋ ํจ์งํค ๊ด๋ฆฌ๋ฅผ pnpm์ ์ฌ์ฉํ๊ณ ์๊ณ ๊ฐ์ธ ํ๋ก์ ํธ๋ pnpm์ ์ฌ์ฉํ๋ ๊ฒ์ด ์ฌ๋ฌ๋ฐฉ๋ฉด์ผ๋ก ๋์์ด ๋ ๋ฏ ํ๋ค. ๐ ์ค์น ์ค๋น๋ฌผ pnpm์ ์ค์นํ๊ธฐ ์ํด์๋ Node.js์ ๋ฒ์ ผ์ด 18.0 ์ด์์ด์ฌ ํ๋ค๊ณ ํ๋ค. $ node --version ํฐ๋ฏธ๋์์ ์ ๋ช ๋ น์ด๋ฅผ ์ณ์ ๋ ธ๋ ๋ฒ์ ผ์ ํ์ธํ์.($๋ ๋ช ๋ น์ด๋ฅผ ์๋ฏธํ๋ $๋ ๋นผ๊ณ ํ์ดํ ํด์ค์ผํ๋ค.) ๊ฒฐ๊ณผ๊ฐ์ด v18.0.0 ์ด์์ด๋ผ๋ฉด ์ค์น ๊ฐ๋ฅํ ๊ฒ์ด๋ค. ๐ ์ค์น ํ๊ธฐ $ npm install -g pnpm ํฐ๋ฏธ๋์์ pmpm์ ์ค์นํ๋ ๋ช ๋ น์ด๋ฅผ.. [Vue3] TypeError: Cannot read properties of undefined (reading '$store') ํด๊ฒฐ 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๋ฅผ .. [Vue .js] Composition API : props, emits ์ฌ์ฉ๋ฒ composition API porps, emits ์ฌ์ฉ๋ฒ Vue์ ์ถ๊ฐ๋ composition API๋ Vue2์์์ option API๋ณด๋ค ์ปดํฌ๋ํธ๋ฅผ ์กฐ๊ธ ๋ ๋ ๋ฆฝ์ ์ผ๋ก ๋ง๋ค๊ธฐ ์ ๋ฆฌํ๋ค.๊ด์ฌ์ฌ์ ๋ถ๋ฆฌ(์์ ์ปดํฌ๋ํธ๋ ๋ฐ์ดํฐ ์ปจํ ์ด๋ ์ญํ ๋ก ๋ฐ์ดํฐ๋ฅผ ์ง์ ์กฐ์, ํ์ ์ปดํฌ๋ํธ๋ ๋ฐ์ดํฐ๋ฅผ ์กฐ์ํ์ง ์๊ณ ํํ๋ง์ ๋ด๋น)๋ฅผ ํตํด ์ปดํฌ๋ํธ์ ์ฌ์ฌ์ฉ๋ฅ ์ ๋์ผ ์ ์๋ค.props์ emits ์ฌ์ฉ๋ฒ ์์์๋์์๋ App.vue ์์์ TodoList.vue ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด๋ค. App.vue ์์ ์ปดํฌ๋ํธ์ธ App.vue์์ ํ์ ์ปดํฌ๋ํธ์๊ฒ datadls props๋ฅผ ๋ด๋ ค์ฃผ๊ณ ํ์ ์ปดํฌ๋ํธ์๊ฒ ์ด๋ฒคํธ์ธ emits์ ๋ฐ๋๋ค. ํ์์ปดํฌ๋ํธ(TodoList.vue)์ todoItemsPro.. ์ด์ 1 ๋ค์