[VUE] ๐ŸŒฑ์šฐ์•„ํ•œ ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ ์งœ๊ธฐ

cindy-choiยท2021๋…„ 1์›” 11์ผ
0

์—”ํ„ฐํ”„๋ผ์ด์ฆˆ๋ผ๊ณ  ๋ถ€๋ฅด๊ธฐ์—” ๊ตฌ์กฐ๊ฐ€ ์ข€ ํ˜‘์†Œํ•˜์ง€ ์•Š๋‚˜?

๋ˆ„๊ตฐ๊ฐ€ ๊ทธ๋ ‡๊ฒŒ ๋ฌผ์—ˆ๊ณ  ๋ฐ˜๋…„์ด ์ง€๋‚ฌ๋‹ค.
๋„ˆ๋ฌด๋„ˆ๋ฌด ์‹ ๊ฒฝ์“ฐ์ธ๋‹ค. >ํ˜‘์†Œํ•œ ๊ตฌ์กฐ< ๋ž€ ๋Œ€์ฒด ๋ฌด์—‡์ด๋ฉฐ ์šฐ์•„ํ•œ ํ”„๋กœ์ ํŠธ์˜ ๊ตฌ์กฐ๋ž€ ๋ฌด์—‡์ธ๊ฐ€?

vue ๊ณต์‹ ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ๋ถ€ํ„ฐ ๋œฏ์–ด๋ณด์ž.

vue cli ๋กœ ์ž๋™ ์ƒ์„ฑํ•œ ํ”„๋กœ์ ํŠธ์˜ ๊ตฌ์กฐ๋ฅผ ๋ณด๋ฉด vue ๊ฐ€ ์–ด๋–ค ๋ฐฉ์‹์˜ ๊ตฌ์กฐ๋ฅผ ์„ ํ˜ธํ•˜๋Š”์ง€ ์•Œ ์ˆ˜ ์žˆ์ง€ ์•Š์„๊นŒ?

vue create helloworld

์ƒ์„ฑํ•ด๋ณด์•˜๋‹ค.

๋†€๋ผ์šธ ์ •๋„๋กœ ์•„๋ฌด ๊ฒƒ๋„ ์—†์—ˆ๋‹ค.

์กฐ๊ธˆ ๋” ๊ณต์‹ ์‚ฌ์ดํŠธ๋ฅผ ๋‘˜๋Ÿฌ๋ณด์•˜๊ณ  VUEX ์—์„œ ์‚ด์ง ์–ธ๊ธ‰๋œ ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์•˜๋‹ค.

์—ญ์‹œ ๋ณ„ ๊ฑด ์—†์—ˆ๋‹ค.

Boilerplate๋ฅผ ๋ถ„ํ•ดํ•ด๋ณด์ž.

vue ๊ณต์‹์ด ์ฃผ์ง€ ์•Š๋Š” '์šฐ์•„ํ•œ ๊ตฌ์กฐ'์— ๋Œ€ํ•œ ๋‹จ์„œ๋Š” Github ์—์„œ ์ฐพ๊ธฐ๋กœ ํ•œ๋‹ค. vue, boilerplate ํ‚ค์›Œ๋“œ๋กœ ๊ฒ€์ƒ‰ํ•ด์„œ Star ์ˆ˜๊ฐ€ 2k ์ด์ƒ์ธ repo๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ฐพ์•„๋ณด์•˜๋‹ค.

vue-enterprise-boilerplate

โญ๏ธ Star 6.6k
๐Ÿค– Link github ๊ฐ€๊ธฐ

