์ํฐํ๋ผ์ด์ฆ๋ผ๊ณ ๋ถ๋ฅด๊ธฐ์ ๊ตฌ์กฐ๊ฐ ์ข ํ์ํ์ง ์๋?
๋๊ตฐ๊ฐ ๊ทธ๋ ๊ฒ ๋ฌผ์๊ณ ๋ฐ๋
์ด ์ง๋ฌ๋ค.
๋๋ฌด๋๋ฌด ์ ๊ฒฝ์ฐ์ธ๋ค. >ํ์ํ ๊ตฌ์กฐ< ๋ ๋์ฒด ๋ฌด์์ด๋ฉฐ ์ฐ์ํ ํ๋ก์ ํธ์ ๊ตฌ์กฐ๋ ๋ฌด์์ธ๊ฐ?
vue cli ๋ก ์๋ ์์ฑํ ํ๋ก์ ํธ์ ๊ตฌ์กฐ๋ฅผ ๋ณด๋ฉด vue ๊ฐ ์ด๋ค ๋ฐฉ์์ ๊ตฌ์กฐ๋ฅผ ์ ํธํ๋์ง ์ ์ ์์ง ์์๊น?
vue create helloworld
์์ฑํด๋ณด์๋ค.
๋๋ผ์ธ ์ ๋๋ก ์๋ฌด ๊ฒ๋ ์์๋ค.
์กฐ๊ธ ๋ ๊ณต์ ์ฌ์ดํธ๋ฅผ ๋๋ฌ๋ณด์๊ณ VUEX ์์ ์ด์ง ์ธ๊ธ๋ ํ๋ก์ ํธ ๊ตฌ์กฐ๋ ๋ค์๊ณผ ๊ฐ์๋ค.
์ญ์ ๋ณ ๊ฑด ์์๋ค.
vue ๊ณต์์ด ์ฃผ์ง ์๋ '์ฐ์ํ ๊ตฌ์กฐ'์ ๋ํ ๋จ์๋ Github ์์ ์ฐพ๊ธฐ๋ก ํ๋ค. vue, boilerplate ํค์๋๋ก ๊ฒ์ํด์ Star ์๊ฐ 2k ์ด์์ธ repo๋ฅผ ๊ธฐ์ค์ผ๋ก ์ฐพ์๋ณด์๋ค.
โญ๏ธ Star 6.6k
๐ค Link github ๊ฐ๊ธฐ
๊ทธ๋์ ๋ด๊ฐ ์ฐธ์ฌํ๋ ํ๋ก์ ํธ A์ ๋น๊ตํด๋ณด๋ ๋ช ๊ฐ์ง๋ฅผ ์ ์ธํ๊ณ ๋ ๋๋ถ๋ถ ์ผ์นํ๋ค.
views/ ๋๋ ํ ๋ฆฌ๊ฐ src/์ ํ์๊ฐ ์๋ router/์ ํ์์ ์์
โ views ๋ router์ ๋ฐ์ ํ ์ฐ๊ด๋์ด ํด๋นํ๋ ํ๋ฉด ์์ค์ฝ๋๋ฅผ ๋ดํฌํ๋ค๋ ์ ์ ์ข ๋ ๋ช
ํํ ํ ์ ์๋ค.
layout/ ๋๋ ํ ๋ฆฌ๊ฐ ๋ณ๋๋ก ์กด์ฌ โ ๋ ์ด์์์ ์ค์๋๊ฐ ๋์์ง๋ ํจ๊ณผ!
์์ค์ฝ๋ ํ์ผ์ vue์ ์ปดํฌ๋ํธ ์๋ช ๊ท์น์ด ๊ฐํ๊ฒ ์ ์ฉ๋์ด์๋ ๊ฒ๋ ์ฐธ๊ณ ํ๋ฉด ์ข์ ๊ฒ ๊ฐ๋ค.
โญ๏ธ Star 2.7k
๐ค Link github ๊ฐ๊ธฐ
Server side ์์ค๋ ํฌํจํ๊ณ ์์ด์ Client ์ชฝ๋ง ์ด์ด๋ณด์๋ค.
vue์ ๊ธฐ๋ณธ ๊ตฌ์กฐ์๋ ๊ฝค ๋ง์ด ๋ค๋ฅธ ๊ฒ ์ฒ๋ผ ๋ณด์ด์ง๋ง ์์ธํ ๋ณด๋ฉด ๊ฒฐ๊ตญ ๋น์ทํ ์์์ ๋๋ค.
์ต์๋จ์ app/ ๋๋ ํ ๋ฆฌ๊ฐ client์ ๋ฉ์ธ ์ง์ ์ ์ด๊ณ , ๊ทธ ํ์์๋ core/๊ฐ ์๋๋ฐ ์ด๊ฒ ์ฐ๋ฆฌ๊ฐ ๋ณดํต ์ฌ์ฉํ๋ src/ ๋๋ ํ ๋ฆฌ์ ๋์ผํ๋ค.
views/ ๋๋ ํ ๋ฆฌ๊ฐ ๋ณ๋๋ก ์๊ณ ํ๋ฉด ํ์ผ(DefaultAdminPage)์ด ๋ฉ์ธ ๊ฒฝ๋ก์ ๋๋ ๋์ฌ์๋ ๊ฒ์ ๋ง์์ ์๋ค์ง๋ง ์ด๋ฅผ ๊ฐ์ ํ๋ค๋ฉด ์ฌํํ๋ฉด์๋ ๋ช ํํ ๊ตฌ์กฐ ๋ถ๋ฆฌ๋ผ๊ณ ์๊ฐ๋๋ค.
โญ๏ธ Star 2.2k
๐ค Link github ๊ฐ๊ธฐ
Storybook๊ณผ Mocha๊ฐ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ์ฉ ๋, (๋ค์ ๋์ค๊ฒ ์ง๋ง) ํฐ ๋๊ท๋ชจ ํ๋ก์ ํธ์ ๊ฑธ๋ง๋ ๊ตฌ์กฐ์ด๋ค. ์ ํํ๋ ๊ธฐ์ ์ ์ ์ง์ฝํด๋์ ๋๋? TS๋ฅผ ์ฐ๋ ๊ฒ ์ค์๋ ๊ฐ์ฅ Star ์๊ฐ ๋์๋ค.
๊ฐ์ธ์ ์ผ๋ก๋ ์ฐพ์๋ณธ ๊ตฌ์กฐ ์ค์ ๊ฐ์ฅ ๋ณต์กํ๋ค. (app์์ app์์ App์ด๋ผ๋!)
App.vue ์ชฝ์ด ์ง์ ์ ์ด๊ณ example, home ๋๋ ํ ๋ฆฌ๊ฐ ํ๋์ ๋ชจ๋์ด๋ค.
๊ฐ ๋ชจ๋๋ง๋ค vuex ์์ค๊ฐ ๋ถ๋ฆฌ๋์ด ์๊ณ , ํ ํ์ด์ง๋ ๋ฌด์กฐ๊ฑด ๋์ผํ ์ด๋ฆ์ ๋๋ ํ ๋ฆฌ ํ์์ ํ์ผ๋ก์ ์์ฑ๋๋ค. Mocha์ spec, Storybook์ stories ํ์ผ๊ณผ ํจ๊ป ๋๊ธฐ ์ํจ์ธ๋ฏํ๋ค.
๊ฐ์ฅ Vue์ ์ค๋ฆฌ์ง๋ ๊ท์น์ ์ ๋ฐ๋ฅธ ์ชฝ์ vue-enterprise-boilerplate ์ด๊ณ ์ต์ ๊ธฐ์ ์ด ์ ์ ์ฉ ๋, ๋ณด๋ค ๋ ํฐ ๊ท๋ชจ์ ์ด์ธ๋ฆฌ๋ ์ชฝ์ vuesion ์ด์๋ค.
๊ฐ์ธ์ ์ผ๋ก ์๋ก์ด ํ๋ก์ ํธ๋ฅผ ํ๊ฒ ๋๋ฉด vuesion์ ๊ธฐ๋ฐ์ผ๋ก ์งํํด๋ณด๊ณ ์ถ๋ค.
vue ๊ณต์์ด ์ ์ํ ํ๋ก์ ํธ ๊ตฌ์กฐ์ ์ ๋ช ํ ์คํ์์ค๋ค์ ๊ตฌ์กฐ๋ฅผ ๋ฏ์ด๋ณด์๋ค. ์๊ฐ๋ณด๋ค ๋ค์ํ ์คํ์ผ์ด ์์๋๋ฐ ์ ๋ณด๋ฉด ๊ณตํต๋ ๊ท์น๋ค์ด ์๋ค. ์กฐ๊ธ ๋ ๋ฆฌ์์น๋ฅผ ํด๋ณด์๋ค.
๋จ์ผ ๋จ์ด(Card, Modal, Button)๋ก ์ด๋ฆ์ง์ผ๋ฉด ์ด๋ฆ์ด ์ค๋ณต๋ ๊ฐ๋ฅ์ฑ์ด ์์ผ๋ฉฐ ๋ช ๋ฃํ์ง ์๋ค.
์ผ๋ฐ์ ์ผ๋ก ๊ฐํ๊ฒ ์ฎ์ธ ๋ถ๋ชจ-์์ ์ปดํฌ๋ํธ๋ ์๋์ฒ๋ผ nested ํํ๋ฅผ ์ทจํ์ฌ ์ฒ๋ฆฌํ์ง ์๋๊ฐ?
์ด ๋ฐฉ์์ Vue ๊ณต์ ์ฌ์ดํธ์์ ๊ถ์ฅํ์ง ์๋๋ค. ์ฝ๋ ํธ์ง๊ธฐ์ ์ฑ๋ฅ(๋๋ ๊ธฐ๋ฅ)์ ์ํฅ์ ๋ฏธ์น๊ธฐ ๋๋ฌธ์ด๋๋ค.
๊ทธ๋ฌ๋ฏ๋ก ์๋์ ๊ฐ์ด ๋ถ๋ชจ ์ปดํฌ๋ํธ์ ์ด๋ฆ์ prefix๋ก ๊ฐ์ง ๋ค์ด๋ฐ์ ๊ถ์ฅํ๋ค.
Header, Footer ์ ๊ฒฝ์ฐ๋ ๋ณดํต ๋ชจ๋ ํ์ด์ง๋ฅผ ํตํ์ด ๋จ ํ๋์ ์ธ์คํด์ค๋ง ์์ฑ๋๋ค. ์ด ๋์๋ The Prefix๋ฅผ ๋ถ์ฌ ๋ช ์ํด์ฃผ๋ ๊ฒ์ด ์ข๋ค.
์ด๋ ๊ฒ ์ฌ์ฉ๋๋ ์ปดํฌ๋ํธ๋ ๋ณดํต props๋ฅผ ์ฌ์ฉํ์ง ์๋ ๊ฒ์ด ์ข๋ค.
๋ฆฌ์์น๋ฅผ ํ๋ค๋ณด๋ 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/ ์ ๊ฐ์ ๊ฒฝ๋ก๋ฅผ ๋์ฑ ๊น๋ํ๊ฒ ๊ด๋ฆฌํ ์ ์์ ๊ฒ์ด๋ค.
๋!๐ค
์ฐ์ vue๋ก ํ ์ดํ๋ก์ ํธ ์งํํด ๋ณด๋ ค๊ณ ํ๋๋ฐ ์ ๋ง ๋์๋๋ ๊ธ์ด๋ค์ ๊ฐ์ฌํฉ๋๋ค!
๊ตฌ์กฐ๊ฐ ์ข๋ค์. ๋ฉ์ง์๋ค์.
ํน์ ์
๋ฌด๋ณ๋ก ์๋ฒ๋ฅผ ๋ฐ๋ก ๊ตฌ์ฑํ๋ ๋ฐฉ๋ฒ๋ ๊ฐ๋ฅํ ๊น์
์ฌ๋๋ง๋ค docker๋ณ๋ก ๋ถ๋ฆฌํด์ ํ๊ณ ์ถ์๋ฐ์.
์๋ฅผ ๋ค์ด...
ํ์๊ด๋ฆฌ์ ์์ค๋ A์๋ฒ์ ์๊ณ
๊ฒ์ํ๊ด๋ฆฌ์ ์์ค๋ B์๋ฒ์ ์๊ณ
์ฌ์ฉ์ ๋ธ๋ผ์ฐ์ ๋ ๊ทธ๋ฅ ํ๋์ ๋ธ๋ผ์ฐ์ ์์ ์์ฒญํ๊ณ
์ด๋ ๊ฒ ํ๊ณ ์ถ๋ค์.
๊น๋ํ ์ค๋ช ๊ฐ์ฌํฉ๋๋ค!