Storybook: Vue : Vue3 ์ง€์› ์ถ”๊ฐ€

์— ๋งŒ๋“  2020๋…„ 05์›” 05์ผ  ยท  61์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: storybookjs/storybook

๋ฐฉ๊ธˆ 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์— ๋Œ€ํ•œ ๋ฌธ์ œ๋ฅผ ๊ฒ€์ƒ‰ํ–ˆ์Šต๋‹ˆ๋‹ค.)

P1 vue feature request help wanted todo

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์˜ˆ, 6.2์— ์ถœ์‹œ๋˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค. ์—ฌ์ „ํžˆ ๋ˆ„๊ตฐ๊ฐ€๋ฅผ ์ฐพ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค!

๋ชจ๋“  61 ๋Œ“๊ธ€

Automention : ์•ˆ๋…•ํ•˜์„ธ์š” @ backbone87 @pocka , ๋‹น์‹ ์€ ํƒœ๊ทธ๋˜์—ˆ์Šต๋‹ˆ๋‹ค! ์—ฌ๊ธฐ ์† ์ข€ ์ฃผ์‹ค ๋ž˜์š”?

ํ  .. vue3 ์‚ฌ์ „ ์„ค์ •์ด ํ•„์š”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ  .. vue3 ์‚ฌ์ „ ์„ค์ •์ด ํ•„์š”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ ๋„์›€์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค?

์ง€๊ธˆ๊นŒ์ง€ ์‹œ๋„ํ•œ ๊ฒƒ (ํ•˜์ง€๋งŒ ๋…ธ๋“œ ๋ชจ๋“ˆ ๋””๋ ‰ํ† ๋ฆฌ์—์žˆ๋Š” dist ํŒŒ์ผ์—์„œ๋งŒ) :

vue / dist / server / framework-preset.js

  • 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')

vue / dist / client / preview / render.js

์ด์ œ ์•ฑ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ createApp() ์ธ์Šคํ„ด์Šคํ™”๋˜๋ฉฐ ๋ชจ๋“  ๊ตฌ์„ฑ ๋“ฑ์„ ์ธ์Šคํ„ด์Šค์— ์ ์šฉํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

