{"id":458,"date":"2026-08-16T00:03:52","date_gmt":"2026-08-16T00:03:52","guid":{"rendered":"https:\/\/gilnas.synology.me\/wordpress\/458\/"},"modified":"2026-08-16T00:03:52","modified_gmt":"2026-08-16T00:03:52","slug":"vue-vapor-rc%ec%99%80-nuxt-island%c2%b7vite-%ec%84%a4%ec%a0%95-%ec%88%98%ec%a0%95%ec%9c%bc%eb%a1%9c-%eb%b3%b4%eb%8a%94-%ea%b2%80%ec%a6%9d-%ec%9a%b0%ec%84%a0-%eb%b0%b0%ed%8f%ac-validation-first-shipp","status":"publish","type":"post","link":"https:\/\/gilnas.synology.me\/wordpress\/458\/","title":{"rendered":"Vue Vapor RC\uc640 Nuxt Island\u00b7Vite \uc124\uc815 \uc218\uc815\uc73c\ub85c \ubcf4\ub294 \uac80\uc99d \uc6b0\uc120 \ubc30\ud3ec | Validation-First Shipping After Vue Vapor RC and Nuxt\u2013Vite Fixes"},"content":{"rendered":"
\"Vue<\/figure>\n

\uc694\uc57d:<\/strong> \uc774\ubc88 72\uc2dc\uac04\uc758 Nuxt\u00b7Vue\u00b7Vite \uc0dd\ud0dc\uacc4\ub294 \ub300\ud615 \uc548\uc815\ud310 \ub9b4\ub9ac\uc2a4\ubcf4\ub2e4 Vue 3.6 Vapor RC\uc758 \ud638\ud658\uc131 \ubcf4\uac15<\/strong>, Nuxt\uc758 Island\/Kit \uac1c\ubc1c \uacbd\ub85c \uc815\ub9ac, Vite \uc124\uc815 \ud0a4 \ucc98\ub9ac \uc218\uc815\ucc98\ub7fc \ubc30\ud3ec \uc804 \uac80\uc99d \ud488\uc9c8\uc744 \ub192\uc774\ub294 \ubcc0\ud654\uac00 \uc911\uc2ec\uc774\uc5c8\ub2e4. \uc6b4\uc601 \uc911\uc778 Nuxt \uc571\uc740 \uc0c8 \uae30\ub2a5\uc744 \uc11c\ub458\ub7ec \ucc44\ud0dd\ud558\uae30\ubcf4\ub2e4 RC\uc640 main \ube0c\ub79c\uce58 \ubcc0\uacbd\uc744 \ubd84\ub9ac\ud574 \uc7ac\ud604 \uac00\ub2a5\ud55c \ube4c\ub4dc\u00b7SSR\u00b7\uc0c1\ud638\uc791\uc6a9 \ud68c\uadc0 \ud14c\uc2a4\ud2b8\ub97c \uac15\ud654\ud560 \uc2dc\uc810\uc774\ub2e4.<\/p>\n

\ud575\uc2ec \ub2f5\ubcc0<\/h2>\n

Nuxt\/Vue \uac1c\ubc1c\uc790\uac00 \uc9c0\uae08 \ud574\uc57c \ud560 \uc77c\uc740 \ubb34\uc5c7\uc778\uac00?<\/strong> Vue 3.6.0-rc.4\ub294 \uc815\uc2dd(stable)\uc774 \uc544\ub2cc \uc0ac\uc804 \ub9b4\ub9ac\uc2a4\uc774\ubbc0\ub85c \ud504\ub85c\ub355\uc158 \uc804\uba74 \uc5c5\uadf8\ub808\uc774\ub4dc \ub300\uc0c1\uc774 \uc544\ub2c8\ub2e4. \ub2e4\ub9cc Vapor \uc2e4\ud5d8 \ud504\ub85c\uc81d\ud2b8\ub294 \uc774\ubca4\ud2b8 modifier, Transition, \uc911\ucca9 v-for<\/code>, \uc2a4\ud0c0\uc77c prop\uacfc \uad00\ub828\ub41c \ud68c\uadc0 \ud14c\uc2a4\ud2b8\ub97c \ucd94\uac00\ud560 \uadfc\uac70\uac00 \uc0dd\uacbc\ub2e4. Nuxt\uc640 Vite\uc758 \ucd5c\uadfc \ubcc0\uacbd\uc740 \ubaa8\ub450 main \ube0c\ub79c\uce58\uc758 \ubbf8\ucd9c\uc2dc \uc791\uc5c5<\/strong>\uc774\ubbc0\ub85c \ubc84\uc804 \ubc94\uc704\ub97c \uc62c\ub9ac\uae30\ubcf4\ub2e4 CI\uc5d0\uc11c CJS\/alias \ub85c\ub529, Server Island \uc790\uc0b0 \uc694\uccad, define<\/code> \ud0a4\ub97c \ud3ec\ud568\ud55c \uc124\uc815\uc744 \uac80\uc99d\ud558\ub294 \uc561\uc158\uc73c\ub85c \ubc14\uafb8\ub294 \uac83\uc774 \uc548\uc804\ud558\ub2e4.<\/p>\n

3\uc77c \uacb0\ub860: \uae30\ub2a5 \ub3c4\uc785\ubcf4\ub2e4 \u2018\uacbd\uacc4 \uc870\uac74\u2019 \uac80\uc99d\uc774 \uba3c\uc800\ub2e4<\/h2>\n

2026\ub144 8\uc6d4 13\uc77c~16\uc77c(KST) \uad00\ucc30 \ubc94\uc704\uc5d0\uc11c \ud655\uc778\ub41c \ubcc0\ud654\ub294 \ud504\ub860\ud2b8\uc5d4\ub4dc\uc758 \uc138 \uacbd\uacc4\uc5d0 \ubaa8\uc778\ub2e4. \uccab\uc9f8, Vue Vapor\ub294 \ucef4\ud30c\uc77c\ub7ec\uc640 \ub7f0\ud0c0\uc784\uc758 \uc0c1\ud0dc\u00b7\uc804\ud658\u00b7\ubaa9\ub85d \ub80c\ub354\ub9c1 \uacbd\uacc4\ub97c \uacc4\uc18d \ub2e4\ub4ec\uace0 \uc788\ub2e4. \ub458\uc9f8, Nuxt\ub294 Island \uc790\uc0b0 \uc694\uccad\uacfc Kit\uc758 \ubaa8\ub4c8 \ub85c\ub529 \uc2e4\ud328 \uacbd\ub85c\ub97c \uc190\ubcf4\uace0 \uc788\ub2e4. \uc14b\uc9f8, Vite\ub294 \ud2b9\uc218 \ubb38\uc790\uac00 \ub4e4\uc5b4\uac04 define<\/code> \ud0a4\uc640 CSS \ub300\uc0c1 \uc124\uc815\uc758 \ud574\uc11d \uaddc\uce59\uc744 \uc815\ub9ac\ud558\uace0 \uc788\ub2e4. \uc774\ub294 \u201c\uc0c8 \ubc84\uc804\uc774 \ub098\uc654\uc73c\ub2c8 \uc989\uc2dc \ubc30\ud3ec\u201d\ud560 \uadfc\uac70\uac00 \uc544\ub2c8\ub77c, \ud604\uc7ac \ud504\ub85c\uc81d\ud2b8\uc758 \ube4c\ub4dc \uc124\uc815\uacfc SSR \uacbd\ub85c\uac00 \uc774\ub7ec\ud55c \uacbd\uacc4 \uc870\uac74\uc744 \uc5b4\ub5bb\uac8c \ub2e4\ub8e8\ub294\uc9c0 \uc810\uac80\ud560 \uc2e0\ud638\ub2e4.<\/p>\n

1. Vue 3.6.0-rc.4: Vapor Mode\uc758 \uc804\ud658\u00b7\ubaa9\ub85d\u00b7\uc18d\uc131 \uacbd\uacc4 \ubcf4\uac15<\/h2>\n

\ud655\uc778\ub41c \uc0ac\uc2e4<\/h3>\n

Vue\ub294 8\uc6d4 14\uc77c Vue 3.6.0-rc.4<\/a>\ub97c npm\uc5d0 \ubc30\ud3ec\ud588\ub2e4. \uacf5\uc2dd minor CHANGELOG<\/a>\uc5d0\ub294 Vapor compiler\/runtime\uc5d0\uc11c \ubcd1\ud569\ub41c \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\uc758 modifier \ubcf4\uc874, Transition\uc744 \ud1b5\ud55c component root \uc804\ub2ec, \uc911\ucca9 \ubd84\uae30 \ud574\uc81c \ub4a4 \uc785\ub825 effect \uce90\uc2dc \ubcf4\uc874, \uc911\ucca9 fragment\uc758 child key \ubcf4\uc874, \uc120\uc5b8\ub41c style prop \uc815\uaddc\ud654 \ub4f1\uc758 \uc218\uc815\uc774 \uae30\ub85d\ub3fc \uc788\ub2e4.<\/p>\n

\uc758\ubbf8\uc640 \uc801\uc6a9<\/h3>\n

\uc774\ub294 Vapor\uac00 \uc2e4\ud5d8\uc801 \uacbd\ub85c\uc5d0\uc11c \uc815\uc2dd\uc131\uc73c\ub85c \uac00\uae4c\uc6cc\uc9c0\ub294 \uacfc\uc815\uc758 \ud638\ud658\uc131 \uc791\uc5c5\uc774\ub2e4. \ud2b9\ud788 v-for<\/code> \uc548\uc758 \ub3d9\uc801 slot\u00b7Transition\u00b7\ud3fc \uc785\ub825\uc774 \ud568\uaed8 \uc788\ub294 \ud654\uba74\uc740 \uc0c1\ud0dc \uc815\ub9ac \uc21c\uc11c\uc5d0 \ubbfc\uac10\ud558\ub2e4. \ud604\uc7ac stable \ud0dc\uadf8\ub294 Vue 3.5.41\uc774\uace0 3.6.0-rc.4\ub294 RC\ub77c\ub294 \uc810\uc744 \ubd84\uba85\ud788 \uad6c\ubd84\ud574\uc57c \ud55c\ub2e4. Vapor\ub97c \ud3c9\uac00 \uc911\uc778 \ud300\ub9cc \ubcc4\ub3c4 \ube0c\ub79c\uce58\uc5d0\uc11c E2E \uc2dc\ub098\ub9ac\uc624\ub97c \ub9cc\ub4e4\uace0, \uc77c\ubc18 Nuxt \uc11c\ube44\uc2a4\ub294 stable \uc758\uc874\uc131\uc744 \uc720\uc9c0\ud558\uba74\uc11c RC\uc758 \uc218\uc815 \uc601\uc5ed\uc744 \ud68c\uadc0 \ud14c\uc2a4\ud2b8 \ubaa9\ub85d\uc73c\ub85c \ucc38\uace0\ud558\ub294 \ud3b8\uc774 \ud569\ub9ac\uc801\uc774\ub2e4.<\/p>\n

2. Nuxt main: Kit\uc758 CJS\/alias \ub85c\ub529 \ud68c\ubcf5\uacfc \uc758\uc874\uc131 \uacbd\ub7c9\ud654<\/h2>\n

\ud655\uc778\ub41c \uc0ac\uc2e4<\/h3>\n

Nuxt main\uc5d0\ub294 8\uc6d4 15\uc77c CJS global \ubc0f alias \ub85c\ub529 \uc2e4\ud328\ub97c jiti\ub85c \uc7ac\uc2dc\ub3c4<\/a>\ud558\ub294 Kit \uc218\uc815\uc774 \ubc18\uc601\ub410\ub2e4. 8\uc6d4 14\uc77c\uc5d0\ub294 confbox\uc640 pkg-types\ub97c \uc758\uc874\uc131\uc5d0\uc11c \uc81c\uac70<\/a>\ud558\ub294 \uc131\ub2a5\/\uc758\uc874\uc131 \uc815\ub9ac\ub3c4 \ub4e4\uc5b4\uac14\ub2e4.<\/p>\n

\uc758\ubbf8\uc640 \uc801\uc6a9<\/h3>\n

\ub450 \ud56d\ubaa9\uc740 \ucd9c\uc2dc\ub41c Nuxt \ubc84\uc804\uc774 \uc544\ub2c8\ub77c main\uc758 \ubbf8\ucd9c\uc2dc \ubcc0\uacbd<\/strong>\uc774\ub2e4. \ub530\ub77c\uc11c \uc774\ub97c \ud574\uacb0\ucc45\uc73c\ub85c \uac00\uc815\ud574 Nuxt\ub97c Git \ube0c\ub79c\uce58\uc5d0 \uace0\uc815\ud558\uba74 \uc548 \ub41c\ub2e4. \ub300\uc2e0 \ubaa8\ub178\ub808\ud3ec, \uc0ac\ub0b4 alias, CJS \uae30\ubc18 \uc124\uc815 \ud30c\uc77c, \ub7f0\ud0c0\uc784\ubcc4 package resolution\uc744 \uc4f0\ub294 \ud504\ub85c\uc81d\ud2b8\ub294 CI\uc5d0 nuxi prepare<\/code>, production build, \uc11c\ubc84 \uae30\ub3d9\uc744 \ubaa8\ub450 \ud3ec\ud568\ud574\uc57c \ud55c\ub2e4. \uc758\uc874\uc131 \uc81c\uac70\ub294 \uc124\uce58\u00b7\ud30c\uc2f1 \ube44\uc6a9\uc744 \uc904\uc774\ub824\ub294 \ubc29\ud5a5\uc744 \ubcf4\uc5ec \uc8fc\uc9c0\ub9cc, \uc2e4\uc81c \uac1c\uc120 \uc218\uce58\ub294 \uac01 \ud504\ub85c\uc81d\ud2b8\uc758 lockfile\uacfc \uce90\uc2dc \uc0c1\ud0dc\uc5d0\uc11c \uce21\uc815\ud574\uc57c \ud55c\ub2e4.<\/p>\n

3. Nuxt main: Server Island \uc790\uc0b0 \uc911\ubcf5 \uc694\uccad\uc744 \ud68c\uadc0 \ud56d\ubaa9\uc73c\ub85c<\/h2>\n

\ud655\uc778\ub41c \uc0ac\uc2e4<\/h3>\n

8\uc6d4 14\uc77c Nuxt main\uc5d0\ub294 \uc911\ubcf5 Island asset \uc694\uccad\uc744 \ud53c\ud558\ub294 \uc218\uc815<\/a>\uacfc \uac00\uc0c1 \ubaa8\ub4c8 load hook\uc744 id\ub85c \ud544\ud130\ub9c1\ud558\ub294 \uc131\ub2a5 \ubcc0\uacbd<\/a>\uc774 \ubc18\uc601\ub410\ub2e4. \uc774 \uc5ed\uc2dc \uc544\uc9c1 \ub9b4\ub9ac\uc2a4 \ub178\ud2b8\uac00 \ubd99\uc740 \ubc30\ud3ec\ud310\uc774 \uc544\ub2cc main \ube0c\ub79c\uce58 \uc791\uc5c5\uc774\ub2e4.<\/p>\n

\uc758\ubbf8\uc640 \uc801\uc6a9<\/h3>\n

Server Island\ub97c \uc4f0\ub294 \ud398\uc774\uc9c0\uc5d0\uc11c \uc790\uc0b0 \uc694\uccad\uc774 \uc911\ubcf5\ub418\uba74 \ucd08\uae30 \uc804\uc1a1\ub7c9\ubfd0 \uc544\ub2c8\ub77c hydration \ud0c0\uc774\ubc0d\uacfc \uce90\uc2dc \ud6a8\uc728\ub3c4 \ud754\ub4e4\ub9b4 \uc218 \uc788\ub2e4. \ub2f9\uc7a5 \ud328\uce58\uac00 \ubc30\ud3ec\ub410\ub2e4\uace0 \ubcfc \uc218 \uc5c6\uc73c\ubbc0\ub85c, Chrome DevTools \ub610\ub294 RUM\uc5d0\uc11c Island\uac00 \uc788\ub294 \ub300\ud45c \ud398\uc774\uc9c0\uc758 JS\/CSS \uc694\uccad \uc218\uc640 waterfall\uc744 \uae30\uc900\uc120\uc73c\ub85c \ub0a8\uaca8\uc57c \ud55c\ub2e4. \uac19\uc740 \uc790\uc0b0\uc774 \ub450 \ubc88 \ub0b4\ub824\uc624\ub294\uc9c0, route navigation \ub4a4 \uc7ac\uc694\uccad\uc774 \ubc1c\uc0dd\ud558\ub294\uc9c0, CDN cache key\uac00 \uc77c\uad00\uc801\uc778\uc9c0\ub97c \ub9b4\ub9ac\uc2a4 \uc5c5\uadf8\ub808\uc774\ub4dc \uc804\ud6c4\uc5d0 \ube44\uad50\ud558\uc790.<\/p>\n

4. Vite main: \ud2b9\uc218 define<\/code> \ud0a4\uc640 CSS target \uc124\uc815\uc744 \uba85\uc2dc\uc801\uc73c\ub85c<\/h2>\n

\ud655\uc778\ub41c \uc0ac\uc2e4<\/h3>\n

Vite main\uc740 8\uc6d4 13\uc77c \uc774\uc2a4\ucf00\uc774\ud504\ub41c \uc810\uc744 \ub9e4\uce6d\ud574 $<\/code>-\uc811\ub450 define<\/code> \ud0a4\ub97c \uc9c0\uc6d0<\/a>\ud558\ub3c4\ub85d \uc218\uc815\ud588\ub2e4. \uac19\uc740 \ub0a0 \ubb38\uc11c\ub294 CSS target \uc6b0\uc120\uc21c\uc704<\/a>\ub97c \uba85\uc2dc\ud588\ub2e4. \ucd5c\uc2e0 \uc548\uc815 \ub9b4\ub9ac\uc2a4\ub294 Vite 8.2.1(8\uc6d4 6\uc77c)\uc774\uba70, \uc774 \ub450 \ubcc0\uacbd\uc740 \uc544\uc9c1 \ubbf8\ucd9c\uc2dc main \uc791\uc5c5\uc774\ub2e4.<\/p>\n

\uc758\ubbf8\uc640 \uc801\uc6a9<\/h3>\n

\ud658\uacbd \ubcc0\uc218\ub098 \ube4c\ub4dc \uc0c1\uc218\uc5d0\uc11c \ud2b9\uc218 \ud0a4\ub97c \uc4f0\ub294 \uacbd\uc6b0\uc5d0\ub294 define \uce58\ud658\uc774 \uc870\uc6a9\ud788 \uc2e4\ud328\ud558\uc9c0 \uc54a\ub294\uc9c0 \ube4c\ub4dc \uc0b0\ucd9c\ubb3c\uc744 \uac80\uc0ac\ud574\uc57c \ud55c\ub2e4. CSS \ubcc0\ud658 \uacb0\uacfc\uac00 \ube0c\ub77c\uc6b0\uc800 \uc9c0\uc6d0 \uc815\ucc45\uacfc \ub9de\ub294\uc9c0\ub3c4 \uc911\uc694\ud558\ub2e4. \ud504\ub85c\uc81d\ud2b8\uc758 vite.config.*<\/code>\uc5d0\uc11c define<\/code>, build.target<\/code>, cssTarget<\/code>\uc744 \uc758\ub3c4\uc801\uc73c\ub85c \uc120\uc5b8\ud558\uace0, \ub808\uac70\uc2dc \ube0c\ub77c\uc6b0\uc800\uac00 \ub300\uc0c1\uc774\uba74 \ubc88\ub4e4 CSS\uc640 polyfill \uc804\ub7b5\uc744 CI\uc758 \uc2e4 \ube0c\ub77c\uc6b0\uc800 \uac80\uc0ac\uc5d0 \ud3ec\ud568\ud558\ub294 \ud3b8\uc774 \uc88b\ub2e4.<\/p>\n

5. Unhead 3.3.2: head \uad00\ub9ac\ub3c4 \uc7a0\uae08 \ud30c\uc77c \ub2e8\uc704\ub85c \uad00\ucc30<\/h2>\n

\ud655\uc778\ub41c \uc0ac\uc2e4<\/h3>\n

Nuxt\uc758 \uba54\ud0c0\ub370\uc774\ud130 \uacc4\uce35\uacfc \ub9de\ub2ff\ub294 Unhead\ub294 8\uc6d4 13\uc77c v3.3.2 \ub9b4\ub9ac\uc2a4 \ucee4\ubc0b<\/a>\uc744 \ub0a8\uacbc\ub2e4. \uc774 \ubc94\uc704\uc5d0\uc11c Nuxt \ub610\ub294 Nitro\uc758 \uc0c8 \uc548\uc815 \ub9b4\ub9ac\uc2a4\ub294 \uacf5\uc2dd GitHub Releases\uc640 npm \ubc30\ud3ec \uc2dc\uac01 \uae30\uc900\uc73c\ub85c \ud655\uc778\ub418\uc9c0 \uc54a\uc558\ub2e4. \ub530\ub77c\uc11c \uad00\ub828 \ubcc0\uacbd\uc744 \u2018Nuxt \ub7f0\ud0c0\uc784 \uc5c5\ub370\uc774\ud2b8\u2019\ub85c \ud655\ub300 \ud574\uc11d\ud558\uc9c0 \uc54a\ub294 \uac83\uc774 \uc815\ud655\ud558\ub2e4.<\/p>\n

\uc758\ubbf8\uc640 \uc801\uc6a9<\/h3>\n

head \ud0dc\uadf8\ub294 SEO, canonical, OG \uc774\ubbf8\uc9c0, hydration \uacb0\uacfc\uc640 \ud568\uaed8 \uac80\uc99d\ud574\uc57c \ud55c\ub2e4. \uc7a0\uae08 \ud30c\uc77c \uac31\uc2e0\uc73c\ub85c Unhead\uac00 \ubc14\ub00c\ub294 \uacbd\uc6b0\uc5d0\ub294 SSR HTML\uacfc \ud074\ub77c\uc774\uc5b8\ud2b8 \uc804\ud658 \ub4a4\uc758 title, meta description, canonical, robots \ud0dc\uadf8\ub97c \uc2a4\ub0c5\uc0f7\uc73c\ub85c \ube44\uad50\ud558\uc790. \uc774\ub294 \ub9b4\ub9ac\uc2a4 \uaddc\ubaa8\uc640 \ubb34\uad00\ud558\uac8c \uac80\uc0c9 \ub178\ucd9c \ubc0f \uacf5\uc720 \ubbf8\ub9ac\ubcf4\uae30 \uc624\ub958\ub97c \uc870\uae30\uc5d0 \ucc3e\ub294 \uc800\ube44\uc6a9 \uc810\uac80\uc774\ub2e4.<\/p>\n

\ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc790 \uccb4\ud06c\ub9ac\uc2a4\ud2b8<\/h2>\n