๊ทธ๋™์•ˆ ๋‚ด๊ฐ€ ์ฐธ์—ฌํ–ˆ๋˜ ํ”„๋กœ์ ํŠธ A์™€ ๋น„๊ตํ•ด๋ณด๋‹ˆ ๋ช‡ ๊ฐ€์ง€๋ฅผ ์ œ์™ธํ•˜๊ณ ๋Š” ๋Œ€๋ถ€๋ถ„ ์ผ์น˜ํ–ˆ๋‹ค.

  • views/ ๋””๋ ‰ํ† ๋ฆฌ๊ฐ€ src/์˜ ํ•˜์œ„๊ฐ€ ์•„๋‹Œ router/์˜ ํ•˜์œ„์— ์žˆ์Œ
    โ†’ views ๋Š” router์— ๋ฐ€์ ‘ํžˆ ์—ฐ๊ด€๋˜์–ด ํ•ด๋‹นํ•˜๋Š” ํ™”๋ฉด ์†Œ์Šค์ฝ”๋“œ๋ฅผ ๋‚ดํฌํ•œ๋‹ค๋Š” ์ ์„ ์ข€ ๋” ๋ช…ํ™•ํžˆ ํ•  ์ˆ˜ ์žˆ๋‹ค.

  • layout/ ๋””๋ ‰ํ† ๋ฆฌ๊ฐ€ ๋ณ„๋„๋กœ ์กด์žฌ โ†’ ๋ ˆ์ด์•„์›ƒ์˜ ์ค‘์š”๋„๊ฐ€ ๋†’์•„์ง€๋Š” ํšจ๊ณผ!

์†Œ์Šค์ฝ”๋“œ ํŒŒ์ผ์— vue์˜ ์ปดํฌ๋„ŒํŠธ ์ž‘๋ช… ๊ทœ์น™์ด ๊ฐ•ํ•˜๊ฒŒ ์ ์šฉ๋˜์–ด์žˆ๋Š” ๊ฒƒ๋„ ์ฐธ๊ณ ํ•˜๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค.

vue-express-mongo-boilerplate

โญ๏ธ Star 2.7k
๐Ÿค– Link github ๊ฐ€๊ธฐ

Server side ์†Œ์Šค๋„ ํฌํ•จํ•˜๊ณ  ์žˆ์–ด์„œ Client ์ชฝ๋งŒ ์—ด์–ด๋ณด์•˜๋‹ค.

vue์˜ ๊ธฐ๋ณธ ๊ตฌ์กฐ์™€๋Š” ๊ฝค ๋งŽ์ด ๋‹ค๋ฅธ ๊ฒƒ ์ฒ˜๋Ÿผ ๋ณด์ด์ง€๋งŒ ์ž์„ธํžˆ ๋ณด๋ฉด ๊ฒฐ๊ตญ ๋น„์Šทํ•œ ์–‘์ƒ์„ ๋ˆ๋‹ค.

์ตœ์ƒ๋‹จ์˜ app/ ๋””๋ ‰ํ† ๋ฆฌ๊ฐ€ client์˜ ๋ฉ”์ธ ์ง„์ž…์ ์ด๊ณ , ๊ทธ ํ•˜์œ„์—๋Š” core/๊ฐ€ ์žˆ๋Š”๋ฐ ์ด๊ฒŒ ์šฐ๋ฆฌ๊ฐ€ ๋ณดํ†ต ์‚ฌ์šฉํ•˜๋Š” src/ ๋””๋ ‰ํ† ๋ฆฌ์™€ ๋™์ผํ•˜๋‹ค.

views/ ๋””๋ ‰ํ† ๋ฆฌ๊ฐ€ ๋ณ„๋„๋กœ ์—†๊ณ  ํ™”๋ฉด ํŒŒ์ผ(DefaultAdminPage)์ด ๋ฉ”์ธ ๊ฒฝ๋กœ์— ๋œ๋  ๋†“์—ฌ์žˆ๋Š” ๊ฒƒ์€ ๋งˆ์Œ์— ์•ˆ๋“ค์ง€๋งŒ ์ด๋ฅผ ๊ฐœ์„ ํ•œ๋‹ค๋ฉด ์‹ฌํ”Œํ•˜๋ฉด์„œ๋„ ๋ช…ํ™•ํ•œ ๊ตฌ์กฐ ๋ถ„๋ฆฌ๋ผ๊ณ  ์ƒ๊ฐ๋œ๋‹ค.

vuesion

โญ๏ธ Star 2.2k
๐Ÿค– Link github ๊ฐ€๊ธฐ

