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

๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ

(89)
[Java] modelmapper jdk 17 issue "modelmapper Unable to make field private final java.time.LocalDate java.time.LocalDateTime.date accessible: module java.base does not "opens java.time" to unnamed module" ํ•ด๊ฒฐ java spring ํ™˜๊ฒฝ์—์„œ modelmapper ๋ฅผ ์‚ฌ์šฉํ•˜๋˜ ์ค‘ ์•„๋ž˜์™€ ๊ฐ™์€ ์ด์Šˆ๊ฐ€ ๋ฐœ์ƒ "modelmapper Unable to make field private final java.time.LocalDate java.time.LocalDateTime.date accessible: module java.base does not "opens java.time" to unnamed module" Java 9๋ถ€ํ„ฐ๋Š” ๋ชจ๋“ˆ ์‹œ์Šคํ…œ์ด ๋„์ž…๋˜์—ˆ์œผ๋ฉฐ, ๋ชจ๋“ˆ ๊ฐ„์˜ ์ ‘๊ทผ์„ ๋ช…์‹œ์ ์œผ๋กœ ์ œ์–ดํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ๋Š” Java 9 ์ด์ƒ์—์„œ ModelMapper์™€ java.time ํŒจํ‚ค์ง€์˜ ์‚ฌ์šฉ ์‚ฌ์ด์˜ ์ ‘๊ทผ ์ œํ•œ์œผ๋กœ ๋ฐœ์ƒํ•œ ์ด์Šˆ ํ˜„์žฌ ๋‚ด ํ™˜๊ฒฝ์€ jdk 17์ด์—ˆ๊ณ  entity์˜ private์œผ๋กœ ์„ค์ •๋œ LocalDateTi..
[VScode] Mac VScode ESLint ์ €์žฅ ์‹œ, ์ž๋™ ์ •๋ ฌ, ์ž๋™ ์ˆ˜์ • ์„ค์ • VScode์—์„œ ESLint ์ €์žฅ ์‹œ, ์ž๋™์ •๋ ฌ ์„ค์ • ๋ฐฉ๋ฒ• 1. setting.json ์ผœ๊ธฐ Mac์˜ ๊ฒฝ์šฐ, "Command + P" ๋‹จ์ถ•ํ‚ค๋กœ ํŒŒ์ผ ๊ฒ€์ƒ‰ ์ฐฝ์„ ์—ฐ ํ›„, setting.json(.vscode) ๋ฅผ ์ผœ๊ธฐ 2. ESLint ์ €์žฅ ์‹œ, ์ž๋™์ •๋ ฌ ์ฝ”๋“œ ์ถ”๊ฐ€ํ•˜๊ธฐ "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" } ์œ„ ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€ ๋ฐ”๋กœ ์ ์šฉ์ด๋˜์ง€ ์•Š๋Š”๋‹ค๋ฉด, VScode๋ฅผ ์žฌ์‹œ์ž‘, VScode ํ™•์žฅ์—์„œ ESLint๋ฅผ "์‚ฌ์šฉ์•ˆํ•จ" > "๋‹ค์‹œ๋กœ๋“œ" > "์‚ฌ์šฉ" ์ˆœ์„œ๋กœ ์žฌ์‹œ์ž‘ ํ•ด๋ณด๊ธฐ
[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..
[Tistory Tip] ๊ด€๋ฆฌ์ž ํŽ˜์ด์ง€ ๋“ค์–ด๊ฐ€๊ธฐ ํ‹ฐ์Šคํ† ๋ฆฌ์—์„œ ๊ธ€์„ ์ž‘์„ฑํ•˜๋‹ค ๋ณด๋ฉด ๊ด€๋ฆฌ์ž ํŽ˜์ด์ง€์— ๋“ค์–ด๊ฐ€๋Š” ๋ฒ„ํŠผ์ด ์—†๋‹ค๋Š”๊ฑธ ์•Œ์•˜๋‹ค. ๋‚ด๊ฐ€ ๋ชป ์ฐพ๋Š” ๊ฒƒ์ผ ์ˆ˜๋„ ์žˆ์ง€๋งŒ, ๊ฐ€์žฅ ๊ฐ„๋‹จํ•œ ๋ฐฉ๋ฒ•์€ URL๋กœ ๋“ค์–ด๊ฐ€๋Š”๊ฒƒ ๊ด€๋ฆฌ์ž ํŽ˜์ด์ง€์ง€๋Š” ๋ณธ์ธ์˜ Tistory ์ฃผ์†Œ ๋„๋ฉ”์ธ์— /manage ๋ฅผ ์ž…๋ ฅํ•ด์„œ ๋“ค์–ด๊ฐ€๋Š” ๊ฒƒ ์˜ˆ์‹œ https://reinvestment.tistory.com/manage ๋‚ด Tistory ๋ธ”๋กœ๊ทธ ์ฃผ์†Œ๋Š” https://reinvestment.tistory.com/ ์ด๋‹ค. ๊ทธ ๋’ค์— /manage ๋“ค ๋ถ™์—ฌ์„œ ๋“ค์–ด๊ฐ€์ฃผ๋ฉด ๋œ๋‹ค. ๋ฌผ๋ก , ๋กœ๊ทธ์ธ์ด ๋˜์–ด์žˆ๋Š” ์ƒํƒœ์—ฌ์•ผํ•œ๋‹ค.

728x90