Storybook: jQuery๋ฅผ ์ „์—ญ ๋„ค์ž„์ŠคํŽ˜์ด์Šค๋กœ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ๋ฒ•(์‹œ๋งจํ‹ฑ UI์šฉ)

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

์•ˆ๋…•ํ•˜์„ธ์š”. Semantic UI๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๊ณ  ํ•˜๋Š”๋ฐ ๋ชจ๋“  CSS๊ฐ€ ์‚ฌ๋ผ์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฌธ์ œ๋Š” Semantic UI๊ฐ€ ์ „์—ญ ๋„ค์ž„์ŠคํŽ˜์ด์Šค์—์„œ jQuery๋ฅผ ์˜ˆ์ƒํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ฐ€์ ธ์˜ค๊ธฐ ์œ„ํ•ด ๋‹ค์Œ์„ ์‹œ๋„ํ–ˆ์ง€๋งŒ ์—ฌ์ „ํžˆ 'jQuery'๊ฐ€ ์ •์˜๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

//file: config.js

import jquery from 'jquery';

global.$ = jquery;
global.jQuery = jquery;

import './semanticui'

์ด๊ฒƒ์ด ์–ด๋–ป๊ฒŒ ๋‹ฌ์„ฑ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

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

@tomitreskak ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

npm install semantic-ui-css --save-dev ํŒจํ‚ค์ง€๋กœ ๊ฒฐ์ •ํ•˜๊ณ  ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํŒŒ์ผ์„ ์ง์ ‘ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.

// config.js
import jquery from 'jquery';
global.$ = jquery;
global.jQuery =  jquery;
require('semantic-ui-css/semantic.css');
require('semantic-ui-css/semantic.js');

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

์ข‹์•„, ์ด ์ฝ”๋“œ๋ฅผ ๋‚ด ๊ธฐ๋ณธ .stories/index ํŒŒ์ผ์— ๋„ฃ์„ ๋•Œ ์ด๊ฒƒ์€ ํŠธ๋ฆญ์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์˜€์Šต๋‹ˆ๋‹ค.

import jquery from 'jquery';
global.$ = jquery;
global.jQuery = jquery;
require('./semanticui');

@tomitreskak ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

npm install semantic-ui-css --save-dev ํŒจํ‚ค์ง€๋กœ ๊ฒฐ์ •ํ•˜๊ณ  ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํŒŒ์ผ์„ ์ง์ ‘ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.

// config.js
import jquery from 'jquery';
global.$ = jquery;
global.jQuery =  jquery;
require('semantic-ui-css/semantic.css');
require('semantic-ui-css/semantic.js');

jQueryUI ๋ฅผ ํ†ตํ•ฉํ•˜๋Š” ๋ฐ ๋ฌธ์ œ๊ฐ€ ์žˆ์–ด์„œ ์—ฌ๊ธฐ์— ๋‚ด๊ฐ€ ํ•œ ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค. jquery-ui ๋ชจ๋“ˆ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

// config.js
import jquery from "jquery";
import jQueryAutocomplete from "jquery-ui/ui/widgets/autocomplete";
import jQueryDatepicker from "jquery-ui/ui/widgets/datepicker";

jquery.autocomplete = jQueryAutocomplete;
jquery.datepicker = jQueryDatepicker;
global.$ = jquery;
global.jQuery =  jquery;
์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