Storybook๊ณผ Mocha๊ฐ€ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ ์šฉ ๋œ, (๋’ค์— ๋‚˜์˜ค๊ฒ ์ง€๋งŒ) ํฐ ๋Œ€๊ทœ๋ชจ ํ”„๋กœ์ ํŠธ์— ๊ฑธ๋งž๋Š” ๊ตฌ์กฐ์ด๋‹ค. ์œ ํ–‰ํ•˜๋Š” ๊ธฐ์ˆ ์„ ์ž˜ ์ง‘์•ฝํ•ด๋†“์€ ๋Š๋‚Œ? TS๋ฅผ ์“ฐ๋Š” ๊ฒƒ ์ค‘์—๋Š” ๊ฐ€์žฅ Star ์ˆ˜๊ฐ€ ๋†’์•˜๋‹ค.

๊ฐœ์ธ์ ์œผ๋กœ๋Š” ์ฐพ์•„๋ณธ ๊ตฌ์กฐ ์ค‘์— ๊ฐ€์žฅ ๋ณต์žกํ–ˆ๋‹ค. (app์•ˆ์˜ app์•ˆ์˜ App์ด๋ผ๋‹ˆ!)

App.vue ์ชฝ์ด ์ง„์ž…์ ์ด๊ณ  example, home ๋””๋ ‰ํ† ๋ฆฌ๊ฐ€ ํ•˜๋‚˜์˜ ๋ชจ๋“ˆ์ด๋‹ค.

๊ฐ ๋ชจ๋“ˆ๋งˆ๋‹ค vuex ์†Œ์Šค๊ฐ€ ๋ถ„๋ฆฌ๋˜์–ด ์žˆ๊ณ , ํ•œ ํŽ˜์ด์ง€๋Š” ๋ฌด์กฐ๊ฑด ๋™์ผํ•œ ์ด๋ฆ„์˜ ๋””๋ ‰ํ† ๋ฆฌ ํ•˜์œ„์— ํŒŒ์ผ๋กœ์„œ ์ƒ์„ฑ๋œ๋‹ค. Mocha์˜ spec, Storybook์˜ stories ํŒŒ์ผ๊ณผ ํ•จ๊ป˜ ๋†“๊ธฐ ์œ„ํ•จ์ธ๋“ฏํ•˜๋‹ค.

Boilerplate ์ข…ํ•ฉ ๊ฒฐ๊ณผ

๊ฐ€์žฅ Vue์˜ ์˜ค๋ฆฌ์ง€๋„ ๊ทœ์น™์„ ์ž˜ ๋”ฐ๋ฅธ ์ชฝ์€ vue-enterprise-boilerplate ์ด๊ณ  ์ตœ์‹  ๊ธฐ์ˆ ์ด ์ž˜ ์ ์šฉ ๋œ, ๋ณด๋‹ค ๋” ํฐ ๊ทœ๋ชจ์— ์–ด์šธ๋ฆฌ๋Š” ์ชฝ์€ vuesion ์ด์—ˆ๋‹ค.

๊ฐœ์ธ์ ์œผ๋กœ ์ƒˆ๋กœ์šด ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๊ฒŒ ๋˜๋ฉด vuesion์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์ง„ํ–‰ํ•ด๋ณด๊ณ  ์‹ถ๋‹ค.

๊ทœ์น™ ์ฐพ์•„๋ณด๊ธฐ

vue ๊ณต์‹์ด ์ œ์•ˆํ•œ ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ์™€ ์œ ๋ช…ํ•œ ์˜คํ”ˆ์†Œ์Šค๋“ค์˜ ๊ตฌ์กฐ๋ฅผ ๋œฏ์–ด๋ณด์•˜๋‹ค. ์ƒ๊ฐ๋ณด๋‹ค ๋‹ค์–‘ํ•œ ์Šคํƒ€์ผ์ด ์žˆ์—ˆ๋Š”๋ฐ ์ž˜ ๋ณด๋ฉด ๊ณตํ†ต๋œ ๊ทœ์น™๋“ค์ด ์žˆ๋‹ค. ์กฐ๊ธˆ ๋” ๋ฆฌ์„œ์น˜๋ฅผ ํ•ด๋ณด์•˜๋‹ค.

