{"id":462,"date":"2026-08-17T00:03:26","date_gmt":"2026-08-17T00:03:26","guid":{"rendered":"https:\/\/gilnas.synology.me\/wordpress\/462\/"},"modified":"2026-08-17T00:03:26","modified_gmt":"2026-08-17T00:03:26","slug":"nuxt%c2%b7vue-ssr%c2%b7vapor%c2%b7%ed%85%8c%ec%8a%a4%ed%8a%b8-%ec%9a%b4%ec%98%81-%ec%a0%90%ea%b2%80-three-day-ssr-vapor-and-test-operations","status":"publish","type":"post","link":"https:\/\/gilnas.synology.me\/wordpress\/462\/","title":{"rendered":"Nuxt\u00b7Vue SSR\u00b7Vapor\u00b7\ud14c\uc2a4\ud2b8 \uc6b4\uc601 \uc810\uac80 | Three-Day SSR, Vapor and Test Operations"},"content":{"rendered":"
\"Nuxt\u00b7Vue<\/figure>\n

\uc694\uc57d:<\/strong> 2026\ub144 8\uc6d4 14~17\uc77c Nuxt\/Vue \ud504\ub860\ud2b8\uc5d4\ub4dc \uc0dd\ud0dc\uacc4\uc758 3\uc77c \ud750\ub984\uc740 Vue 3.6 Vapor RC \uc548\uc815\ud654<\/strong>, Nuxt\uc758 \uc2a4\ud2b8\ub9ac\ubc0d CSP\u00b7\ube4c\ub4dc \uce90\uc2dc\u00b7\ubaa8\ub4c8 \ub85c\ub529 \ubcf4\uac15<\/strong>, \uadf8\ub9ac\uace0 Vitest \uc7ac\uc2dc\uc791\u00b7\ub3d9\uc2dc\uc131 \ud14c\uc2a4\ud2b8 \uacbd\ub85c \uc815\ube44<\/strong>\ub85c \ubaa8\uc778\ub2e4. \uc9c0\uae08 \uc6b4\uc601 \uc911\uc778 Nuxt \uc571\uc740 \ub2f9\uc7a5 \ub300\uaddc\ubaa8 \uc5c5\uadf8\ub808\uc774\ub4dc\ubcf4\ub2e4 CSP \uc2a4\ud2b8\ub9ac\ubc0d, \uce90\uc2dc \uc7ac\ud604\uc131, \ud14c\uc2a4\ud2b8 \uc6cc\ucee4\ub97c \ubd84\ub9ac \uac80\uc99d\ud558\ub294 \uac83\uc774 \uc548\uc804\ud558\ub2e4.<\/p>\n

\ud575\uc2ec \ub2f5\ubcc0: \uc774\ubc88 3\uc77c\uc5d0 Nuxt\/Vue \ud300\uc774 \ud574\uc57c \ud560 \uc77c\uc740?<\/h2>\n

\uc774\ubc88 \uae30\uac04\uc758 \uc720\uc77c\ud55c \uc0c8 \ud328\ud0a4\uc9c0 \ub9b4\ub9ac\uc988\ub294 Vue 3.6.0-rc.4<\/a>\uc774\uba70, \uc774\ub294 \uc815\uc2dd \uc548\uc815\ud310\uc774 \uc544\ub2cc prerelease<\/strong>\ub2e4. \ubc18\uba74 Nuxt\uc640 Vitest\uc5d0\uc11c \ud655\uc778\ub41c \ucd5c\uadfc \ubcc0\ud654\ub294 \ubaa8\ub450 \uac01 \uc800\uc7a5\uc18c\uc758 main \ube0c\ub79c\uce58 \ucee4\ubc0b<\/strong>\uc73c\ub85c, \uc544\uc9c1 \ubc30\ud3ec \uac00\ub2a5\ud55c \ub9b4\ub9ac\uc988\ub85c \uac04\uc8fc\ud558\uba74 \uc548 \ub41c\ub2e4. \ub530\ub77c\uc11c \ud504\ub85c\ub355\uc158 \uc758\uc874\uc131\uc744 \ubb34\uc870\uac74 \uc62c\ub9ac\uae30\ubcf4\ub2e4 \uc2a4\ud14c\uc774\uc9d5\uc5d0\uc11c Vapor \uc804\ud658 \ud6c4\ubcf4, SSR \uc2a4\ud2b8\ub9ac\ubc0d CSP, \ube4c\ub4dc \uce90\uc2dc, watch \uc7ac\uc2dc\uc791 \ud14c\uc2a4\ud2b8\ub97c \uba3c\uc800 \uc7ac\ud604\u00b7\uad00\ucc30\ud558\ub77c\ub294 \uac83\uc774 \uc774 \ub9ac\ud3ec\ud2b8\uc758 \uacb0\ub860\uc774\ub2e4.<\/p>\n

3\uc77c \uacb0\ub860<\/h2>\n

\uc0ac\uc2e4:<\/strong> Vue 3.6 RC\ub294 Vapor\uc758 Transition, \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec, \uc911\ucca9 fragment\u00b7v-for\u00b7\uc18d\uc131\/\uce90\uc2dc \ucc98\ub9ac\ub97c \uacc4\uc18d \ubcf4\uc644\ud588\ub2e4. Nuxt main\uc5d0\ub294 \uc2a4\ud2b8\ub9ac\ubc0d \uc751\ub2f5 CSP nonce\uc758 \uc815\ud655\ud55c \uc18d\uc131 \ub9e4\uce6d, \uc808\ub300 \uacbd\ub85c \uae30\ubc18 \uce90\uc2dc \ubb34\uc2dc \uac80\uc0ac, CJS \uc804\uc5ed\/alias \ub85c\ub529 \uc7ac\uc2dc\ub3c4 \uac1c\uc120\uc774 \ub4e4\uc5b4\uc654\ub2e4. Vitest main\uc5d0\ub294 \uc7ac\uc2dc\uc791 \ub4a4 rerun \uc18c\uc720\uad8c\uacfc \uc804\uc5ed \ub3d9\uc2dc\uc131 \uc81c\ud55c\uc744 \ub2e4\ub8e8\ub294 \uc218\uc815\uc774 \ub4e4\uc5b4\uc654\ub2e4.<\/p>\n

\ud574\uc11d:<\/strong> \uc774 \ubcc0\ud654\ub4e4\uc740 \uae30\ub2a5\uc744 \ud06c\uac8c \ucd94\uac00\ud558\ub294 \ub274\uc2a4\ubcf4\ub2e4 SSR \ubcf4\uc548 \uacbd\uacc4, \uacb0\uc815\uc801\uc778 \ube4c\ub4dc \uc785\ub825, \uac1c\ubc1c \uc11c\ubc84\/\ud14c\uc2a4\ud2b8 \ub7ec\ub108\uc758 \uc7ac\ud604\uc131<\/em>\uc744 \ub2e4\ub4ec\ub294 \ud750\ub984\uc774\ub2e4. Nuxt \ud504\ub85c\uc81d\ud2b8\uc758 \uc6b4\uc601 \uc704\ud5d8\uc740 \ud504\ub808\uc784\uc6cc\ud06c \uc774\ub984\ubcf4\ub2e4\ub3c4 CSP \ud5e4\ub354\uc640 HTML \uc2a4\ud2b8\ub9bc\uc758 \uacb0\ud569, \uce90\uc2dc \ud0a4\uac00 \uacbd\ub85c\ub97c \ud574\uc11d\ud558\ub294 \ubc29\uc2dd, worker\uac00 \uc885\ub8cc\u00b7\uc7ac\uc2dc\uc791\ub418\ub294 \uacbd\ub85c\uc5d0\uc11c \ucee4\uc9c8 \uc218 \uc788\ub2e4.<\/p>\n

\ud750\ub984 1: Vue 3.6 Vapor RC\ub294 \u201c\ub3c4\uc785\u201d\ubcf4\ub2e4 \uc0c1\ud638\uc6b4\uc6a9 \ud68c\uadc0 \ud14c\uc2a4\ud2b8 \ub2e8\uacc4<\/h2>\n

Vue 3.6.0-rc.4: Vapor\uc758 Transition\u00b7\ub9ac\uc2a4\ud2b8\u00b7\uc18d\uc131 \ucc98\ub9ac \ubcf4\uc644<\/h3>\n

8\uc6d4 14\uc77c \uacf5\uac1c\ub41c Vue 3.6.0-rc.4 \ub9b4\ub9ac\uc988<\/a>\uc640 minor \ube0c\ub79c\uce58 changelog<\/a>\uc5d0\ub294 \ubcd1\ud569\ub41c \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec modifier \ubcf4\uc874, Transition\uc744 \ud1b5\ud55c \ucef4\ud3ec\ub10c\ud2b8 root \uc804\ub2ec, \uc911\ucca9 fragment\uc758 child key \ubcf4\uc874, \uc911\ucca9 branch \uc815\ub9ac \uc2dc input effect\/cache \ubcf4\uc874, \uc120\uc5b8\ub41c style prop \uc815\uaddc\ud654\uac00 \uba85\uc2dc\ub3fc \uc788\ub2e4. \uc989 Vapor \ucef4\ud30c\uc77c\ub7ec\u00b7\ub7f0\ud0c0\uc784\uc758 \uace0\ub09c\ub3c4 \uacbd\uacc4\u2014Transition, \ub3d9\uc801 \ub9ac\uc2a4\ud2b8, slot\/root, \uce90\uc2dc\u2014\uac00 \uc774\ubc88 RC\uc758 \ucd08\uc810\uc774\ub2e4.<\/p>\n

\uc2dc\uc0ac\uc810:<\/strong> Vapor\ub97c \uc2e4\ud5d8\ud558\ub294 Nuxt\/Vue \ud300\uc740 \uc815\uc801 \ud398\uc774\uc9c0 \ubca4\uce58\ub9c8\ud06c\ub9cc\uc73c\ub85c \ud310\ub2e8\ud558\uc9c0 \ub9d0\uc544\uc57c \ud55c\ub2e4. v-for<\/code> \ub0b4 \uc785\ub825 \ud3fc, \uc911\ucca9 \uc870\uac74\ubd80 \ub80c\ub354\ub9c1, Transition, \ub3d9\uc801 \uc2ac\ub86f, style\/class prop\uc744 \ud55c \ubb36\uc74c\uc73c\ub85c \ub9cc\ub4e0 \ube0c\ub77c\uc6b0\uc800 \ud68c\uadc0 \ud14c\uc2a4\ud2b8\uac00 \ud544\uc694\ud558\ub2e4. npm \ucd5c\uc2e0 \uc548\uc815 \ud0dc\uadf8\ub294 \uc5ec\uc804\ud788 Vue 3.5.41\uc774\ubbc0\ub85c, rc.4\ub294 lockfile\uc5d0 \uc758\ub3c4\uc801\uc73c\ub85c \uaca9\ub9ac\ud55c \uc2e4\ud5d8 \ud658\uacbd\uc5d0\uc11c\ub9cc \ud3c9\uac00\ud558\ub294 \ud3b8\uc774 \ub9de\ub2e4.<\/p>\n

\ud750\ub984 2: Nuxt main\uc740 SSR \ubcf4\uc548\uacfc \ube4c\ub4dc \uc785\ub825\uc758 \uc815\ud655\ub3c4\ub97c \ub2e4\ub4ec\uace0 \uc788\ub2e4<\/h2>\n

\uc2a4\ud2b8\ub9ac\ubc0d CSP nonce: \uc18d\uc131 \ub9e4\uce6d\uc744 \ub354 \uc5c4\uaca9\ud558\uac8c<\/h3>\n

8\uc6d4 16\uc77c Nuxt main\uc758 Nitro \uc2a4\ud2b8\ub9ac\ubc0d CSP nonce \uc218\uc815 \ucee4\ubc0b<\/a>\uc740 nonce \uc18d\uc131\uc744 \uc815\ud655\ud788 \ub9e4\uce6d\ud558\ub3c4\ub85d renderer\uc640 \uc804\uc6a9 \uc720\ud2f8\u00b7\ud14c\uc2a4\ud2b8\ub97c \ubcf4\uc644\ud55c\ub2e4. \uc774\ub294 \ub9b4\ub9ac\uc988\ub418\uc9c0 \uc54a\uc740 \uac1c\ubc1c \ube0c\ub79c\uce58 \uc791\uc5c5<\/strong>\uc774\uc9c0\ub9cc, SSR HTML\uc744 \uc2a4\ud2b8\ub9ac\ubc0d\ud558\uace0 CSP nonce\ub97c \uc4f0\ub294 \uc11c\ube44\uc2a4\uc5d0\ub294 \uc810\uac80 \uc2e0\ud638\ub2e4.<\/p>\n

\uac1c\ubc1c\uc790 \uc561\uc158:<\/strong> \uc751\ub2f5 \ud5e4\ub354\uc758 Content-Security-Policy<\/code> nonce\uc640 \ucd5c\ucd08 HTML\uc758 script\/style nonce\uac00 \uac19\uc740 \uc694\uccad \ub2e8\uc704\uc5d0\uc11c \uc77c\uce58\ud558\ub294\uc9c0 \ud655\uc778\ud558\uace0, nonce\uc640 \ube44\uc2b7\ud55c \ubb38\uc790\uc5f4\uc774 \ud3ec\ud568\ub41c \uc77c\ubc18 \uc18d\uc131\uc774 \uc798\ubabb \ucc98\ub9ac\ub418\uc9c0 \uc54a\ub294 fixture\ub97c \ucd94\uac00\ud55c\ub2e4. \uc774 \ucee4\ubc0b \uc790\uccb4\ub97c \ud328\uce58\ub85c \uac00\uc838\uc624\uae30\ubcf4\ub2e4, \ub2e4\uc74c Nuxt \ub9b4\ub9ac\uc988 \ub178\ud2b8\uc5d0 \ud3ec\ud568\ub418\ub294\uc9c0 \ud655\uc778\ud55c \ub4a4 \uc5c5\uadf8\ub808\uc774\ub4dc\ud55c\ub2e4.<\/p>\n

\ube4c\ub4dc \uce90\uc2dc\uc640 config\/module \ub85c\ub529: \uacbd\ub85c\u00b7CJS \uacbd\uacc4\uac00 \ud575\uc2ec<\/h3>\n

\uac19\uc740 \ub0a0\uc758 build cache ignore \uac80\uc0ac \uc218\uc815<\/a>\uc740 \uc808\ub300 \uacbd\ub85c\ub97c \uc804\ub2ec\ud558\ub3c4\ub85d \ubc14\uafb8\uace0 \uce90\uc2dc \ud14c\uc2a4\ud2b8\ub97c \ud655\uc7a5\ud588\ub2e4. \ub610\ud55c 8\uc6d4 15\uc77c\uc758 Nuxt Kit\uc758 jiti \uc7ac\uc2dc\ub3c4 \uc218\uc815<\/a>\uc740 CJS global \ubc0f alias \ub85c\ub529 \uc2e4\ud328\ub97c \uc7ac\uc2dc\ub3c4 \uacbd\ub85c\ub85c \ubcf4\ub0b4\uba70 loader\/config\/module install \ud14c\uc2a4\ud2b8\ub97c \ucd94\uac00\ud588\ub2e4. 8\uc6d4 14\uc77c\uc758 Kit \uc758\uc874\uc131 \uc815\ub9ac<\/a>\ub3c4 config\uc640 package.json \ud310\ub3c5 \uacbd\ub85c\ub97c \uc790\uccb4\ud654\ud558\ub294 \ubc29\ud5a5\uc774\ub2e4. \uc774 \uc138 \ud56d\ubaa9\ub3c4 \ubaa8\ub450 main \ucee4\ubc0b\uc774\uba70 \uc544\uc9c1 \ub9b4\ub9ac\uc988\uac00 \uc544\ub2c8\ub2e4.<\/p>\n

\uc2dc\uc0ac\uc810:<\/strong> \ubaa8\ub178\ub808\ud3ec, \uc2ec\ubcfc\ub9ad \ub9c1\ud06c, CI worktree, \ubcc4\uce6d \uae30\ubc18 Nuxt \ubaa8\ub4c8\uc744 \ud568\uaed8 \uc4f0\ub294 \ud300\uc740 \u201c\ub85c\uceec\uc5d0\uc11c\ub294 \ub418\uc9c0\ub9cc CI \uce90\uc2dc\uc5d0\uc11c\ub9cc \ud2c0\ub9b0\u201d \ubb38\uc81c\ub97c \uc6b0\uc120 \uac10\uc2dc\ud574\uc57c \ud55c\ub2e4. \uacbd\ub85c \ubb38\uc790\uc5f4\uc774 \uc0c1\ub300\/\uc808\ub300\ub85c \ubc14\ub00c\ub294 \uc870\uac74\uacfc CommonJS \uc758\uc874 \ubaa8\ub4c8\uc744 \ud3ec\ud568\ud55c \ucd5c\uc18c \uc7ac\ud604 fixture\ub97c CI\uc5d0 \ub0a8\uaca8 \ub450\uba74 \ub2e4\uc74c \ub9b4\ub9ac\uc988 \uac80\uc99d \ube44\uc6a9\uc744 \ub0ae\ucd9c \uc218 \uc788\ub2e4.<\/p>\n

\ud750\ub984 3: Vitest main\uc740 watch \uc7ac\uc2dc\uc791\uacfc \ub3d9\uc2dc\uc131 \uc81c\uc5b4\ub97c \uc190\ubcf4\uace0 \uc788\ub2e4<\/h2>\n

8\uc6d4 16\uc77c Vitest main \ucee4\ubc0b<\/a>\uc740 \uc7ac\uc2dc\uc791 \ud6c4 rerun\uc758 \uc18c\uc720\uad8c\uc744 \uc870\uc815\ud558\uace0 worker\uc5d0\uc11c process.exit<\/code>\ub97c \uacc4\uc18d \ube44\ud65c\uc131\ud654\ud558\ub294 \ubcc0\uacbd\uc744 \ub2f4\uc558\ub2e4. 8\uc6d4 14\uc77c\uc758 \ubcc4\ub3c4 main \ucee4\ubc0b<\/a>\uc740 \ud14c\uc2a4\ud2b8 lifecycle \uc804\uc5ed \ub3d9\uc2dc\uc131 \uc81c\ud55c\uc744 \ubcf5\uad6c\ud55c\ub2e4. \ub458 \ub2e4 \uc544\uc9c1 \uc815\uc2dd \ub9b4\ub9ac\uc988\uac00 \uc544\ub2c8\uba70, \ucd5c\uc2e0 \uc548\uc815\ud310\uc740 v4.1.10\uc774\ub2e4.<\/p>\n

\uc2dc\uc0ac\uc810:<\/strong> Nuxt \uc571\uc758 E2E\u00b7\ucef4\ud3ec\ub10c\ud2b8 \ud14c\uc2a4\ud2b8\uac00 watch \ubaa8\ub4dc \uc7ac\uc2dc\uc791\uc774\ub098 \uc81c\ud55c\ub41c CI runner\uc5d0\uc11c \uac04\ud5d0\uc801\uc73c\ub85c \uba48\ucd98\ub2e4\uba74, \ub2e4\uc74c Vitest \ub9b4\ub9ac\uc988\uc758 \ud6c4\ubcf4 \ubcc0\uacbd\uc744 \ucd94\uc801\ud560 \uac00\uce58\uac00 \uc788\ub2e4. \ud558\uc9c0\ub9cc main\uc744 \ud504\ub85c\ub355\uc158 CI\uc5d0 \uace0\uc815\ud558\ub294 \ub300\uc2e0 \ud604\uc7ac \ubc84\uc804\uc5d0\uc11c worker \uc885\ub8cc, rerun, \ub3d9\uc2dc \ud14c\uc2a4\ud2b8 \uc0c1\ud55c\uc744 \ub85c\uadf8\ub85c \uad00\uce21\ud558\uace0 \uc7ac\ud604 \uc800\uc7a5\uc18c\ub97c \uc900\ube44\ud558\ub294 \uac83\uc774 \ubcf4\uc218\uc801\uc778 \uc811\uadfc\uc774\ub2e4.<\/p>\n

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