๋ฐฉ๊ธ Vue3 (๋ฒ ํ) ์ฑ์ผ๋ก ์คํ ๋ฆฌ ๋ถ์ ์คํํ๋ ค๊ณ ํ๋๋ฐ ๋ช ๊ฐ์ง ์ค๋ฅ๊ฐ ๋ฐ์ํ์ต๋๋ค. ์ผ๋ถ๋ Webpack ๊ตฌ์ฑ์ ๋ณํฉํ๊ณ Vue3 ๋ก๋ ํ๋ฌ๊ทธ์ธ์ ํธ์ํ๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์์์์ต๋๋ค.
const wltConfig = require('../apps/webpack-dev');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
stories: ['../**/*.stories.[tj]s'],
webpackFinal: (config, ...args) => {
config.plugins.push(new VueLoaderPlugin());
return { ...config, module: { ...config.module, rules: wltConfig().module.rules } };
}
};
์ฌ์ ํ ์ ธ์์ ๊ฒฝ๊ณ ์ ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค.
WARN Failed to load preset: "/home/tobi/Projects/modul/portal/client/node_modules/@storybook/vue/dist/server/framework-preset-vue.js"
ERR! Error: Cannot find module 'vue-loader/lib/plugin'
โ ๊ทธ๋ผ์๋ ๋ถ๊ตฌํ๊ณ ์คํ ๋ฆฌ ๋ถ์ ๋ธ๋ผ์ฐ์ ๋ฅผ ๊ตฌ์ถํ๊ณ ์ฝ๋ ๋ค. ์ด ์ค๋ฅ ๋ฉ์์ง๊ฐ ๋ถ์ด ์์ต๋๋ค.
Uncaught TypeError: _vue.default is not a constructor
at Object../node_modules/@storybook/vue/dist/client/preview/render.js (render.js:43)
at __webpack_require__ (bootstrap:848)
at fn (bootstrap:150)
at Object../node_modules/@storybook/vue/dist/client/preview/index.js (index.js:24)
at __webpack_require__ (bootstrap:848)
at fn (bootstrap:150)
at Object.<anonymous> (index.js:55)
at Object../node_modules/@storybook/vue/dist/client/index.js (index.js:59)
at __webpack_require__ (bootstrap:848)
at fn (bootstrap:150)
์ด๊ฒ๋ณด๋ค ๋ ๋์ ์ ๊ทผ๋ฒ์ด ์์ต๋๊น? ๋๋ ์ด์ผ๊ธฐ ์ฑ ์ ๋ํ ์ด n00b์ด๋ฏ๋ก ์ด๋ค ์กฐ์ธ์ด๋ ๋์์ ๋ํด ๊ธฐ๋ปํ ๊ฒ์ ๋๋ค. (์ ์ด๋ ๋งํ ์์๋ ํ ์๋ฏธ์๋ ๊ฒฐ๊ณผ์์ด vue3์ ๋ํ ๋ฌธ์ ๋ฅผ ๊ฒ์ํ์ต๋๋ค.)
Automention : ์๋ ํ์ธ์ @ backbone87 @pocka , ๋น์ ์ ํ๊ทธ๋์์ต๋๋ค! ์ฌ๊ธฐ ์ ์ข ์ฃผ์ค ๋์?
ํ .. vue3 ์ฌ์ ์ค์ ์ด ํ์ํ ์ ์์ต๋๋ค.
ํ .. vue3 ์ฌ์ ์ค์ ์ด ํ์ํ ์ ์์ต๋๋ค.
๋ด๊ฐ ๋์์ด ๋ ์ ์์ต๋๋ค?
์ง๊ธ๊น์ง ์๋ํ ๊ฒ (ํ์ง๋ง ๋ ธ๋ ๋ชจ๋ ๋๋ ํ ๋ฆฌ์์๋ dist ํ์ผ์์๋ง) :
VueLoaderPlugin
์ ์ด์ vue-loader
์ ๋ด๋ณด๋ด๊ธฐ์
๋๋ค.vue-esm.js
๋ฅผ vue.esm-browser.js
๋์ฒด11c11
< var _plugin = _interopRequireDefault(require("vue-loader/lib/plugin"));
---
> var _plugin = _interopRequireDefault(require("vue-loader").VueLoaderPlugin);
34c34
< vue$: require.resolve('vue/dist/vue.esm.js')
---
> vue$: require.resolve('vue/dist/vue.esm-browser.js')
์ด์ ์ฑ ๊ตฌ์ฑ ์์๊ฐ createApp()
์ธ์คํด์คํ๋๋ฉฐ ๋ชจ๋ ๊ตฌ์ฑ ๋ฑ์ ์ธ์คํด์ค์ ์ ์ฉํด์ผํฉ๋๋ค.
```diff
21c21
var _vue = _interopRequireDefault (require ( "vue"). createApp);
43c43<var root = new _vue [ "default"] ({
var root = _vue [ "default"] ({
67c67<_vue [ "default"]. config.errorHandler = showException;
root.config.errorHandler = showException;
88c88<root. $ mount ( '# root');
root.mount('#root');
```
์๋ฅผ ๋ค์ด extends
์์ฑ์ ์ ์ํ๊ธฐ ์ํด ์ฑ ์ธ์คํด์ค๊ฐ ํ์ํ๊ธฐ ๋๋ฌธ์ ์ด์ vue/dist/client/preview/index.js
๋ฌธ์ ๊ฐ ๋ฐ์ํฉ๋๋ค. ์ ์ ํ ์คํ ๋ฆฌ ๋ถ ๋น๋๋ก๋ง ๊ตฌํํ ์์๋ ๊ฒ ๊ฐ์ต๋๋ค.
๋ฐ๋ผ๊ฑด๋์ด ์๊ธฐ ๋จ๊ณ๊ฐ ์ ์ฉ ํ ๊ฒ์ ๋๋ค.
์๋ ํ์ธ์ ์ฌ๋ฌ๋ถ! ์ต๊ทผ์ด ๋ฌธ์ ์์ ๋ง์ ์ผ์ด ์ผ์ด๋์ง ์์ ๊ฒ ๊ฐ์ต๋๋ค. ์ฌ์ ํ ์ง๋ฌธ, ์๊ฒฌ ๋๋ ๋ฒ๊ทธ๊ฐ ์์ผ๋ฉด ํ ๋ก ์ ๊ณ์ํ์ญ์์ค. ์ํ๊น๊ฒ๋ ๋ชจ๋ ๋ฌธ์ ๋ฅผ ๋ค๋ฃฐ ์๊ฐ์ด ์์ต๋๋ค. ์ฐ๋ฆฌ๋ ํญ์ ๊ธฐ์ฌ์ ์ด๋ ค ์์ผ๋ฏ๋ก ๋์์ด ํ์ํ๋ฉด ํ ์์ฒญ์ ๋ณด๋ด์ฃผ์ญ์์ค. ๋นํ์ฑ ๋ฌธ์ ๋ 30 ์ผ ํ์ ๋ง๊ฐ๋ฉ๋๋ค. ๊ฐ์ฌ!
์ถฉ๋
@pksunkara @graup @ Aaron-Pool ๋๊ตฌ๋ ์ง ์ด๊ฒ์ ํ๊ณ ๋ค ์๊ฐ์ด ์์ต๋๊น? ์ฐ๋ฆฌ์๊ฒ ํ์ํ ์ฃผ์ ๋ณ๊ฒฝ ์ฌํญ์ด ์๊ณ ์ด๋ฅผ 6.0์ผ๋ก ๊ฐ์ ธ์ฌ ์ ์๋ค๋ฉด ์ง๊ธ์ด ๊ฐ์ฅ ์ข์์๊ธฐ์ ๋๋ค!
Vue3๊ฐ ์ถ์ ๋ ํ์๋ ๊ฝค ์ค๋ซ๋์ Vue2๋ฅผ ์ง์ํด์ผํฉ๋๋ค. ํ์ธํด์ผ ํ ํ ๊ฐ์ง๋ ๋ ๊ฐ์ง๋ฅผ ๋์์ ์ง์ํ ์ ์๋์ง ์ฌ๋ถ์ ๋๋ค.
๋ํ Vue3๊ฐ ์์ง ๋ฒ ํ ๋ฒ์ ์ด ์๋๋ผ๋ ์ ์ ๊ณ ๋ คํ๊ณ ์คํ ๋ฆฌ ๋ถ v6์ ์ถ์ํ๊ณ ์ถ๋ค๊ณ ๊ฐ์ ํ๋ฉด vue3 ์ง์์ v6 ๋ฆด๋ฆฌ์ค ์ดํ๋ก ์ฐ๊ธฐํ๊ฒ ์ต๋๋ค.
๊ณง ์กฐ์ฌ ํ ๊ณํ์ด์ง๋ง ETA๋ฅผ ์ ๊ณต ํ ์ ์์ต๋๋ค. ์์ง Vue 3๋ฅผ ์ฌ์ฉํด ๋ณผ ๊ธฐํ๊ฐ ์์์ต๋๋ค.
์ด์จ๋ ๋ฒ ํ ๋ฒ์ ์ด๋ฏ๋ก 6.0์์๋ ๊ธด๊ธํ์ง ์๋ค๋ @pksunkara์ ๋์ํฉ๋๋ค.
๊ฐ์ฌํฉ๋๋ค @graup. ๋ํ ๊ธด๊ธํ์ง ์๋ค๋ ๋ฐ ๋์ํฉ๋๋ค. Storybook์์ ์ถ์๋์ง ์์ ์ํํธ์จ์ด๋ฅผ ์ง์ํ ๊ฒ์ผ๋ก ๊ธฐ ๋ํด์๋ ์๋ฉ๋๋ค. ์๋ฅผ ๋ค์ด, 7 ์์ 6.0์ ์ถ์ํ๊ณ 8 ์์ Vue3๋ฅผ ์ถ์ํ๊ณ 9 ์์ ์ง์์ ์์ํ๊ณ ๋ธ๋ ์ดํน ์ฒด์ธ์ง๊ฐ ํ์ํ๋ค๋ ์ ๋ง ์ฐ๋ คํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ฐ๋ฆฌ๋ 10 ์์ ๋ฉ์ด์ ๋ฒ์ ์ถฉ๋ ์์ด๋ ๊ทธ ํ๊ธฐ์ ์ธ ๋ณํ๋ฅผ ์ป์ ์ ์์ผ๋ฉฐ, ๋์ 2021 ๋ 6 ์์ ์ผ์ด๋ ๊ฒ์ ๋๋ค.
๋ฐฉ๊ธ Vue 3์์ ์๋ํ๋๋ก ์๋ํ๋ ๋ฐฉ๋ฒ์ ๋ํ ๋ถ์ผ์น ์ฑ๋์ ๋ํ ์กฐ๋ช ์ ์ป์ผ๋ ค๊ณ ํ์ต๋๋ค. ํ๋ ์ ์ํฌ๋ฅผ ๋ถํธ ์คํธ๋ฉํ๋ ๋ ผ๋ฆฌ๊ฐ ์ฝ๊ฐ ๋ค๋ฅด๊ธฐ ๋๋ฌธ์ ์๋ก์ด ์ฌ์ ์ค์ ์ด ํ์ํฉ๋๋ค. vue ํด๋์ ํ์ฌ ์ฝ๋๊ฐ vue 3์์ ์๋ํ๋ค๊ณ ์๊ฐํ์ญ์์ค.
@shilman์ ์ดํดํฉ๋๋ค. ์ ์์ ์ ์ ๋๋ก ์ดํดํ์ง ๋ชปํ ๊ฒ ๊ฐ์์ ์ข ๋ ๋ช ํํํ๊ฒ ์ต๋๋ค.
@ p3k ์ ์๋์ @milewski ์ ์๊ฒฌ์ผ๋ก ์ดํด ํ ๋ฐ์ ๋ฐ๋ฅด๋ฉด ์๋ก์ด ์ฌ์ ์ค์ ์ด ํ์ํ ๋ฟ๋ง ์๋๋ผ @storybook/vue
ํจํค์ง์์ ์ฃผ์ ๋ณ๊ฒฝ ์ฌํญ์ ์ํํด์ผํฉ๋๋ค.
๊ทธ๋ฌ๋ ์ฐ๋ฆฌ๋ ์ฌ์ ํ Vue v2๋ฅผ ๊ฝค ์ค๋ซ๋์ ์ง์ํด์ผํ๋ฉฐ ๋ชจ๋ ์ฌ๋์ด Vue v3๋ก ์ด๋ํ๋ ๊ฒ์ ์๋๋๋ค. ๋ฐ๋ผ์ Vue v2๊ฐ ๋ ์ด์ ์ง์๋์ง ์๋๋ค๊ณ ๋งํ๊ณ ์ถ์ง ์๋ค๋ฉด ์๋ก์ด @storybook/vue3
ํจํค์ง๋ฅผ ๋ง๋๋ ๊ฒ์ด ์ข์ต๋๋ค.
ํ์ง๋ง Vue v2 ์ง์์ ์ค๋จํ๊ธฐ๋ก ๊ฒฐ์ ํ๋ค๋ฉด ์, Storybook v6 ์ด์ ์ ์ฃผ์ ๋ณ๊ฒฝ ์ฌํญ์ ์ํํด์ผํ๋ค๋ ๋ฐ ๋์ํฉ๋๋ค.
@pksunkara ์ ์ ๋ ์๋ฃจ์ ์ด ํ๋ฅญํ๊ฒ ๋ค๋ฆฝ๋๋ค. ๐ฏ
์กฐ๋ง๊ฐ vue2 ์ง์์ ์ค๋จ ํ ์ ์๋ค๊ณ ์๊ฐํ๋ฏ๋ก์ด ๋ ํจํค์ง๋ฅผ ๋ณ๋ ฌ๋ก ์คํํ๊ณ ํฅํ ์ฃผ์ ๋ฆด๋ฆฌ์ค (7.0? 8.0? ์ ๋?)์์ ์ ์ฒด๋ฅผ ์๋ผ ๋ด๊ณ ์ถ์ ๊ฒ์ ๋๋ค. ๋ ํจํค์ง๊ฐ ์ถ์ ๋ ํ npm ๋ค์ด๋ก๋ ํต๊ณ๋ฅผ ์ฌ์ฉํ์ฌ Vue2 ์ง์์ ์ ๊ฑฐ ํ ์ ์ ํ์๊ธฐ๋ฅผ ๊ฒฐ์ ํ ์ ์์ต๋๋ค. ์ด๋ป๊ฒ ์๊ฐํ์ญ๋๊น?
cc @ndelangen
๋๋ ๊ทธ๊ฒ์ ์ดฌ์ํ๋ค : https://github.com/milewski/storybook/tree/vue3 ์ด๊ฒ์ ๋ณธ์ง์ ์ผ๋ก vue3์์ ๋๋ฅผ ์ํด ์ผํ๊ณ ์์ต๋๋ค ..
๊ทธ๋ฌ๋ https://github.com/milewski/storybook/blob/vue3/app/vue/src/client/preview/index.ts#L41 ์ ์ํ ํด์ผํ๋์ง ํ์คํ์ง ์์ ์ฝ๋ ๋ธ๋ก์ด
์ด ๊ฐ์ด๋์ ์ง์นจ์ ๋ฐ๋ผ https://storybook.js.org/docs/guides/guide-vue/ ๋งํ ์์๋ ํ vue 3์ ์ฌ์ฉํ์ฌ ๊ตฌ์ฑ ์์๋ฅผ ์ฑ๊ณต์ ์ผ๋ก ๋ ๋๋งํ์ต๋๋ค. off ... ์๋ง๋ ํน์ ํ๋ฌ๊ทธ์ธ์ผ๋ก ์์ ํด์ผํ ๊น์? ๋๊ตฐ๊ฐ ์ฝ๋๊ฐ ์ ์ฉ ํ ๊ตฌ์ฑ / addon / ํ๋ฌ๊ทธ์ธ์ ๋งํด ์ค ์ ์์ต๋๊น? ๊ทธ๋์ ๋๋ ๊ทธ๊ฒ์ ๊ณ ์น ๋ฐฉ๋ฒ์ ์ฐพ์ ์ ์๊ณ ๋๊ตฐ๊ฐ ๋ด ๋ฒ์ ์์ ์๊ฐ์ ์ป๊ณ ์ฝ๋ ์ ์ฐจ์ ๋ฐ๋ผ ์ฌ๊ธฐ์์ ์ ์ฌ์ ์ค์ ์ ๋ฆด๋ฆฌ์ค ํ ์ ์์ต๋๊น?
@milewski ํ๋ฅญํฉ๋๋ค. ๐
์ฝ๋๊ฐ ๋ญํ๋์ง ์์ ๋์ด์ .. ๋ ธ๋ธ์์ ์ฃผ์ด์ง ์ต์ ์ ์ ์ฉ ํ ํ์๊ฐ ์์์ด์ .. ์ ๊ฐ ๊ณ ์ณค์ด์ .. ์คํ ๋ฆฌ ๋ถ์ ๋ ์ค๋ ์ฌ์ฉํ๊ณ ์๋ ๊ฒ ๊ฐ์์ ์ฌ์ฉํด ๋ณผ ์ ์๋์? @ p3k
๋ค์์ ์คํํ์ฌ ์ค์นํ ์ ์์ต๋๋ค.
git clone --branch vue3 https://github.com/milewski/storybook.git
cd storybook
yarn bootstrap --core
yarn build (select vue)
cd app/vue
yarn link
then cd to your project and:
yarn link @storybook/vue
@milewski ์ฌ๋ฌ๋ถ์ ๋
ธ๋ ฅ์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค โ ์ ๋ ์ฌ๋ฌ๋ถ์ ๋ธ๋์น๋ฅผ ์ํํ๊ณ ์๋๋ฐ yarn bootstrap --core
์คํํ ๋ ์ค๋ฅ๊ฐ ๋ฐ์ํ์ต๋๋ค.
โฆ
$ node ../../scripts/prepare.js
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/preview/globals.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/preview/types.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/preview/render.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/preview/index.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/index.d.ts
Built: @storybook/[email protected]
lerna ERR! yarn run prepare exited 1 in '@storybook/vue'
lerna ERR! yarn run prepare stdout:
$ node ../../scripts/prepare.js
src/server/framework-preset-vue.ts(5,17): error TS4058: Return type of exported function has or is using name 'VueLoaderPlugin' from external module "/home/tobi/Projects/modul/storybook/app/vue/node_modules/vue-loader/dist/plugin" but cannot be named.
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/globals.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/types.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/render.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/util.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/index.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/index.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/server/options.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/server/build.d.ts
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
lerna ERR! yarn run prepare stderr:
ERR! FAILED (ts) :
ERR! FAILED to compile ts: @storybook/[email protected]
error Command failed with exit code 1.
lerna ERR! yarn run prepare exited 1 in '@storybook/vue'
lerna WARN complete Waiting for 3 child processes to exit. CTRL-C to exit immediately.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
์. typescript์ ๋ฌธ์ ๊ฐ ์์ต๋๋ค. ๋ฐฉ๊ธ ts ๊ฒ์ฌ๋ฅผ ๋นํ์ฑํํ์ต๋๋ค. ๋ด ์ง์ ์์ ์ต์ ์ฝ๋๋ฅผ ๊ฐ์ ธ ์์ ๋ค์ ์๋ํ์ญ์์ค.
์, ์ด์ ๋ช ๋ น์ด ์ค๋ฅ์์ด ์คํ๋์์ต๋๋ค.
re yarn build (select vue)
_storybook WARN build Nothing to build! _ ๋ฉ์์ง๊ฐ ๋ํ๋ฉ๋๋ค. โ ๋ง์ต๋๊น?
ํ์๋๋ ๋ํ ํ ๋ฉ๋ด์์ ์คํ์ด์ค ๋ฐ๋ฅผ ๋๋ฌ ์ ํํด์ผํฉ๋๋ค.
์! ๋ฏธ์ ํด์.
์ด์ ์ ๊ตฌ์ถ๋์๊ณ ์ฒซ ๋ฒ์งธ vue3 ๊ตฌ์ฑ ์์๋ก ์คํ ๋ฆฌ ๋ถ์ ์คํํ ์ ์์ต๋๋ค. ํ๋ฅญํฉ๋๋ค! ๋ค์ ํ ๋ฒ ๊ฐ์ฌ๋๋ฆฝ๋๋ค, @milewski
@milewski ํ๋ฅญํฉ๋๋ค! ๋ฐฉ๊ธ ํ ์คํธํ๊ณ ์๋ํ๋ ๊ฒ ๊ฐ์ต๋๋ค.
๋ด๊ฐ ๋งํ ์์๋ ํ, ์ ์ผํ ํฐ ๋ณํ๋ ์์
ํ๊ณผ createApp
๋ฌผ๊ฑด์
๋๋ค. ๋ง์ฃ ? ์ค์น๋ vue ๋ฒ์ ์ ํ์ธํ๊ณ ์ฌ๋ฐ๋ฅธ ์์
์ ์๋์ผ๋ก ์ํํ๋ ํ์ ํธํ ์ฝ๋๋ฅผ ์์ฑํ๋ ๊ฒ์ด ๊ฐ๋ฅํ ๊น์? ๊ทธ๋ฌ๋ฉด ๋ ๊ฐ์ง ๋ฒ์ ์ ์ฌ์ ์ค์ ์ ํผํ ์ ์์ต๋๋ค.
vue ์์ ๋ฅผ ์ ๋ฐ์ดํธํ๋ ค๊ณ ํ์ง๋ง ๊ฑฐ๊ธฐ์ ์ฌ์ฉ ๋ ์ผ๋ถ ํญ๋ชฉ์๋ ์์ง vue3 ๋ฒ์ ์ด์๋ ๊ฒ ๊ฐ์ต๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ ํ ๋ง์ ๋ฒ ํ ํจํค์ง์ ์ผ์นํ์ง ์๋ ํจํค์ง๊ฐ์๋ ๊ฒ์ฒ๋ผ ๋ณด์ด๋ฏ๋ก ์ ๋์จ ๋ฑ์ ํฌํจํ์ฌ ์ ์ฒด ์คํ ๋ฆฌ ๋ถ ์ฝ๋๋ฒ ์ด์ค๋ฅผ ์ ๋ฐ์ดํธํ๊ธฐ ์ ์ ์ ์ ๊ธฐ๋ค๋ฆฌ๋ ๊ฒ์ด ์ข์ต๋๋ค.ํด์ผ ํ ์ผ์ด ์๋นํ ๋ง์ต๋๋ค.
๋ด๊ฐ ๋งํ ์์๋ ํ, ์ ์ผํ ์ฃผ์ ๋ณ๊ฒฝ ์ฌํญ์ ๊ฐ์ ธ ์ค๊ธฐ์ createApp ํญ๋ชฉ์ ๋๋ค.
๋ค, ์ ๋ ๊ทธ๋ ๊ฒ ๋งํ ๊ฒ์ ๋๋ค.
๋ด๊ฐ ์ฒ์ ์๋ํ ๊ฒ (๋ด ์ด๊ธฐ ์๊ฒฌ ์ฐธ์กฐ)์์ ๋ด๊ฐ ์ ์ง ํ ๊ฒ์ ๊ตฌ์ฑ ๋ณํฉ๋ฟ์ ๋๋ค. @milewski์ ๊ธฐ์ฌ ๋๋ถ์ ๋ ์ด์ VueLoaderPlugin์ ํธ์๊ฐ ํ์ํ์ง ์์ต๋๋ค.
(์ฌ) ์คํ ๋ฆฌ ๋ถ ์ด๊ธฐํ๋ ๋ฌธ์์ ์ค๋ช
๋๋๋ก ๊ฐ๋จํฉ๋๋ค. npm install @storybook/vue --save-dev
; ๋ค๋ฅธ ํผ์ด ์ข
์์ฑ์ ์ค์นํ ํ์์กฐ์ฐจ ์์์ต๋๋ค (์ด์จ๋ ํ๋ก์ ํธ๋ฅผ ์ํด ์ด๋ฏธ ์ค์นํ๊ธฐ ๋๋ฌธ์ผ ์ ์์ต๋๋ค).
๊ทธ๋ฌ๋ฉด ๋ ๊ฐ์ง ๋ฒ์ ์ ์ฌ์ ์ค์ ์ ํผํ ์ ์์ต๋๋ค.
๋๋ ๊ทธ๊ฒ์ด ๋งค์ฐ ๋ฐ๋์งํ๋ค๊ณ ์๊ฐํ๊ณ ์ด์ฉ๋ฉด ๋ค์ ์คํ ๋ฆฌ ๋ถ ๋ฆด๋ฆฌ์ค์์ ๋ณ๊ฒฝ์ ๊ฐ๋ฅํ๊ฒ ํ ์๋ ์์ต๋๋คโฆ?
vue ์์ ์ ๊ด๋ จํ์ฌ (์ผ๋ถ) vue3 ํธํ ๋ฒ์ ์ ๋ง๋๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๊น? (์ ๋ ์์ง vue ์ ๋ฌธ๊ฐ๋ ์๋๋๋ค.)
@graup
๋ด๊ฐ ๋งํ ์์๋ ํ, ์ ์ผํ ์ฃผ์ ๋ณ๊ฒฝ ์ฌํญ์ ๊ฐ์ ธ ์ค๊ธฐ์ createApp ํญ๋ชฉ์ ๋๋ค. ์ค์น๋ vue ๋ฒ์ ์ ํ์ธํ๊ณ ์ฌ๋ฐ๋ฅธ ์์ ์ ์๋์ผ๋ก ์ํํ๋ ํ์ ํธํ ์ฝ๋๋ฅผ ์์ฑํ๋ ๊ฒ์ด ๊ฐ๋ฅํ ๊น์? ๊ทธ๋ฌ๋ฉด ๋ ๊ฐ์ง ๋ฒ์ ์ ์ฌ์ ์ค์ ์ ํผํ ์ ์์ต๋๋ค.
๋๋ ๋ฐ์๋ ๋ฌธ์ ์ ์ง๋ฉดํ๊ณ , ํ์ฌ ๋ฒ์ ์ด ๊ฐ์ฒด๋ฅผ ์ค์ / ํ์ฅํ๋ ๋ฐฉ์์ ๋ฐ๋ฅด๋ ค๊ณ ๋ ธ๋ ฅํ์ง๋ง vue3๋ ๋ ์ด์ ํด๋น ์ ํ์ ๊ฐ์ฒด, ํนํ ๋ ๋๋ง ํจ์ ๋ด์์ ์์ฑ ๋ ๋ณ๊ฒฝ ์ฌํญ์ ์ถ์ ํ์ง ์์ต๋๋ค. ref๋ก ์ฐธ์กฐ๋ฅผ ๋ง๋ค์ด์ผํ์ต๋๋ค. () ๋๋ react ()๋ก ์ ๋ฐ์ดํธ๋ฅผ ํธ๋ฆฌ๊ฑฐํฉ๋๋ค.
vue ์์ ๋ฅผ ์ ๋ฐ์ดํธํ๋ ค๊ณ ํ์ง๋ง ๊ฑฐ๊ธฐ์ ์ฌ์ฉ ๋ ์ผ๋ถ ํญ๋ชฉ์๋ ์์ง vue3 ๋ฒ์ ์ด์๋ ๊ฒ ๊ฐ์ต๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ ํ ๋ง์ ๋ฒ ํ ํจํค์ง์ ์ผ์นํ์ง ์๋ ํจํค์ง๊ฐ์๋ ๊ฒ์ฒ๋ผ ๋ณด์ด๋ฏ๋ก ์ ๋์จ ๋ฑ์ ํฌํจํ์ฌ ์ ์ฒด ์คํ ๋ฆฌ ๋ถ ์ฝ๋๋ฒ ์ด์ค๋ฅผ ์ ๋ฐ์ดํธํ๊ธฐ ์ ์ ์ ์ ๊ธฐ๋ค๋ฆฌ๋ ๊ฒ์ด ์ข์ต๋๋ค.ํด์ผ ํ ์ผ์ด ์๋นํ ๋ง์ต๋๋ค.
๋๋ ๊ทธ๊ฒ์ ์์์ ์ผ๋ก ์ฌ์ฉํ๋ ค๊ณ ์๋ํ์ง๋ง ํจํค์ง json์ ๋ช ์ ์ ์ผ๋ก ๋ฒ์ ์ ์ค์ ํ๋๋ผ๋ vue2 ๋ฌผ๊ฑด์ ์ค์นํ๋ ค๊ณ ํ์ต๋๋ค ... vue-template-compiler ๋๋ ์ด์ vue ๋ก๋๊ฐ ์ค์น๋ ๊ฒฝ์ฐ vue 3์ด ์ ํ ์๋ํ์ง ์์ต๋๋ค .. ๊ทธ๊ฒ๋ค์ ๊ฐ์ ธ ์ค๋ ๊ฒ์ ์ฝ๊ฐ์ ์์กด์ฑ์ด์์ ์ ์์ต๋๋ค
@ p3k
(์ฌ) ์คํ ๋ฆฌ ๋ถ ์ด๊ธฐํ๋ ๋ฌธ์์ ์ค๋ช ๋๋๋ก ๊ฐ๋จํฉ๋๋ค. npm install @ storybook / vue --save-dev; ๋ค๋ฅธ ํผ์ด ์ข ์์ฑ์ ์ค์นํ ํ์์กฐ์ฐจ ์์์ต๋๋ค (์ด์จ๋ ํ๋ก์ ํธ๋ฅผ ์ํด ์ด๋ฏธ ์ค์นํ๊ธฐ ๋๋ฌธ์ผ ์ ์์ต๋๋ค).
vue3 ๋ฐ vue-loader ^ 16์ ํจํค์ง์ ๋ํ ์ข ์์ฑ์ผ๋ก ํฌํจํ๊ธฐ ๋๋ฌธ์ ์ด๋ฐ ์ผ์ด ๋ฐ์ํ ๊ฒ ๊ฐ์ต๋๋ค.
์ ๋ง ํ์ํ ๊ฒฝ์ฐ @storybook/vue3
ํจํค์ง๋ก ๊ด์ฐฎ์ต๋๋ค.
์ฐธ๊ณ ๋ก Storybook Vue2 ์ฝ๋์ ํต์ฌ ๋ ๋๋ง ๋ฒ๊ทธ๋ฅผ ์์ ํ์ต๋๋ค. https://github.com/storybookjs/storybook/pull/11076
์ด๋ก ์ธํด addon-knobs
๋ฐ addon-controls
์์ ์ฌ์ฉํ๋ "๊ฐ์ ์๋ก ๊ณ ์นจ ๋์"์ด ์ค์ ๋ก ๊ฐ์ ๋ก ์๋ก ๊ณ ์ณ์ง๋๋ค. Vue3 ์ฝ๋์ ๊ด๋ จ์ด ์๋์ง ํ์คํ์ง ์์ง๋ง ํ
์คํธํ๋ ๊ฒฝ์ฐ ์ฐธ๊ณ ๋ก ํด๋น ์
๋ฐ์ดํธ์ ๋ณํฉํ์ญ์์ค.
๊ฐ๋ ๋ฒ์ ์๋ ์ ์ฉ๋์์ต๋๋ค!
2 ์ผํธ ๋ง ๋ฃ์ผ๋ฉด vite ๊ฐ vue 3์ ์ฌ์ฉ๋๋ _defacto_ ๋๊ตฌ ์ธ ๊ฒ ๊ฐ์ต๋๋ค. vue-cli๊ฐ vue 2์ ์ฌ์ฉ ๋ ๊ฒ๊ณผ ๋งค์ฐ ์ ์ฌํฉ๋๋ค. vue-cli with storybook, probalem @pksunkara ๋ ๊ทธ์ vue-cli ์คํ ๋ฆฌ ๋ถ ํ๋ฌ๊ทธ์ธ์ผ๋ก ๋ฌธ์ ๋ฅผ ์ ํด๊ฒฐํ์ต๋๋ค. ์ฐ๋ฆฌ๊ฐ ์ค์ ํ ํ๋ฆฌ์ / ํจํค์ง๊ฐ ๊ฐ๋ฅํ๋ฉด vite์ ๋งค์ฐ ์ํํ๊ฒ ์๋ํ๋์ง ํ์ธํด์ผํฉ๋๋ค.
ํธ์ง : Vite๊ฐ webpack์ด ์๋ ๋กค์ ์ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ์ด๊ฒ์ด ๊น๋ค๋ก์ธ ์ ์์์ ๊นจ๋ฌ์์ต๋๋ค .๐ฌ
Storybook์ด ์ฌ์ฉ์ ์นํฉ / ๋น๋ ์์คํ ์ ์ฌ์ฉํ ์ ์๊ณ ์์ฒด ๊ตฌ์ฑ์ด ์ ํ ํ์ํ์ง ์์์ง ํ์ธํด์ผํ๋ค๊ณ ์๊ฐํฉ๋๋ค.
์๊ฐ์ ์ ์ณ๋๊ณ vite๋ฅผ ํ์ธํ์ง ์์ ๊ฒ ๊ฐ์ง๋ง ์๋ง๋ vue cli ํ๋ฌ๊ทธ์ธ ์์คํ ์ ์ฑํ ํ ๊ฒ์ ๋๋ค.
์ฐ๋ฆฌ๋ Vite๊ฐ "๋๊ตฌ"๊ฐ๋๋ ๊ฒ์ ์๊ฐํ๊ฑฐ๋ ๋ชฉํ๋กํ์ง ์์ต๋๋ค. ๋ง์ ํ๋ก์ ํธ์์ webpack์ด ์ ๊ณตํ๋ ์ฑ๋ฅ๊ณผ ์ ์ฐ์ฑ์ด ํ์ํ๋ฉฐ vite์ ๋ชฉํ๋ ์ด๋ฌํ ๋ชจ๋ ์๊ตฌ๋ฅผ ์ถฉ์กฑ์ํค๋ ๊ฒ์ด ์๋๋๋ค.
๊ทธ๋์ ์ง๊ธ์ vite์ ๋ํด ๋๋ฌด ๊ฑฑ์ ํ์ง ์์ ๊ฒ์ด๋ฉฐ, ์คํ ๋ฆฌ ๋ถ ์์ฒด์ ๋ํ Vue3 ์ง์์ ๋ํด์๋ ํ์คํ ๊ฑฑ์ ํ์ง ์์ ๊ฒ์ ๋๋ค.
@LinusBorg ๋ด๊ฐ ๊ตฌ์ฒด์ ์ผ๋ก
์ฌ๋๋ค์ด ์ด์ผ๊ธฐ ์ฑ ์ vite ๊ธฐ๋ฐ ํ๋ก์ ํธ์ ํตํฉํ๋ ค๊ณ ํ ๋ vite์ ๋น์ทํ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ง ์์ต๋๊น?
์ ๋ง ์๋์์. Vite ์์ฒด๋ Vue CLI ์ค์ ์ ๋นํด ๊ฝค ๋ฒ ์ด ๋ณธ์ ๋๋ค.
Vite๊ฐ ์ ๊ณตํ๋ ๊ฒ์ .vue
, ts(x)
๋ฐ .css
ํ์ผ์ ์ฒ๋ฆฌํ๊ธฐ์ํ ๊ท์น์ด์๋ ๊ฐ๋จํ Webpack ๊ตฌ์ฑ์ ํฌํจ๋ฉ๋๋ค. ์ด ํ์ฅ๋๋ ๋์ ์ฐ๋ฆฌ๋ ์ฌ์ฉ์ ์ ์ ๋ณํ์ ์ถ๊ฐํ๋ ์ฌ๋์ ๊ธฐ๋ํ์ง ์๊ณ ๋ฌผ๊ฑด์ ์ข์ฐ ์๋๋ก ๊ทธ๋ฆฌ๊ณ ,์ด API๋ ๊ฝค ๊ฐ๊น์ด ๊ธ์์
๋๋ค.
์ค๊ณ ์ ๊ด๋ฒ์ํ ํ๋ฌ๊ทธ์ธ API๊ฐ ์์ต๋๋ค. ์ฌ๋๋ค์ด ํ๋ก์ ํธ์ ๋ฉ์ง ๋ง์ถคํ ๋ง๋ฒ์ด ํ์ํ ๊ฒฝ์ฐ, ์นํฉ์ด ์กฐ๋ง๊ฐ ํ์ํ ๊ฐ๋ฅ์ฑ์ด ์์ผ๋ฏ๋ก Vue CLI๋ฅผ ์ฌ์ฉํ์ญ์์ค.
Vite๋ "๋ชจ๋ ์ฌ์ฉ ์ฌ๋ก์ ๋ํ ํ์ฅ ์ฑ"์ ๋ชฉํ ์ค ํ๋๋ก ๋ณด์ง ์์ต๋๋ค.
๋ฐ๋ผ์ ์นํฉ ๊ตฌ์ฑ์ด ๋ด๊ฐ ๋ฐฐ์น ํ ๊ธฐ๋ณธ ๊ท์น์ ํฌํจํ๋ ํ ๋ชจ๋ Vite ํ๋ก์ ํธ๋ ์ผ๋ฐ์ ์ผ๋ก ์คํ ๋ฆฌ ๋ถ / ๋ทฐ์ ํจ๊ป ์๋ํด์ผํฉ๋๋ค.
@LinusBorg ์๊ฒ ์ต๋๋ค . ์๊ฒฌ์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค ๐ Core Vue ํ์ ๋ชจ๋ ์ง์นจ์ ํญ์ ๋งค์ฐ ๊ฐ์ฌํฉ๋๋ค!
๋ชจ๋๊ฐ ์คํ ๋ฆฌ ๋ถ์ ์์ ํด์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค. Vue 3 ํ๋ก์ ํธ์ ์ฌ์ฉํ๊ณ ์ถ์ด์ ๊ธฐ๋ค๋ฆด ์ ์์ต๋๋ค. :)
Vue3๋ ์ด์ RC ์ ์์ผ๋ฏ๋ก v6์ Vue3 ์ง์์ ์ถ๊ฐํ ์ง ์ฌ๋ถ๋ฅผ ๋ค์ ํ๊ฐํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
@hollandThomas ์ฐ๋ฆฌ๋ ์ด๋ฏธ RC ์ค๋ฐ์ด๋ฏ๋ก vue3๋ 6.1์ ํฌํจ๋์ด์ผํฉ๋๋ค. ์ฆ, ์ฐ๋ฆฌ๋ ๋ช ์ฃผ ์์ ์ฒซ ๋ฒ์งธ 6.1 ์ํ๋ฅผ ์ถ์ํด์ผํฉ๋๋ค. ๊ทธ๋์ ๋๊ตฐ๊ฐ ์ด๊ฒ์ ํฉ์น๊ธฐ ์์ํ๊ณ ์ถ๋ค๋ฉด ์ด๊ฒ์ ๊ตถ์ฃผ๋ฆฐ ๋ง์ ์ฒญ์ค์ด์์ ๊ฒ์ ๋๋ค!
Vue 3 ์ง์์ ์ค๋นํ๋ ๋ฐ ๋์์์ฃผ๊ธฐ ์ํด ์ฌ์ฉํ๊ฑฐ๋ ๊ธฐ์ฌํ ์์๋ ํ์ฑ ๋ธ๋์น๊ฐ ์์ต๋๊น?
์กฐ์ง์์ Vue ui ๊ตฌ์ฑ ์์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๋ชจ๋ Vue ํ๋ก์ ํธ์ ์ํฅ์ ๋ฏธ์น๋ฏ๋ก Vue 3์ ์๋ํ๋ ๊ฒ์ ๋ง๋ ์ฒซ ๋ฒ์งธ ์์ ์ค ํ๋์ด๋ฉฐ ํ์ํ ๊ฒฝ์ฐ ํ ์คํธํ๊ฑฐ๋ ๋ง์ด๊ทธ๋ ์ด์ ํ๋ ๋ฐ ๋์์ ๋๋ฆฌ๊ณ ์ํฉ๋๋ค. ๋๋ ๋ค๋ฅธ ์ฌ๋๋ค์ด ๊ฐ์ ๋ฐฐ์ ์๋ค๊ณ ์๊ฐํฉ๋๋ค.
์ด์ ๋ฌธ์ https://v3.vuejs.org/guide/migration/introduction.html#overview ์ v2-> v3 ๋ง์ด๊ทธ๋ ์ด์ ๊ฐ์ด๋๋
@milewski @graup @ Aaron-Pool @elevatebart ์ฐ๋ฆฌ๋ ์ง๊ธ 6.1-alpha์ ์์ต๋๋ค. ๋๊ตฌ๋ ์ง ์ด๊ฒ์ ์ํด PR์ ์ฐ๊ณ ์ถ์ดํฉ๋๊น?
@ p3k ๊ฐ์ฌํฉ๋๋ค. ๋น์ ์ ์ค๋ช
์ผ๋ก ๋ฐฉ๊ธ ๋ง๋ค์์ต๋๋ค. ์ ์๊ฒ๋ ์ผ์ฒ๋ผ ๋ณด์ด์ง๋ง ๋ง์ ๊ธฐ๋ฅ์ ํ
์คํธํ์ง ์์์ต๋๋ค.
webpack ๊ตฌ์ฑ์ main.js์์ ์ฝ๊ฒ ์์ ํ ์ ์์ต๋๋ค.
webpackFinal: async (config, {configType}) => {
config.resolve.alias['vue$'] = 'vue/dist/vue.esm-browser.js'
return config
}
๋ก๋๋
render.js์ ํจ๊ป .storybook์์ ๊ตฌ์ฑํ๋ ๋ฐฉ๋ฒ์ด ์ฝ๊ฐ ๋ถ์ด ์์ต๋๋ค.
@shilman ์ด ๋ฒ์ '6.1.0-alpha.1'์ด vue3๊ณผ ํธํ๋ฉ๋๊น?
ํ์คํ์ง๋ ์์ง๋ง ์๋์ค์ฒ๋ผ ๋ณด์ ๋๋ค. ์ฌ์ ํ ๋ ๋ฒ์งธ ๋ฒ์ ์ด ์ง์๋ฉ๋๋ค ..
์๋, ์์ง. ์์ ๋ด
@shilman ์์ง Vue 3๋ฅผ ์ฌ์ฉํ ๊ธฐํ๊ฐ ์์์ต๋๋ค ๐ ์ด๋ฒ ๋ฌ์ Vue 2 ๊ธฐ๋ฐ ์ ํ ์ถ์ ๊ธฐํ์ด์์ด์ ์์ ํ ์๊ฐ์ด ์์์ต๋๋ค.
๋ฐ๋ผ์ ์์ ์ ๊ธฐ๋ณธ์ ์ผ๋ก
?
@chartinger ๋ ๋์๊ฒ ๊ฐ์ฅ ์ง์ ์ ์ธ ๊ฒฝ๋ก์ฒ๋ผ ๋ค๋ฆฝ๋๋ค. ์ฌ์ฉ์ค์ธ vue ๋ฒ์ ์ ๋ฐ๋ผ ์ด๋ฌํ ๋ณ๊ฒฝ ์ฌํญ์ ์กฐ๊ฑด๋ถ๋ก ์ ์ฉํ๊ณ ๋จ์ผ ํจํค์ง๋ฅผ ์ ์ง ๊ด๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ํ์ ํ ์ ์๋ค๋ฉด ๋ ์ข์ ๊ฒ์ ๋๋ค.
๋๋ ์ง๊ธ๊น์ง ๋ด๊ฐ ์ฐพ์ ๊ฒ์ https://github.com/chartinger/storybook/tree/app-vue3 (์ ํฌํฌ์์ ์ฝ๊ฐ์ ๋ณ๊ฒฝ์ด ํ์ํจ)์์๋ณด๊ธฐ ์คํ์ํ์ต๋๋ค.
์ข์:
๋์:
๋ค๋ฅธ:
@elevatebart vue3 ์ vue-docgen-api
๋ ์ด๋ป์ต๋๊น? โ๏ธ
์ ๋ฐ์ ์ผ๋ก ํธํ๋ฉ๋๋ค. ํ์ง๋ง ์ค์ ๊ธฐ๋ฅ์์ ๋ฐ์ํ๋ ์ด๋ฒคํธ๋ ์์ง ๋ค๋ฃจ์ง ์์์ต๋๋ค.
์ด๋ฅผ ์ํด ์ฌ์ ํ ์ค์ ๊ธฐ๋ฅ์ ์ ๋ ฅํ๊ณ ํด๋น ๋ฐฉ์ถ์ ๊ฐ์งํ๋ ํจ๊ณผ์ ์ธ ๋ฐฉ๋ฒ์ด ํ์ํฉ๋๋ค.
ํจ์๋ ์ฌ๋ฌ ํ์ผ์์์ ์ ์์ผ๋ฏ๋ก ์ฝ๊ฐ์ ์๊ฐ์ด ๊ฑธ๋ฆด ์ ์์ต๋๋ค.
@chartinger ๊ฐ ์ผ๋ถ ์คํ์ผ๋ก ๋ธ๋์น๋ฅผ ์ ๋ฐ์ดํธํ๊ณ ์ถ์ต๋๊น? ๋๋ ๋น์ ์ด ๋ฐ๊ฒฌ ํ "์ ์ด ์์ฑ์ ์๋ ๊ฐ์ง"๋ฌธ์ ๋ฅผ ํํค ์น๊ณ ์ถ๋ค. ๊ทธ๋ฆฌ๊ณ ์๋ง๋ ๋๊ตฐ๊ฐ๊ฐ ํด๋์ค ์ฅ์ ๋ฌธ์ ๋ฅผ ๋ณด๋๋ก ํ ์์์ ๊ฒ์ด๋ค.
@shilman vue-cli๋ฅผ ๊ธฐ๋ฐ์ผ๋ก vue3 ์์ ๋ฅผ ์ถ๊ฐํ๊ณ ๋ฒํผ ์์ ๋ฅผ ์ปดํฌ์ง์ ๋ฐ ํด๋์ค api๋ก ๋ง์ด๊ทธ๋ ์ด์ ํ์ต๋๋ค (์ฝ๋์์ ์ฃผ์์ด๋ผ๊ณ ๋ถ๋ฅด์ง ๋ง ์ง๊ธ์ ๋ณ๊ฒฝ ๋ ์์ ์ ๋๋ค). ์ด๋ป๊ฒ ๋ ์ด๋ฒ์๋ ํด๋์ค API ๊ตฌ์ฑ ์์๊ฐ๋ก๋๋์์ต๋๋ค.
ํ
์คํธ๋ฅผ ์ํด ๊ทธ์ ๋ฐ๋ผ npm link
๋ฐ npm link @storybook/vue3
์์ง ๋ง์ญ์์ค.
์ฐธ๊ณ : ๋ฐฉ๊ธ npm์ @andoshin11/storybook-vue3
์ ๊ฒ์ ํ์ผ๋ ์์ ๋กญ๊ฒ ์ฌ์ฉํด๋ณด์ธ์ ๐
btw, Vue 3๋ ๊ณต์์ ์ผ๋ก ๋ฒ ํ์์ ๋ฒ์ด๋ฌ์ต๋๋ค.
์ถ์ . ์ด์ผ๊ธฐ ์ฑ @ andoshin11์ ํฌํฌ / ๋ฒ์ ์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค.
// ํธ์ง : ์ค๋ ๋์ ํ๋ฅญํ ์ง์ ์ ์ฝ์ผ์ญ์์ค.
๋ชจ๋ ๋ฉ์ง ์ผ์ ๋๋ค. ๋๋ ์ด๊ฒ์ 6.1 ๋ฆด๋ฆฌ์ค์ ๋ฃ๊ณ ์ถ์ต๋๋ค. ๋๊ตฌ๋ ์ง ์ด๊ฒ์ํ๊ณ ์ถ์ดํฉ๋๊น? ๋งค์ฐ ํฐ ์ํฅ์ ๋ฏธ์น ๊ฒ์ ๋๋ค. ์ด์์ ์ผ๋ก๋ ๋์ผํ ํจํค์ง์์ vue3 ๋ฐ vue2๋ฅผ ์ง์ํ๊ณ ์๋ ๊ฐ์ง ๋๋ ์ฌ์ฉ์ ๊ตฌ์ฑ์ ์ํํ์ฌ ์ฌ์ฉํ ๋ฒ์ ์ ํ์ ํฉ๋๋ค.
์ด ์์ ์ ๋ฒ์ :
์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ณ ์ถ๋ค๋ฉด ๋ถํ์ ๋ํด ์ ์๊ฒ ์ฐ๋ฝํ์ญ์์ค-์ ๋ ํ ๋ก ํ #vue3
์์ ์ฑ๋์ ๋ง๋ค์์ต๋๋ค! https://discord.com/invite/UUt2PJb
https://github.com/storybookjs/storybook/issues/12632 ์์ ์ฝ๊ฐ์ ์์ ์ด ์ํ๋์์ต๋๋ค
Vue 3๋ ๋ฒ ํ ๋ฒ์ ์ด ์๋๋ฉฐ ๋ช ๋ฌ ๋ด์ latest
ํ๊ทธ๋ก ์ ๊ณต ๋ ์์ ์
๋๋ค. ์คํ ๋ฆฌ ๋ถ์์ Vue 3
์ง์์๋ฐ์ ์์๋ ETA๊ฐ ์์ต๋๊น?
๋ํ @storybook/vue
: //github.com/storybookjs/storybook/tree/master/app/vue์ CHANGELOG
๋ฅผ ์ถ๊ฐํ๋ฉด ์์ด๋์ด๋ฅผ ์ป์ ์ ์์ต๋๋ค. @storybook/vue
๋ฒ์ ์ผ๋ก ๋ณ๊ฒฝ๋ ์ฌํญ.
@palerdot vue3 ์ง์์ ์คํ ๋ฆฌ ๋ถ 6.1์ ์ผ๋ถ๋ก ์ ๊ณตํ๊ณ ์ถ์ต๋๋ค. ๊ธฐ์ฌํ ์ฌ๋์ ์ฐพ๊ณ ์์ต๋๋ค. ๊ด์ฌ์ด ์์ผ์ญ๋๊น? https://github.com/storybookjs/storybook/issues/10654#issuecomment -698200547
CHANGELOG์ ๊ฒฝ์ฐ ์ ์ฒด monorepo์ ๋ํด ํ๋๊ฐ ์์ผ๋ฉฐ ๊ฐ ํ๋ ์ ์ํฌ์ ๋ํด ์ถ๊ฐ๋ก ์ ์งํ๋ ๊ฒ์ ํ์ค์ ์ด์ง ์์ต๋๋ค. ๊ทธ๋ฌ๋ ๊ฐ ๋ฆด๋ฆฌ์ค ๋ฐํ์ ํจ๊ป ํ๋ ์ ์ํฌ ๋ณ ์์ฝ์ ์ํํ๋ ๊ฒ์ ๊ณ ๋ คํ ๊ฒ์ ๋๋ค. ์ด๋ ์ฌ์ฉ์๋ก์ ์ค์ ๋ก ์ํ๋ ๊ฒ์ผ ์ ์์ต๋๋ค.
@shilman
๊ธฐ์ฌํ ์ฌ๋์ ์ฐพ๊ณ ์์ต๋๋ค. ๊ด์ฌ์ด ์์ผ์ญ๋๊น?
๋ถํํ๋ ๋๋ ํ์ฌ ์ด๊ฒ์ ์๊ฐ์ ํ ์ ํ ์ ์์ ๊ฒ์
๋๋ค ( storybook
์ฝ๋๋ฒ ์ด์ค์ ์ต์ํ์ง ์๋ค๋ ๊ฒ์ ๋งํ ๊ฒ๋ ์์ต๋๋ค).
๊ฐ ๋ฆด๋ฆฌ์ค ๋ฐํ์ ํจ๊ป ํ๋ ์ ์ํฌ ๋ณ ์์ฝ์ ์ํํ๋ ๊ฒ์ ๊ณ ๋ คํ ๊ฒ์ ๋๋ค. ์ด๋ ์ฌ์ฉ์๋ก์ ์ค์ ๋ก ์ํ๋ ๊ฒ์ผ ์ ์์ต๋๋ค.
๊ฐ์ฌํฉ๋๋ค. ๊ทธ๊ฒ ๋ ์ข์ ๊ฒ์ ๋๋ค. ๋น์ ์ด ์ฌ๋ฐ๋ฅธ์ง. ์ฌ์ฉ์๋ก์ ๋ชจ๋ ๋ฆด๋ฆฌ์ค์์ ์ง์๋๋ ํ๋ ์ ์ํฌ (์ : Vue 3)๋ฅผ ์๊ณ ์ถ์ต๋๋ค. ๋ฐ๋ผ์ ํด๋น ์ ๋ณด๋ฅผ ๋ฉ์ธ CHANGELOG์ ์ถ๊ฐํ๋ฉด ๋์์ด ๋ ๊ฒ์ ๋๋ค.
Vue3๊ฐ ์คํ ๋ฆฌ ๋ถ๊ณผ ํจ๊ป ์๋ํ๋๋กํ๊ณ ์ถ์ ๋ฐ์ดํฐ ํฌ์ธํธ๋ฅผ ์ญ์ ํ์ต๋๋ค. Vue ์ฝ์ด / ํด๋ง ๊ฐ๋ฐ์ ์ค ์ผ๋ถ๊ฐ @Akryum ๊ณผ ๊ฐ์ด ์ฌ๊ธฐ์์ ๋์์ ์ค ์ ์์ต๋๋ค.
@shilman
vue2 ๋ฐ vue3๋ก ์์
ํ๋ ์คํ ๋ฆฌ ๋ถ์ ๋ํ ์๋ฃจ์
์ ์ฐพ์ ๊ฒ ๊ฐ์ต๋๋ค. ๋๋ ๊ทธ๊ฒ์์ํ ์๊ฐ์ ํฌ๋งํ๋ค๋ฉด ๊ทธ๊ฒ์ POC๋ฅผ ๋ง๋ค๋ ค๊ณ ํ๋ค ;-). ์ฝ์์ด ์์ต๋๋ค. ^^
๊ทธ๋ฌ๋ ๋๋ ์ด๋ฏธ ๋ด ์๊ฐ์ ๊ณต์ ํ๋ค๊ณ ์๊ฐํ์ต๋๋ค.
vue2 ๋ฐ vue3์ ํ๋์ ํจํค์ง๋ฅผ ์ฌ์ฉํ๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ๊ฒ์ผ๋ก ๋ณด์ด๋ Vue Demi ๋ฅผ ์ฐพ์์ต๋๋ค.
๋ฌผ๋ก compostion api๋กํด์ผ ํ ์ผ์ ์์ง ๋จ์ ์์ต๋๋ค. ํ์ง๋ง ๊ทธ ํจํค์ง๋ ์ ๋งํ ํจํค์ง๋ก ํ ๊ฑธ์ ๋์๊ฐ ๊ฒ ๊ฐ์ต๋๋ค.
์, 6.2์ ์ถ์๋๊ธฐ๋ฅผ ๋ฐ๋๋๋ค. ์ฌ์ ํ ๋๊ตฐ๊ฐ๋ฅผ ์ฐพ๊ณ ์์ต๋๋ค!
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์, 6.2์ ์ถ์๋๊ธฐ๋ฅผ ๋ฐ๋๋๋ค. ์ฌ์ ํ ๋๊ตฐ๊ฐ๋ฅผ ์ฐพ๊ณ ์์ต๋๋ค!