๋ฐ˜๋ณต์ ์œผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ๊ทœ์น™๋“ค

๊ทœ์น™1. ์ปดํฌ๋„ŒํŠธ์˜ ์ด๋ฆ„์€ Multi-word๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

๋‹จ์ผ ๋‹จ์–ด(Card, Modal, Button)๋กœ ์ด๋ฆ„์ง€์œผ๋ฉด ์ด๋ฆ„์ด ์ค‘๋ณต๋  ๊ฐ€๋Šฅ์„ฑ์ด ์žˆ์œผ๋ฉฐ ๋ช…๋ฃŒํ•˜์ง€ ์•Š๋‹ค.

๊ทœ์น™2. ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์™€ ๊ฐ•ํ•˜๊ฒŒ ์—ฎ์—ฌ์žˆ๋Š” ์ปดํฌ๋„ŒํŠธ๋Š” ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์˜ ์ด๋ฆ„์„ prefix๋กœ ์‚ฌ์šฉํ•œ๋‹ค.

์ผ๋ฐ˜์ ์œผ๋กœ ๊ฐ•ํ•˜๊ฒŒ ์—ฎ์ธ ๋ถ€๋ชจ-์ž์‹ ์ปดํฌ๋„ŒํŠธ๋Š” ์•„๋ž˜์ฒ˜๋Ÿผ nested ํ˜•ํƒœ๋ฅผ ์ทจํ•˜์—ฌ ์ฒ˜๋ฆฌํ•˜์ง€ ์•Š๋Š”๊ฐ€?

์ด ๋ฐฉ์‹์€ Vue ๊ณต์‹ ์‚ฌ์ดํŠธ์—์„œ ๊ถŒ์žฅํ•˜์ง€ ์•Š๋Š”๋‹ค. ์ฝ”๋“œ ํŽธ์ง‘๊ธฐ์˜ ์„ฑ๋Šฅ(๋˜๋Š” ๊ธฐ๋Šฅ)์— ์˜ํ–ฅ์„ ๋ฏธ์น˜๊ธฐ ๋•Œ๋ฌธ์ด๋ž€๋‹ค.

  • ๋น„์Šทํ•œ ์ด๋ฆ„์„ ๊ฐ€์ง„ ํŒŒ์ผ์ด ๋„ˆ๋ฌด ๋งŽ์œผ๋ฉด ๋‹จ์ถ•ํ‚ค๋กœ ํŒŒ์ผ๊ฐ„์˜ ์ด๋™์ด ์–ด๋ ค์›Œ์ง„๋‹ค.
  • ํ•˜์œ„ ๊ฒฝ๋กœ๋กœ ์—ฎ์ธ ๊ตฌ์กฐ๊ฐ€ ๋Š˜์–ด๋‚˜๋ฉด IDE์˜ ์‚ฌ์ด๋“œ๋ฐ”์—์„œ ์ปดํฌ๋„ŒํŠธ๋“ค์„ ๋ธŒ๋ผ์šฐ์ง•ํ•˜๋Š”๋ฐ ๋” ๋งŽ์€ ์‹œ๊ฐ„์ด ๊ฑธ๋ฆด ์ˆ˜ ์žˆ๋‹ค.

๊ทธ๋Ÿฌ๋ฏ€๋กœ ์•„๋ž˜์™€ ๊ฐ™์ด ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์˜ ์ด๋ฆ„์„ prefix๋กœ ๊ฐ€์ง„ ๋„ค์ด๋ฐ์„ ๊ถŒ์žฅํ•œ๋‹ค.

๊ทœ์น™3. ์ „์ฒด ํŽ˜์ด์ง€์—์„œ ์œ ์ผํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ์—๋Š” The ๋ฅผ ๋ถ™์ธ๋‹ค.

