๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

vue3

(5)
[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 ์‚ฌ์šฉ๋ฒ• Vue3์— ์ถ”๊ฐ€๋œ composition API๋Š” Vue2์—์„œ์˜ option API๋ณด๋‹ค ์ฝคํฌ๋„ŒํŠธ๋ฅผ ์กฐ๊ธˆ ๋” ๋…๋ฆฝ์ ์œผ๋กœ ๋งŒ๋“ค๊ธฐ ์œ ๋ฆฌํ•˜๋‹ค. ๊ด€์‹ฌ์‚ฌ์˜ ๋ถ„๋ฆฌ(์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ๋Š” ๋ฐ์ดํ„ฐ ์ปจํ…Œ์ด๋„ˆ ์—ญํ• ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ง์ ‘ ์กฐ์ž‘, ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์กฐ์ž‘ํ•˜์ง€ ์•Š๊ณ  ํ‘œํ˜„๋งŒ์„ ๋‹ด๋‹น)๋ฅผ ํ†ตํ•ด ์ปดํฌ๋„ŒํŠธ์˜ ์žฌ์‚ฌ์šฉ๋ฅ ์„ ๋†’์ผ ์ˆ˜ ์žˆ๋‹ค. props์™€ emits ์‚ฌ์šฉ๋ฒ• ์˜ˆ์‹œ ์•„๋ž˜์˜ˆ์‹œ๋Š” App.vue ์•ˆ์—์„œ TodoList.vue ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด๋‹ค. App.vue ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์ธ App.vue์—์„œ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ์—๊ฒŒ datadls props๋ฅผ ๋‚ด๋ ค์ฃผ๊ณ  ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ์—๊ฒŒ ์ด๋ฒคํŠธ์ธ emits์„ ๋ฐ›๋Š”๋‹ค. ํ•˜์œ„์ปดํฌ๋„ŒํŠธ(TodoList.vue)์˜ todoItemsProps๋ž€ ์ด๋ฆ„์˜..

728x90