```diff
21c21

<var _vue = _interopRequireDefault (require ( "vue"));

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 ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ์ ์ ˆํ•œ ์Šคํ† ๋ฆฌ ๋ถ ๋นŒ๋“œ๋กœ๋งŒ ๊ตฌํ˜„ํ•  ์ˆ˜์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

Screenshot-2020-05-11-10:41:14

๋ฐ”๋ผ๊ฑด๋Œ€์ด ์•„๊ธฐ ๋‹จ๊ณ„๊ฐ€ ์œ ์šฉ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š” ์—ฌ๋Ÿฌ๋ถ„! ์ตœ๊ทผ์ด ๋ฌธ์ œ์—์„œ ๋งŽ์€ ์ผ์ด ์ผ์–ด๋‚˜์ง€ ์•Š์€ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์—ฌ์ „ํžˆ ์งˆ๋ฌธ, ์˜๊ฒฌ ๋˜๋Š” ๋ฒ„๊ทธ๊ฐ€ ์žˆ์œผ๋ฉด ํ† ๋ก ์„ ๊ณ„์†ํ•˜์‹ญ์‹œ์˜ค. ์•ˆํƒ€๊น๊ฒŒ๋„ ๋ชจ๋“  ๋ฌธ์ œ๋ฅผ ๋‹ค๋ฃฐ ์‹œ๊ฐ„์ด ์—†์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ํ•ญ์ƒ ๊ธฐ์—ฌ์— ์—ด๋ ค ์žˆ์œผ๋ฏ€๋กœ ๋„์›€์ด ํ•„์š”ํ•˜๋ฉด ํ’€ ์š”์ฒญ์„ ๋ณด๋‚ด์ฃผ์‹ญ์‹œ์˜ค. ๋น„ํ™œ์„ฑ ๋ฌธ์ œ๋Š” 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! _ ๋ฉ”์‹œ์ง€๊ฐ€ ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค. โ€“ ๋งž์Šต๋‹ˆ๊นŒ?

ํ‘œ์‹œ๋˜๋Š” ๋Œ€ํ™” ํ˜• ๋ฉ”๋‰ด์—์„œ ์ŠคํŽ˜์ด์Šค ๋ฐ”๋ฅผ ๋ˆŒ๋Ÿฌ ์„ ํƒํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

image

์•„! ๋ฏธ์•ˆ ํ•ด์š”.

์ด์ œ ์ž˜ ๊ตฌ์ถ•๋˜์—ˆ๊ณ  ์ฒซ ๋ฒˆ์งธ 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 ๊ธฐ๋ฐ˜ ์ œํ’ˆ ์ถœ์‹œ ๊ธฐํ•œ์ด์žˆ์–ด์„œ ์ž‘์—… ํ•  ์‹œ๊ฐ„์ด ์—†์—ˆ์Šต๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ ์ž‘์—…์€ ๊ธฐ๋ณธ์ ์œผ๋กœ

  • app / vue๋ฅผ app / vue3์— ๋ณต์‚ฌ
  • ๋ชจ๋“  ํ”„๋ ˆ์ž„ ์›Œํฌ ์ฐธ์กฐ๋ฅผ ์ˆ˜์ •ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.
  • https://github.com/milewski/storybook/tree/vue3 ์—์„œ @milewski ๊ฐ€ ์ˆ˜ํ–‰ ํ•œ ๋ณ€๊ฒฝ ์‚ฌํ•ญ ์ ์šฉ
  • ์ƒˆ๋กœ์šด ๋ถ€์—Œ ์‹ฑํฌ๋Œ€ ์˜ˆ์ œ ์ˆ˜์ • ๋˜๋Š” ์ƒ์„ฑ
  • ๋‹ค๋ฅธ ์Šคํ† ๋ฆฌ / vue3 ๊ตฌ์„ฑ ์š”์†Œ ์ •์˜ ๋ฐฉ๋ฒ• ์กฐํ•ฉ์„ ์‹œ๋„ํ•˜๊ณ  ์ž‘๋™ํ•˜๋Š”์ง€ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค.

?

@chartinger ๋Š” ๋‚˜์—๊ฒŒ ๊ฐ€์žฅ ์ง์ ‘์ ์ธ ๊ฒฝ๋กœ์ฒ˜๋Ÿผ ๋“ค๋ฆฝ๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ค‘์ธ vue ๋ฒ„์ „์— ๋”ฐ๋ผ ์ด๋Ÿฌํ•œ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ์กฐ๊ฑด๋ถ€๋กœ ์ ์šฉํ•˜๊ณ  ๋‹จ์ผ ํŒจํ‚ค์ง€๋ฅผ ์œ ์ง€ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ๋” ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋‚˜๋Š” ์ง€๊ธˆ๊นŒ์ง€ ๋‚ด๊ฐ€ ์ฐพ์€ ๊ฒƒ์„ https://github.com/chartinger/storybook/tree/app-vue3 (์œ„ ํฌํฌ์—์„œ ์•ฝ๊ฐ„์˜ ๋ณ€๊ฒฝ์ด ํ•„์š”ํ•จ)์—์„œ๋ณด๊ธฐ ์‹คํ—˜์„ํ–ˆ์Šต๋‹ˆ๋‹ค.

์ข‹์€:

  • ๊ธฐ๋ณธ vue3 ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ๋ Œ๋”๋ง๋ฉ๋‹ˆ๋‹ค.
  • ์ปจํŠธ๋กค์˜ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์€ ์‹ค์‹œ๊ฐ„์œผ๋กœ ์—…๋ฐ์ดํŠธ๋ฉ๋‹ˆ๋‹ค.

๋‚˜์œ:

  • ๋กœ๋“œ ํ•  ํด๋ž˜์Šค ์žฅ์‹ vue ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜์—†๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
  • ๋…ธ๋ธŒ๊ฐ€ ์ž‘๋™ํ•˜๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ vue3๋กœ ์Šคํ† ๋ฆฌ ๋ถ์„ ๋ฐฐ์šฐ๊ณ  ์‹ถ์—ˆ์œผ๋ฏ€๋กœ ํ…Œ์ŠคํŠธ ํ•  ๋ฐ๋ชจ ์ฝ”๋“œ ๋‚˜ ๊ณผ๊ฑฐ ํ”„๋กœ์ ํŠธ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.
  • ์†Œํ’ˆ์˜ ์ œ์–ด ์†์„ฑ ์ž๋™ ๊ฐ์ง€ ์—†์Œ

๋‹ค๋ฅธ:

  • StoryMeta์—์„œ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๊ฐ€์ ธ ์˜ค๋Š” ๊ฒƒ์€ ์•„๋ฌด ์ž‘์—…๋„ํ•˜์ง€ ์•Š์œผ๋ฉฐ Story์— ์žˆ์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.
  • ์ด์ œ ์ „์—ญ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์•ฑ ์ธ์Šคํ„ด์Šค์— ๋ฐ”์ธ๋”ฉ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. .storybook / preview.js ๋˜๋Š” ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์œผ๋กœ ์ œ๊ณต ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? (ํ•„์š”ํ•œ๊ฐ€์š”?)

@elevatebart vue3 ์˜ vue-docgen-api ๋Š” ์–ด๋–ป์Šต๋‹ˆ๊นŒ? โ˜๏ธ

์ „๋ฐ˜์ ์œผ๋กœ ํ˜ธํ™˜๋ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์„ค์ • ๊ธฐ๋Šฅ์—์„œ ๋ฐœ์ƒํ•˜๋Š” ์ด๋ฒคํŠธ๋Š” ์•„์ง ๋‹ค๋ฃจ์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

์ด๋ฅผ ์œ„ํ•ด ์—ฌ์ „ํžˆ ์„ค์ • ๊ธฐ๋Šฅ์„ ์ž…๋ ฅํ•˜๊ณ  ํ•ด๋‹น ๋ฐฉ์ถœ์„ ๊ฐ์ง€ํ•˜๋Š” ํšจ๊ณผ์ ์ธ ๋ฐฉ๋ฒ•์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

ํ•จ์ˆ˜๋Š” ์—ฌ๋Ÿฌ ํŒŒ์ผ์—์žˆ์„ ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์•ฝ๊ฐ„์˜ ์‹œ๊ฐ„์ด ๊ฑธ๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

@chartinger ๊ฐ€ ์ผ๋ถ€ ์‹คํ—˜์œผ๋กœ ๋ธŒ๋žœ์น˜๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๊นŒ? ๋‚˜๋Š” ๋‹น์‹ ์ด ๋ฐœ๊ฒฌ ํ•œ "์ œ์–ด ์†์„ฑ์˜ ์ž๋™ ๊ฐ์ง€"๋ฌธ์ œ๋ฅผ ํŒŒํ—ค ์น˜๊ณ  ์‹ถ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์•„๋งˆ๋„ ๋ˆ„๊ตฐ๊ฐ€๊ฐ€ ํด๋ž˜์Šค ์žฅ์‹ ๋ฌธ์ œ๋ฅผ ๋ณด๋„๋ก ํ•  ์ˆ˜์žˆ์„ ๊ฒƒ์ด๋‹ค.

@shilman vue-cli๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ vue3 ์˜ˆ์ œ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ๋ฒ„ํŠผ ์˜ˆ์ œ๋ฅผ ์ปดํฌ์ง€์…˜ ๋ฐ ํด๋ž˜์Šค api๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ–ˆ์Šต๋‹ˆ๋‹ค (์ฝ”๋“œ์—์„œ ์ฃผ์„์ด๋ผ๊ณ  ๋ถ€๋ฅด์ง€ ๋งŒ ์ง€๊ธˆ์€ ๋ณ€๊ฒฝ ๋  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค). ์–ด๋–ป๊ฒŒ ๋“  ์ด๋ฒˆ์—๋Š” ํด๋ž˜์Šค API ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€๋กœ๋“œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

ํ…Œ์ŠคํŠธ๋ฅผ ์œ„ํ•ด ๊ทธ์— ๋”ฐ๋ผ npm link ๋ฐ npm link @storybook/vue3 ์žŠ์ง€ ๋งˆ์‹ญ์‹œ์˜ค.

์ฐธ๊ณ  : ๋ฐฉ๊ธˆ npm์— @andoshin11/storybook-vue3 ์„ ๊ฒŒ์‹œ ํ–ˆ์œผ๋‹ˆ ์ž์œ ๋กญ๊ฒŒ ์‚ฌ์šฉํ•ด๋ณด์„ธ์š” ๐Ÿ‘‡

https://www.npmjs.com/package/@andoshin11/storybook -vue3

btw, Vue 3๋Š” ๊ณต์‹์ ์œผ๋กœ ๋ฒ ํƒ€์—์„œ ๋ฒ—์–ด๋‚ฌ์Šต๋‹ˆ๋‹ค.

์ถ”์‹ . ์ด์•ผ๊ธฐ ์ฑ… @ andoshin11์˜ ํฌํฌ / ๋ฒ„์ „์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

// ํŽธ์ง‘ : ์Šค๋ ˆ๋“œ์™€ ํ›Œ๋ฅญํ•œ ์ง์—…์„ ์ฝ์œผ์‹ญ์‹œ์˜ค.

๋ชจ๋‘ ๋ฉ‹์ง„ ์ผ์ž…๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ด๊ฒƒ์„ 6.1 ๋ฆด๋ฆฌ์Šค์— ๋„ฃ๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ๋ˆ„๊ตฌ๋“ ์ง€ ์ด๊ฒƒ์„ํ•˜๊ณ  ์‹ถ์–ดํ•ฉ๋‹ˆ๊นŒ? ๋งค์šฐ ํฐ ์˜ํ–ฅ์„ ๋ฏธ์น  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด์ƒ์ ์œผ๋กœ๋Š” ๋™์ผํ•œ ํŒจํ‚ค์ง€์—์„œ vue3 ๋ฐ vue2๋ฅผ ์ง€์›ํ•˜๊ณ  ์ž๋™ ๊ฐ์ง€ ๋˜๋Š” ์‚ฌ์šฉ์ž ๊ตฌ์„ฑ์„ ์ˆ˜ํ–‰ํ•˜์—ฌ ์‚ฌ์šฉํ•  ๋ฒ„์ „์„ ํŒŒ์•…ํ•ฉ๋‹ˆ๋‹ค.

์ด ์ž‘์—…์˜ ๋ฒ”์œ„ :

  • [] vue3 ์ง€์›์— ํ•„์š”ํ•œ ๋ณ€๊ฒฝ
  • [] vue3์— ๋Œ€ํ•œ e2e ํ…Œ์ŠคํŠธ๋ฅผ vue ํ”„๋กœ์ ํŠธ์— ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค (์ด๋ฏธ ํ…œํ”Œ๋ฆฟ์ด ์žˆ์œผ๋ฏ€๋กœ ๋„ˆ๋ฌด ์–ด๋ ต์ง€ ์•Š์•„์•ผํ•ฉ๋‹ˆ๋‹ค)
  • [] ๋ฌธ์„œ ์—…๋ฐ์ดํŠธ
  • [] ํ”„๋ฆฌ ๋ฆด๋ฆฌ์ฆˆ์—์„œ ํ™๋ณด ํ•  ๋•Œ ๋ฒ„๊ทธ ์ˆ˜์ • ๋ฐ ์ง€์›์„๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ๋ถˆํ™”์— ๋Œ€ํ•ด ์ €์—๊ฒŒ ์—ฐ๋ฝํ•˜์‹ญ์‹œ์˜ค-์ €๋Š” ํ† ๋ก  ํ•  #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๋กœํ•ด์•ผ ํ•  ์ผ์€ ์•„์ง ๋‚จ์•„ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๊ทธ ํŒจํ‚ค์ง€๋Š” ์œ ๋งํ•œ ํŒจํ‚ค์ง€๋กœ ํ•œ ๊ฑธ์Œ ๋‚˜์•„๊ฐ„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

13224 ๊ฐ™์€ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค. @shilman ๋‹ค์Œ ์Šคํ† ๋ฆฌ ๋ถ ๋ฒ„์ „์—์„œ Vue 3 ์ง€์›์„ ๊ธฐ๋‹ค๋ ค์•ผํ•ฉ๋‹ˆ๊นŒ?

์˜ˆ, 6.2์— ์ถœ์‹œ๋˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค. ์—ฌ์ „ํžˆ ๋ˆ„๊ตฐ๊ฐ€๋ฅผ ์ฐพ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค!

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