Header, Footer ์˜ ๊ฒฝ์šฐ๋Š” ๋ณดํ†ต ๋ชจ๋“  ํŽ˜์ด์ง€๋ฅผ ํ†ตํ‹€์–ด ๋‹จ ํ•˜๋‚˜์˜ ์ธ์Šคํ„ด์Šค๋งŒ ์ƒ์„ฑ๋œ๋‹ค. ์ด ๋•Œ์—๋Š” The Prefix๋ฅผ ๋ถ™์—ฌ ๋ช…์‹œํ•ด์ฃผ๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

์ด๋ ‡๊ฒŒ ์‚ฌ์šฉ๋˜๋Š” ์ปดํฌ๋„ŒํŠธ๋Š” ๋ณดํ†ต props๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

Bonus ๐Ÿ’ฐ

ํ”„๋กœ์ ํŠธ ๊ทœ๋ชจ ๋ณ„ ์†Œ์Šค ๊ตฌ์กฐ ์ถ”์ฒœ

๋ฆฌ์„œ์น˜๋ฅผ ํ•˜๋‹ค๋ณด๋‹ˆ vue ๊ณต์‹ ๋ฌธ์„œ์—๋Š” ์–ธ๊ธ‰๋˜์ง€ ์•Š์€ ๋…ธํ•˜์šฐ๋“ค์ด ๋งŽ์ด ๋ณด์˜€๋Š”๋ฐ ๊ทธ ์ค‘ ์•ž๋‹จ์—์„œ ์ฐพ์•„๋ณด์•˜๋˜ boilerplate์™€ ์—ฐ๊ด€๋œ ๋‚ด์šฉ์ด ์žˆ์–ด ๊ฐ€์ ธ์™€๋ณด์•˜๋‹ค.

์—ฌ๊ธฐ ๋‹น์‹ ์˜ ์ž‘๊ณ  ์†Œ์ค‘ํ•œ ํ”„๋กœ์ ํŠธ๊ฐ€ ์žˆ์—ˆ๋‹ค.

๊ธฐ๋Šฅ์ด ์ถ”๊ฐ€๋˜๊ณ  ์œ ์ง€๋ณด์ˆ˜ ๋˜๋ฉด์„œ ํ”„๋กœ์ ํŠธ ๊ทœ๋ชจ๋Š” ์ ์ฐจ ์ปค์ง„๋‹ค. ๊ณตํ†ต ๋ชจ๋“ˆ์ด๋ผ ์ƒ๊ฐํ•ด์„œ components์— ๋นผ๋†“์€ ์ปดํฌ๋„ŒํŠธ๋“ค์ด ์Œ“์ด๊ธฐ ์‹œ์ž‘ํ•œ๋‹ค. ์ด๋ฅผ ์ •๋ฆฌํ•˜์ง€ ์•Š์œผ๋ฉด ๋๋‚ด๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ƒํƒœ๊ฐ€ ๋œ๋‹ค.

** ์‚ฌ๋ฐฉ์—์„œ ์“ฐ๋Š” (๋˜๋Š” ์“ฐ์ด๋Š”, ์•„๋‹ˆ๋ฉด ์–ด๋””์„œ ์“ฐ๋Š”์ง€ ๋ชจ๋ฅด๋Š”!) ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ๋“ค์ด components/ ๋””๋ ‰ํ† ๋ฆฌ์— ๋„๋ ค์žˆ์Œ. **

์˜ˆ์‹œ์—๋Š” ํŒŒ์ผ ๊ฐœ์ˆ˜๊ฐ€ ์–ผ๋งˆ ๋˜์ง€ ์•Š์ง€๋งŒ components/ ๊ฒฝ๋กœ ์•ˆ์— ํ•œ.. 100๊ฐœ์˜ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋„๋ ค์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ด๋ณด์ž. ์ƒ์ƒ๋งŒ์œผ๋กœ๋„ ๋”์ฐํ•˜๋‹ค. ๊ทธ๊ฑธ ๋‹ค ์–ธ์ œ ํŒŒ์•…ํ•˜๊ณ  ์žฌ์‚ฌ์šฉํ•˜๋ฉฐ ์œ ์ง€๋ณด์ˆ˜๋ฅผ ํ•  ๊ฒƒ์ธ์ง€!

