Stylebot: Require.js ์ถฉ๋Œ [๋ฒ„๊ทธ]

์— ๋งŒ๋“  2020๋…„ 08์›” 03์ผ  ยท  4์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: ankit/stylebot

์šฐ๋ฆฌ ์†Œํ”„ํŠธ์›จ์–ด๋Š” require.js๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ ๊ท€ํ•˜์˜ ์†Œํ”„ํŠธ์›จ์–ด๋„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์œผ๋กœ ๋ณด์ž…๋‹ˆ๋‹ค. ์—…๋ฐ์ดํŠธ ์ดํ›„๋กœ ์šฐ๋ฆฌ๋Š” ์šฐ๋ฆฌ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋ ค๊ณ  ์‹œ๋„ํ•˜๋Š” ์—ฌ๋Ÿฌ require.js ์ธ์Šคํ„ด์Šค๋กœ ์ธํ•ด ์ฝ˜์†”์—์„œ ์˜ˆ๊ธฐ์น˜ ์•Š์€ ์˜ค๋ฅ˜๋ฅผ ๋ณด์•˜์Šต๋‹ˆ๋‹ค.

์Šฌํ”„๊ฒŒ๋„ ๋ฌธ์ œ๋ฅผ ์žฌํ˜„ํ•˜๊ฑฐ๋‚˜ ์šฐ๋ฆฌ ์ฝ”๋“œ์— ๋Œ€ํ•ด ๋„ˆ๋ฌด ๋งŽ์€ ๋…์  ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜๋Š” ๋ฐ ๋„์›€์„ ๋“œ๋ฆด ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ ์šฐ๋ฆฌ๋Š” require.js ์Šคํฌ๋ฆฝํŠธ ํƒœ๊ทธ์— data-main ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ํŒŒ์ผ์„ ์‹คํ–‰ํ•˜์—ฌ require-base ํ•ญ๋ชฉ์„ ์ˆ˜์ •ํ•ฉ๋‹ˆ๋‹ค. ์ด์— ๋Œ€ํ•œ ์ž์„ธํ•œ ๋‚ด์šฉ์€ https://requirejs.org/docs/api.html#data -main์„ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค.
์ด์ œ ์ƒ๋Œ€ ๊ฒฝ๋กœ๋กœ ์‹คํ–‰ํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋‘ ๋ฒˆ์ด๊ณ  ๋‘ ๋ฒˆ์งธ๋กœ ์ž˜๋ชป ๋ฐœ์ƒํ•˜๊ณ  ํ•ด๋‹น ๊ธฐ๋ณธ js ํŒŒ์ผ์„ URL ๋์— ๊ณ ์ •ํ•ฉ๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ ์•„๋งˆ๋„ ์†”๋ฃจ์…˜์€ ์‚ฌ์šฉํ•  require.js์— ๋Œ€ํ•ด ๋” ๊ตฌ์ฒด์ ์œผ๋กœ ์†Œํ”„ํŠธ์›จ์–ด๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด์ „๊ณผ ๊ฐ™์ด require.js์˜ ๋ฒ”์œ„๋ฅผ ์•ฝ๊ฐ„ ํฌํ•จํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด(๋˜๋Š” requirejs๊ฐ€ ์ƒˆ๋กœ ์ถ”๊ฐ€๋˜์—ˆ์Šต๋‹ˆ๊นŒ?) ์ด์ƒ์ ์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋‚˜๋Š” ์šฐ๋ฆฌ๊ฐ€ ๊ณง ๋ฐ”๋€” ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ ๋‹น์‹ ์ด ๊ทธ๊ฒƒ์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†๋‹ค๋ฉด ๋‹ค๋ฅธ CSS ํ™•์žฅ์„ ์ฐพ์•„์•ผ ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

์žฌํ˜„ํ•˜๋ ค๋ฉด data-main ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ์ž‘์€ ๋กœ์ปฌ ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค๊ณ  ์ถฉ๋Œํ•˜๋Š”์ง€ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค.

bug resolved

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

์ง„ํ–‰ ์ค‘์ธ ์ž ์žฌ์ ์ธ ์ˆ˜์ • ์‚ฌํ•ญ์ด ์žˆ๋Š” ๋ช…๋ฐฑํ•œ ๋ฌธ์ œ๋ผ์„œ ๊ธฐ์ฉ๋‹ˆ๋‹ค. ์‘๋‹ตํ•ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. UI์— ๋Œ€ํ•œ ์ตœ๊ทผ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์€ ์ •๋ง ์ข‹์•„ ๋ณด์ž…๋‹ˆ๋‹ค.

์กฐ์–ธํ•ด ์ฃผ์‹œ๋ฉด ๋‹ค์Œ ๋ฆด๋ฆฌ์Šค๋ฅผ ํ…Œ์ŠคํŠธํ•˜๊ธฐ๋ฅผ ๊ณ ๋Œ€ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

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

@iamsolarplexus ๋ณด๊ณ 

์ง„ํ–‰ ์ค‘์ธ ์ž ์žฌ์ ์ธ ์ˆ˜์ • ์‚ฌํ•ญ์ด ์žˆ๋Š” ๋ช…๋ฐฑํ•œ ๋ฌธ์ œ๋ผ์„œ ๊ธฐ์ฉ๋‹ˆ๋‹ค. ์‘๋‹ตํ•ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. UI์— ๋Œ€ํ•œ ์ตœ๊ทผ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์€ ์ •๋ง ์ข‹์•„ ๋ณด์ž…๋‹ˆ๋‹ค.

์กฐ์–ธํ•ด ์ฃผ์‹œ๋ฉด ๋‹ค์Œ ๋ฆด๋ฆฌ์Šค๋ฅผ ํ…Œ์ŠคํŠธํ•˜๊ธฐ๋ฅผ ๊ณ ๋Œ€ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

@iamsolarplexus ์ด๊ฒƒ์€ ์ด์ œ ์ตœ์‹  ์—…๋ฐ์ดํŠธ์—์„œ ํ•ด๊ฒฐ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ๋ฅผ ๋‹ค์‹œ ์—ฌ์‹ญ์‹œ์˜ค. ๊ทธ๋ ‡์ง€ ์•Š์€ ๊ฒฝ์šฐ

ํ™•์ธํ–ˆ์Šต๋‹ˆ๋‹ค. ์ˆ˜์ •ํ•ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

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