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

์ „์ฒด ๊ธ€208

์˜์–ด๋กœ ๋‚ด ์ฝ”๋“œ๋ฅผ ์„ค๋ช…ํ•  ์ˆ˜ ์žˆ๋Š”๊ฐ€? https://www.youtube.com/live/fBlf_vml5w4?feature=shared ์ตœ๊ทผ ๋ฐฐ๋ฏผ ์œ ํŠœ๋ธŒ ์ฑ„๋„์— ์‹ค๋ฌด ์˜์–ด์™€ ๊ด€๋ จํ•œ ๋ผ์ด๋ธŒ๊ฐ€ ์žˆ์—ˆ๋‹ค. ์ค‘๊ฐ„ ๋ถ€๋ถ„๋ถ€ํ„ฐ๋Š” ๋„ˆ๋ฌด ๋””ํ…Œ์ผํ•œ ๋‚ด์šฉ๋“ค์ด๋ผ ์Šคํ‚ตํ•˜์˜€๊ณ  ๊ฐ•์—ฐ์ž๊ฐ€ ์˜์–ด๋ฅผ ๊ณต๋ถ€ํ•˜๊ฒŒ๋œ ๋™๊ธฐ์™€ ๊ณต๋ถ€๋ฒ•์— ๋Œ€ํ•œ ์„ค๋ช…์„ ์œ„์ฃผ๋กœ ๋ณด์•˜๋‹ค. ๊ฐ•์—ฐ์ž๋Š” ๊ตฐ๋Œ€์—์„œ๋ถ€ํ„ฐ ์˜์–ด๋ฅผ ์—„์ฒญ ์—ด์‹ฌํžˆ ๊ณต๋ถ€ํ•˜์˜€๋‹ค๊ณ ํ•œ๋‹ค. IT์˜ ์ฃผ๋ฅ˜๋Š” ๋ˆ„๊ฐ€ ๋ญ๋ž˜๋„ ์‹ค๋ฆฌ์ฝ˜ ๋ฐธ๋ฆฌ์ด๋ฉฐ ์‹ค๋ฆฌ์ฝ˜ ๋ฐธ๋ฆฌ๋ฅผ ๋„˜์–ด์„ค ์ง€์—ญ์€ ๋‹น๋ถ„๊ฐ„ ์—†์„ ๊ฒƒ๊ฐ™๋‹ค. ๋”ฐ๋ผ์„œ ๋ชจ๋“  ๊ฒƒ์ด ์˜์–ด๊ฐ€ ๊ธฐ๋ฐ˜์ด๋ฉฐ ์˜์–ด๋กœ ๋œ ํ‘œ์ค€ ๋ฌธ์„œ, git, stackoverflow ์˜ ์ปค๋ฎค๋‹ˆํ‹ฐ๋“ค์ด ๊ธฐ๋ณธ์ด ๋˜์—ˆ๋‹ค. ๊ฐœ๋ฐœ ๋ถ„์•ผ์—์„œ ํ•œ๊ธ€์„ ์“ฐ๋Š” ์‚ฌ๋žŒ์ด ์–ผ๋งˆ๋‚˜ ๋ ๊นŒ? ๊ฐ•์—ฐ ๊ธฐ์ค€์œผ๋กœ๋Š” 3%, 4%๋Œ€์ด๋‹ค. ๊ตฌ๊ธ€๋ง์—์„œ๋„ ์˜์–ด๋กœ ๊ฒ€์ƒ‰ํ–ˆ์„ ๋•Œ์™€ ํ•œ๊ธ€๋กœ ๊ฒ€์ƒ‰ํ–ˆ์„ ๋•Œ์˜ ๊ฒฐ๊ณผ ๊ฐฏ์ˆ˜,.. 2024. 2. 26.
์—ฐ๋…„์ƒ ๋‘˜์งธ๋ฅผ ์ž„์‹ ํ–ˆ๋‹ค. ๋‚จํŽธ์—๊ฒŒ ๋‘˜์งธ๊นŒ์ง€๋Š” ๋‚ณ๊ณ  ์‹ถ๋‹ค๊ณ  ์ž์ฃผ ์ด์•ผ๊ธฐํ–ˆ๊ณ , ๋‚จํŽธ ๋˜ํ•œ ๊ทธ์— ๋™์˜ํ•˜๋ฉฐ ์—ฌ๋Ÿฌ๋ฒˆ ์šฐ๋ฆฌ์˜ ๋ฏธ๋ž˜ ๊ฐ€์กฑ ๊ตฌ์„ฑ์›์— ๋Œ€ํ•œ ์ด์•ผ๊ธฐ๋ฅผ ๋‚˜๋ˆด๋‹ค. ๊ทธ๋Ÿฌ๋‹ค ๊ฒฐ๊ตญ 23๋…„ 12์›”. ๋ณต์ž๋ฅผ ๋‚ณ์€์ง€ 11๊ฐœ์›”๋งŒ์— ์ž„ํ…Œ๊ธฐ๋กœ ๋‘˜์งธ ์ž„์‹ ์„ ํ™•์ธํ–ˆ๋‹ค. ์ƒ๊ฐ๋ณด๋‹ค ์‰ฝ๊ฒŒ ์ž„์‹ ์„ ํ•˜๊ฒŒ๋˜์–ด ๊ฝค๋‚˜ ๋†€๋ž๋‹ค. ์ฒซ์งธ๋Š” ์ž„์‹ ์„ ์ค€๋น„ํ•œ์ง€ 6~7๊ฐœ์›”๋งŒ์— ์ž„์‹ ์ด ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์ธ๋ฐ ์ฃผ๋ณ€ ๋ง๋Œ€๋กœ ์ฒซ์งธ ๋‚ณ๊ณ  ๋‚œ ํ›„, ์ž๊ถ์ด ๊นจ๋—ํ•ด์ ธ์„œ ์˜€์„๊นŒ? ๋„ˆ๋ฌด๋‚˜ ์‚ฌ์ด๋น„ ๊ณผํ•™์ด๊ธด ํ•˜์ง€๋งŒ ๊ทธ๋Ÿด๋“ฏํ•˜๊ฒŒ ๋“ค๋ ธ๋‹ค. ๊ทธ๋กœ๋ถ€ํ„ฐ ์ผ์ฃผ์ผ ํ›„์— ์‚ฐ๋ถ€์ธ๊ณผ์— ๊ฐ€์„œ ์ž„์‹ ํ™•์ธ์„ ๋ฐ›์•˜๊ณ , ๊ทธ๋กœ๋ถ€ํ„ฐ 2์ฃผํ›„์—๋Š” ์‹ฌ์žฅ์†Œ๋ฆฌ๊นŒ์ง€ ๋“ค์—ˆ๋‹ค. ์šฐ๋ฆฌ ๋‘˜์งธ์˜ ํƒœ๋ช…์€ ๋™์‹์ด๋กœ ์ •ํ•ด์กŒ๋‹ค. ๊ฒจ์šธ์— ์ƒ๊ธด ์ž์‹์ด๋ผ '๋™์‹'์ด๊ฐ€ ๋˜์—ˆ๋‹ค. ๋‚จํŽธ์€ ๋‘˜์งธ๋„ ๋”ธ์„ ์›ํ–ˆ๊ณ , ๋‚˜๋Š” ๋‹ค๋ฅธ ์„ฑ๋ณ„๋„ ์ข‹์ง€ ์•Š์„๊นŒ ์‹ถ๊ธด ํ•˜์ง€๋งŒ ๋”ธ์ด์–ด๋„ ๊ทธ ๋˜ํ•œ ํ–‰๋ณตํ• ๊ฑฐ.. 2024. 2. 2.
firestore rules ์—…๋ฐ์ดํŠธ๊ฐ€ ๊ณ„์† ์›๋ณต๋˜๋Š” ๋ฌธ์ œ(+ํ•ด๊ฒฐ) test ๋ชจ๋“œ๋กœ ์ž‘์„ฑ์„ ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋‚ ์งœ๊ฐ€ ํ•œ๋‹ฌ ๋’ค๋กœ ์„ค์ •๋˜์–ด์žˆ์—ˆ๋‹ค. rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if request.time < timestamp.date(2023, 11, 26); } } } ๊ทธ๋ž˜์„œ read๋Š” ๋ชจ๋‘๊ฐ€ ๊ฐ€๋Šฅํ•˜๊ณ , write๋Š” ์ธ์ฆ๋œ ์‚ฌ์šฉ์ž๋งŒ ๊ฐ€๋Šฅํ•˜๋„๋ก ๋ฐ”๊พธ์—ˆ๋‹ค. rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read:.. 2023. 11. 30.
์‹œ๊ฐ„์ œ ๋ณด์œก ์ฒซ๋‚  ์•„์นจ๋ถ€ํ„ฐ ํ—ˆ๋‘ฅ๋Œ”๋‹ค. 6์‹œ 50๋ถ„์ฏค ๊นฌ ์•„๊ธฐ์—๊ฒŒ ์ด์œ ์‹์„ ๋จน์ด๊ณ  ๋ถ„์œ ๋ฅผ ๋จน์ด๊ณ  ์‹ํƒ์„ ์ •๋ฆฌํ•˜๊ณ  ๋’ค๋Œ์•„์„œ๋‹ˆ ์‹œ๊ฐ„์ œ ๋ณด์œก์„ ๋งก๊ธฐ๋Ÿฌ๊ฐ€์•ผํ•  ์‹œ๊ฐ„์ด๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ์•ˆ๋˜๋Š”๋ฐ ๋‚ด ๋ง˜๋„ ์•ˆ์ ˆ๋ถ€์ ˆ, ์ž˜๋ชป๋œ ์ฐจ์„ ์„ ํƒ€๋ฒ„๋ฆฐ ๋‚˜์—๊ฒŒ ์•ˆ์ ˆ๋ถ€์ ˆ. ์‹œ๊ฐ„์ œ ๋ณด์œก์„ ๋งก๊ธฐ๋Ÿฐ ๊ฐ„ ๊ณณ์—๋Š” ์ฃผ์ฐจํ•  ๊ณณ์ด ๋งˆ๋•…์น˜ ์•Š์•„ ๋‹ค์‹œ ํ•œ๋ฒˆ ์ฐจ๋ฅผ ๋Œ๋ฆฌ๊ณ , ๋˜ ๊ธธ์„ ์ž˜๋ชป๋“ค๊ณ , ๊ฒฐ๊ตญ์—” ๋‚˜์˜จ์ง€ 20๋ถ„๋งŒ์—(์›๋ž˜๋Š” 10๋ถ„์ด๋ฉด ๋œ๋‹ค.) ์ง€ํ•˜์ฒ ์—ญ ์ฃผ์ฐจ์žฅ์— ์ฐจ๋ฅผ ๋Œ€๊ณ , ๋ง‰ ์ž ์ด๋“ค๋ ค๊ณ  ํ–ˆ๋˜ ๋„ˆ๋ฅผ ์•ˆ๊ณ  ๋‹ค์‹œ ๊ธธ์„ ๋‚˜์„ฐ๋‹ค. ์„ฑํผ์„ฑํผ ๊ธธ์„ ๊ฑธ์–ด ๋ณด์œก์„ผํ„ฐ์— ๋„์ฐฉํ–ˆ๊ณ  ๋”ฐ๋œปํ•˜๊ฒŒ ๋งž์•„์ฃผ์‹œ๋Š” ์„ ์ƒ๋‹˜๋“ค์— ๋งˆ์Œ์€ ์•ˆ์‹ฌ๋์œผ๋‚˜ ๊ณง ๋„ˆ๋Š” ๋‚ด ์ ํผ์˜ ์˜ท๊นƒ์„ ๋ถ™์žก๊ณ  ๋†”์ฃผ์งˆ ์•Š๋Š”๋‹ค. ์•ˆ์•„์ฃผ๋‹ค๊ฐ€ ์ž ๊น ๋‚ด๋ ค๋†“๊ณ  ์„œ๋ฅ˜๋ฅผ ์ž‘์„ฑํ•˜๊ณ  ์žˆ๋Š”๋ฐ ๋ฉ€๋šฑ๋ฉ€๋šฑ ๋‚˜๋ฅผ ์ณ๋‹ค๋ณด๋‹ค ๊ฐ‘์ž๊ธฐ ๋˜ ๋ˆˆ๋ฌผ์„ ํ›”์น˜๋Š” ๋„ˆ. ์„œ๋ฅ˜๋ฅผ ๊ธ‰ํžˆ ์ž‘์„ฑํ•˜๊ณ  .. 2023. 11. 17.
vue Toast Viewer์— data๊ฐ€ ์•ˆ ๋„˜์–ด๊ฐ„๋‹ค.(+ํ•ด๊ฒฐ) ๋ผ์šฐํ„ฐ params๋กœ ๋„˜์–ด์˜ค๋Š” id๋ฅผ ์ด์šฉํ•ด firestore์—์„œ ๋„ํ๋จผํŠธ๋ฅผ ์ฝ์–ด์˜จ ํ›„, template ํƒœ๊ทธ ์•ˆ์˜ ๋ณ€์ˆ˜๋“ค์— ๊ฐ’์„ ๋„ฃ๊ณ  ToastViewer ์ปดํฌ๋„ŒํŠธ์—๋„ ๋ฐ์ดํ„ฐ๋ฅผ ๋„˜๊ธฐ๋ ค ํ–ˆ์œผ๋‚˜ ๊ณ„์†ํ•ด์„œ ToastViewer props์—์„œ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์ฝ์–ด์˜ค์ง€ ๋ชปํ–ˆ๋‹ค. {{ title }} {{ dt }} import TuiViewer from "./Editor/ToastViewer.vue"; import {getDocument} from "../firestore.js" export default { components: { TuiViewer, }, data(){ return{ title: '', dt: '', content: '', } }, async mounted() { const id = this.$r.. 2023. 11. 12.
vue2, vue3 ์ฐจ์ด์  Options API VS. Composition API ์•„๋ž˜๋Š” vue2์™€ vue3์˜ ์ƒ˜ํ”Œ์ฝ”๋“œ๋‹ค. vue2 ์ƒ˜ํ”Œ ์ฝ”๋“œ (Options API) {{ message }} Change Message vue3 ์ƒ˜ํ”Œ์ฝ”๋“œ (Composition API) {{ message }} Change Message Options API์™€ Composition API ๊ฐ€ ๋„๋Œ€์ฒด ๋ญ˜๊นŒ? ์ •์˜๋ฅผ ์ฝ์–ด๋ดค์„๋•Œ ๋”ฑํžˆ ์™€๋‹ฟ๋Š” ์„ค๋ช…๋“ค์ด ํฌ๊ฒŒ ์—†์—ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ฐจ์ด์ ์„ ํ•œ๋ฒˆ ์ •๋ฆฌํ•ด๋ณด์ž. Options API Composition API ๊ตฌ์„ฑ ๊ฐ์ฒด ์ค‘์‹ฌ์˜ ์ ‘๊ทผ๋ฐฉ๋ฒ• data, methods, computed ๋“ฑ์˜ ์˜ต์…˜๋“ฑ์„ ํ†ตํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ตฌ์„ฑํ•œ๋‹ค. ํ•จ์ˆ˜ ์ค‘์‹ฌ์˜ ์ ‘๊ทผ. data ์˜ต์…˜ ๋Œ€์‹  ๋ฐ”๋กœ ๋ณ€์ˆ˜๋ฅผ return{}ํ•œ๋‹ค. methods๋Œ€์‹  ๋ฐ”๋กœ ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ  mounted ์˜ต์…˜ ๋Œ€์‹  onMounte.. 2023. 11. 9.
์•ˆ๋จน์ด์˜ ์•„์ด์ฃผ๋„ ์ด์œ ์‹ ์ด์œ ์‹์„ ์‹œ์ž‘ํ•œ์ง€ ์ด์ œ ๋ง‰ 4๊ฐœ์›”์ฐจ์— ์ ‘์–ด๋“ค์—ˆ๋‹ค. ๋‚ด ํ‰์ƒ ๋ˆ„๊ตฐ๊ฐ€๋ฅผ ์œ„ํ•ด์„œ ์ด๋ ‡๊ฒŒ ๊ณ„์† ์Œ์‹์„ ๋งŒ๋“ค์–ด๋Œ€๋˜ ์‹œ๊ธฐ๊ฐ€ ์žˆ์—ˆ์„๊นŒ? ํ˜ผ์ž์‚ด๋•Œ๋Š” ๋‚ด ์ž… ํ•˜๋‚˜ ๊ฑด์‚ฌํ•˜๊ธฐ ์œ„ํ•ด์„œ, ๋‚ด ๋ฐฐ๋ฅผ ์ฑ„์šฐ๊ธฐ ์œ„ํ•ด ์š”๋ฆฌ๋ผ๊ธฐ ๋ณด๋‹จ ๋ผ๋‹ˆ๋ฅผ ๋งŒ๋“œ๋Š” ๋Š๋‚Œ์ด ๊ฐ•ํ–ˆ์—ˆ๋‹ค. ๊ฒฐํ˜ผํ•˜๊ณ  ๋‚˜์„œ๋„ ๋‚จํŽธ๊ณผ ์ €๋…์‹์‚ฌ ํ•œ๋ผ, ์ฃผ๋ง์— ๋จน์„ ์‹์‚ฌ ์ •๋„(ํœด์ง ์ „์—๋Š” ๋‚จํŽธ๊ณผ ๋ฒˆ๊ฐˆ์•„๊ฐ€๋ฉด์„œ ํ–ˆ๋˜๊ฒƒ ๊ฐ™๋‹ค. ๋จผ์ € ํ‡ด๊ทผํ•œ ์‚ฌ๋žŒ์ด ์š”๋ฆฌ๋ฅผ ํ•˜๋Š” ๊ฒƒ์œผ๋กœ ์ •ํ–ˆ์—ˆ์Œ)๋ฅผ ์ค€๋น„ํ–ˆ์—ˆ๋‹ค. ๋ณต์ž๊ฐ€ ํƒœ์–ด๋‚˜๊ณ , ์–ด๋–ค ์Œ์‹์ด ์ž…์— ๋” ๋งž์„๊นŒ, ์–ด๋–ค ์žฌ๋ฃŒ๋ฅผ ๋˜ ๋จน์—ฌ๋ณผ๊นŒ? ๋ฅผ ๋งค๋ฒˆ ๊ณ ๋ฏผํ•˜๋ฉด์„œ ์žฅ์„ ๋ณธ๋‹ค. ๋ฐ”๋‹ฅ์— ๋„๋ถ€๋Ÿฌ์ ธ์žˆ๋Š” ์Œ์‹๋“ค์„ ํ–‰์ฃผ๋กœ ๋‹ฆ์•„๋‚ด๊ณ , ํ•˜์ด์ฒด์–ด์— ์–ธ์ œ ๋ถ™์–ด์„œ ์ด๋ ‡๊ฒŒ ๊พธ๋•ํ•ด์กŒ์„๊นŒ ์‹ถ์€ ๋ฐฅํ’€ ๋ฉ์–ด๋ฆฌ๋ฅผ ์˜ค๋Š˜๋„ ์น˜์šฐ๋ฉฐ ๋ˆ„๊ตฐ๊ฐ€๋ฅผ ๋จน์ด๋Š” ํ–‰์œ„์— ๋Œ€ํ•ด์„œ ์ƒ๊ฐํ•ด๋ณธ๋‹ค. ์ฒ˜์Œ์—” ๋ญฃ๋„ ๋ชจ๋ฅด๊ณ  ์ž…์„ ์ฉ์ฉ๋ฒŒ๋ ค.. 2023. 11. 9.
๊ฐ€๋ฆผ์น˜๋ฃŒ ์ค‘ ์ •์ƒ๋ˆˆ์—์„œ ์‚ฌ์‹œ๊ฐ€ ๋ณด์˜€๋‹ค. 10์›” 17์ผ, ์ฒซ๋ฒˆ์งธ ์ง„๋ฃŒ(์˜์•„๋‚ด์‚ฌ์‹œ ํ™•์ •) ์ดํ›„ ํ•œ๋‹ฌ๋งŒ์ด๋‹ค. ์ฒซ๋ฒˆ์งธ ์ง„๋ฃŒ๋Š” ์ง„๋ฃŒ๋„ ์ง„๋ฃŒ์ง€๋งŒ ์‚ฐ๋™๊ฒ€์‚ฌ๋ฅผ ํ•˜๋Š๋ผ ์‹œ๊ฐ„์ด ๊ฝค ๊ฑธ๋ ธ์—ˆ๋Š”๋ฐ ์ด๋ฒˆ ์ง„๋ฃŒ์—์„œ๋Š” ์ž˜ ๋ณด๊ณ  ์žˆ๋Š”์ง€ ์ •๋„๋งŒ ํŒŒ์•…ํ•˜์˜€๋‹ค. ์„ ์ƒ๋‹˜๊ป˜์„œ๋Š” ๊ฐ€๋ฆผ์น˜๋ฃŒ๊ฐ€ ์ž˜๋˜๊ณ  ์žˆ๋‹ค ํ•˜์…จ๋‹ค. ์„ ์ƒ๋‹˜๊ป˜ ๊ฐ€๋ฆผํŒจ์น˜๋ฅผ ๋–ผ๋ฉด ๊ทธ๋ž˜๋„ ๋‹ค์‹œ ์‚ฌ์‹œ์ฒ˜๋Ÿผ ๋ณด์ธ๋‹ค๊ณ  ํ–ˆ๋”๋‹ˆ ๊ฐ€๋ฆผํŒจ์น˜์˜ ๋ชฉ์ ์€ ์‚ฌ์‹œ์˜ ๊ต์ •์ด ์•„๋‹ˆ๋ผ ์‹œ๋ ฅ ๊ต์ •์„ ์œ„ํ•œ ๊ฒƒ์ด๋ผ๊ณ  ํ•˜์…จ๋‹ค. ์‚ฌ์‹œ๊ฐ€ ์žˆ๋˜ ๋ˆˆ์ด ๋ฐ”๊นฅ์ชฝ์œผ๋กœ ํ–ฅํ•˜์งˆ ์•Š์•˜์—ˆ๋Š”๋ฐ(๋ˆˆ๋™์ž๋ฅผ ๊ตด๋ฆฐ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์„ ๋•Œ ์–ผ๊ตด์€ ์ •๋ฉด์„ ๋ณด์ง€๋งŒ ๋ˆˆ์•Œ๋งŒ ์˜†์œผ๋กœ ๊ฐ€๊ฒŒํ• ์ˆ˜์žˆ๋Š” ๊ฒƒ. ๋”ธ์€ ๋ฐ”๊นฅ์ชฝ์œผ๋กœ ๋™๊ณต์ด ๊ฐ€์งˆ ๋ชปํ–ˆ๋‹ค.) ๊ฐ€๋ฆผ์น˜๋ฃŒํ›„์—๋Š” ๊ฝค๋‚˜ ๋ฐ”๊นฅ์ชฝ์œผ๋กœ๋„ ๋™๊ณต์„ ์›€์ง์˜€๋‹ค. ๊ฐ€๋ฆผ์น˜๋ฃŒ๋ฅผ ๋‘ ๋‹ฌ ์ •๋„ ๋” ํ•˜๊ณ  ๋‹ค์‹œ ์ง„๋ฃŒ๋ฅผ ๋ณด๊ธฐ๋กœ ํ–ˆ๋‹ค. ๊ทธ๋ ‡๊ฒŒ ์ผ์ฃผ์ผ์ด ์ข€ ์ง€๋‚ฌ์„๊นŒ.. ์ •์ƒ๋ˆˆ์ฒ˜๋Ÿผ(์˜ค๋Š˜ ์ง„๋ฃŒ๋ณด๋‹ˆ ๊ทธ๋ ‡์ง„ .. 2023. 10. 31.
vue.js ๋ผ์šฐํ„ฐ ๋งํฌ์— ๋”ฐ๋ผ ๋ณ€ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ ์ž…ํ•™์ •๋ณด ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“œ๋Š” ์ค‘์ด๋‹ค. ์ปดํฌ๋„ŒํŠธ ์•ˆ์— router-link :to="/guide/notice" router-link :to="/guide/qna" ๋“ฑ์˜ ๋งํฌ๋ฅผ ๊ฑธ์–ด๋†“์œผ๋ฉด Guide๋ผ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๊ฒŒ ๋˜๋Š”๋ฐ Guide ๋ผ๋Š” ์ปดํฌ๋„ŒํŠธ ์•ˆ์— ์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ๋“ค์„ import ํ•ด๋†“๊ณ  $router.params์˜ ๊ฐ’์„ ์ฝ์–ด ํ•˜๋‹จ ์˜์—ญ์— ์ถœ๋ ฅํ•˜๊ฒŒ ๋œ๋‹ค. ์ฒ˜์Œ์—” div ํƒœ๊ทธ์— v-if๋ฅผ ๊ฑธ์–ด์„œ $router.params.board === "notice" ์‹์œผ๋กœ ์กฐ๊ฑด๋ฌธ์„ ๊ฑธ์–ด์•ผ ํ•˜๋‚˜. ์กฐ๊ฑด๋ฌธ์„ ํ•จ์ˆ˜๋กœ ๋งŒ๋“ค์–ด์•ผ ํ•˜๋‚˜ ํ•˜๋‹ค๊ฐ€ ์—„์ฒญ ์‹ฌํ”Œํ•œ ๋ฐฉ๋ฒ•์„ ์ฐพ๊ฒŒ๋๋‹ค. 1. data()์— ๋ณ€์ˆ˜ ์„ ์–ธ - selectedComponent๋Š” $router.params.board ๊ฐ’์ด ์žˆ์œผ๋ฉด ๊ทธ ๊ฐ’์ด set ๋˜๊ณ , ์•„๋‹ˆ๋ผ๋ฉด ๋ณด์—ฌ์ค„.. 2023. 10. 27.