๊ทœ๋ชจ๊ฐ€ ์ž‘์€ ํ”„๋กœ์ ํŠธ๋ผ๋ฉด ์ง€๊ธˆ ์ƒํƒœ๋ฅผ ์œ ์ง€ํ•ด๋„ ๊ดœ์ฐฎ๋‹ค.
๋‹จ, ํŒŒ์ผ๋ช… ๋„ค์ด๋ฐ ๊ทœ์น™์„ ์ž˜ ์ง€์ผฐ์„ ๊ฒฝ์šฐ์—๋งŒ. (๋ถ€๋ชจ-์ž์‹๊ฐ„์˜ prefix ๊ทœ์น™)

์กฐ๊ธˆ ์ปค์ง„ ํ”„๋กœ์ ํŠธ๊ฐ€ ์žˆ๋‹ค.

ํ•œ ๋ˆˆ์— ์šฉ๋„๋ฅผ ์•Œ์•„๋ณผ ์ˆ˜ ์—†์„ ์ •๋„์˜ ๊ทœ๋ชจ๊นŒ์ง€ ๋„๋‹ฌํ•œ ํ”„๋กœ์ ํŠธ๋ผ๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๊ฐœ์„ ํ•ด๋ณผ ์ˆ˜ ์žˆ๊ฒ ๋‹ค.

ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์—ฎ์–ด ๋””๋ ‰ํ† ๋ฆฌ ๊ตฌ์กฐ๋ฅผ ๋งŒ๋“ค์—ˆ๋‹ค.
์ด์ œ ์šฉ๋„ ๋ณ„๋กœ components๋ฅผ ํ•œ ๋ˆˆ์— ์•Œ์•„๋ณผ ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค.

์œ„์—์„œ ์–ธ๊ธ‰ํ–ˆ๋˜ ๊ทœ์น™2์— ์–ด๊ธ‹๋‚˜๋Š” ๊ฐœ์„  ๋ฐฉํ–ฅ์ด๊ธฐ ๋•Œ๋ฌธ์— components๋ฅผ ํ•œ ๋ˆˆ์— ์•Œ์•„๋ณด๊ธฐ ํž˜๋“ค ์ •๋„๋กœ ๊ทœ๋ชจ๊ฐ€ ๋ถˆ์–ด๋‚œ ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•˜๋„๋ก ํ•˜์ž.

์—ฌ๊ธฐ์„œ ๋” ์ปค์ง€๋ฉด์š”?

์œ„์—์„œ๋Š” AvatarCard, Notification ์„ ์˜ˆ๋กœ ๋“ค์—ˆ์ง€๋งŒ ์ƒ์œ„ ๋ชจ๋“ˆ์ด ์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„๊ฐ€ ์•„๋‹Œ ๊ธฐ๋Šฅ ๋‹จ์œ„๋กœ ์ปค์ง„ ์ƒํ™ฉ์„ ๊ฐ€์ •ํ•ด๋ณด์ž.

๋‚ด๊ฐ€ ์‹ค์ œ๋กœ ์ง„ํ–‰ํ•œ ํ”„๋กœ์ ํŠธ๋Š” Enterprise ๊ธ‰์œผ๋กœ ๋ถ„๋ฆฌ๋œ ํ™”๋ฉด ํ•˜๋‚˜๊ฐ€ App ํ•˜๋‚˜์˜ ๊ทœ๋ชจ์˜€์—ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ์—„์ฒญ๋‚˜๊ฒŒ ์ปค๋‹ค๋ž€ ๊ทœ๋ชจ์˜ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” ์–ด๋–ค ๊ตฌ์กฐ๋ฅผ ์ฐจ์šฉํ•ด์•ผ ํ• ๊นŒ?

๋ฐ”๋กœ ๋ชจ๋“ˆ ๋ณ„๋กœ ๊ฒฝ๋กœ๋ฅผ ์ชผ๊ฐ  ๋‹ค์Œ, ํ•˜๋‚˜์˜ ๋ชจ๋“ˆ์ด ์ž‘์€ ํ”„๋กœ์ ํŠธ ๋‹จ์œ„๋ผ๊ณ  ์ƒ๊ฐํ•˜๊ณ  ํ•˜์œ„ ๊ฒฝ๋กœ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๊ฒƒ์ด๋‹ค.
์œ„ ์˜ˆ์‹œ๋ฅผ ๋ณด๋ฉด browser, dashboard, tableManager ๊ฐ€ ํ•˜๋‚˜์˜ ๋ชจ๋“ˆ์ด์ž ์ž‘์€ ํ”„๋กœ์ ํŠธ ๋‹จ์œ„๊ฐ€ ๋œ๋‹ค.

์—ฌ๊ธฐ์„œ ์กฐ๊ธˆ ๋” ๋ชจ๋“ˆ์—๊ฒŒ ๋…๋ฆฝ์„ฑ์„ ๋ถ€์—ฌํ•ด๋ณด์ž. components๋ฟ ์•„๋‹ˆ๋ผ ๋ชจ๋“ˆ ๋‚ด์—์„œ ๋ฐ˜๋ณต๋˜๋Š” ์œ ํ‹ธ๋ฆฌํ‹ฐ๋‚˜ helper, ์„œ๋น„์Šค ์ฝ”๋“œ๋ฅผ ๋ถ„๋ฆฌํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

์ž ๊น. ์–ด๋””์„œ ๋งŽ์ด ๋ณธ ๊ตฌ์กฐ๊ฐ€ ์•„๋‹Œ๊ฐ€?๐Ÿ˜—

์œ„์—์„œ ์‚ดํŽด๋ณธ Boilerplates ์ค‘ vuesion ์„ ๋– ์˜ฌ๋ ค๋ณด์ž. ๊ฐ ๋ชจ๋“ˆ๋งˆ๋‹ค vuex๋ฅผ ๊ฐ€์ง„ ๊ตฌ์กฐ๊ฐ€ ๋ณต์žกํ•˜๊ฒŒ ๋Š๊ปด์กŒ์ง€๋งŒ, ์—ฌ๊ธฐ๊นŒ์ง€ ์™€์„œ ๋ณด๋‹ˆ ๊ฝค ๊ทธ๋Ÿด์‹ธํ•œ ๊ตฌ์กฐ์˜€๋˜ ๊ฒƒ ๊ฐ™๋‹ค.

vuesion ์„ ๋– ์˜ฌ๋ ค๋ณด๋ฉฐ ์•„์˜ˆ api, router, store(vuex) ๊นŒ์ง€๋„ ๋ณ„๋„๋กœ ๋ถ„๋ฆฌํ•ด์ค€๋‹ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์™„์„ฑํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค.

browser/ ๋ชจ๋“ˆ์ด ์•„์ฃผ ์ž‘์€ ๋‹จ์œ„์˜ ํ”„๋กœ์ ํŠธ์™€ ๋˜‘๊ฐ™์€ ๊ตฌ์„ฑ์„ ๊ฐ–์ถ”๊ฒŒ ๋˜์—ˆ๋‹ค.
์ด๋ ‡๊ฒŒ ๋ถ„๋ฆฌ๊ฐ€ ๋œ๋‹ค๋ฉด ๋Œ€๊ทœ๋ชจ ํ”„๋กœ์ ํŠธ์—์„œ ์ „์ฒด ๋ชจ๋“ˆ์ด ๊ณต์šฉ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ณค ํ•˜๋Š” components/ ์™€ ๊ฐ™์€ ๊ฒฝ๋กœ๋ฅผ ๋”์šฑ ๊น”๋”ํ•˜๊ฒŒ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค.

๋!๐Ÿ˜ค

profile
์•ˆ๋…•๋‚˜๋Š”ํด๋ ˆ์˜คํŒŒํŠธ๋ผ์„ธ์ƒ์—์„œ์ œ์ผ๊ฐ€๋Š”ํฌํ…Œ์ดํ† ์นฉ

๊ด€์‹ฌ ์žˆ์„ ๋งŒํ•œ ํฌ์ŠคํŠธ

0๊ฐœ์˜ ๋Œ“๊ธ€