Nuxt๋ž€?

Nuxt๋Š” Vue.js๋กœ ๋น ๋ฅด๊ฒŒ ์›น์„ ์ œ์ž‘ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ฃผ๋Š” ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค. ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ œ์ž‘ํ•  ๋•Œ ํ•„์š”ํ•œ ๋ทฐ์—‘์Šค, ๋ผ์šฐํ„ฐ, Axios์™€ ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์„ ๋ฏธ๋ฆฌ ๊ตฌ์„ฑํ•˜์—ฌ ์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜(Single Page Application), ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง(Server Side Rendering), ์ •์  ์›น ์‚ฌ์ดํŠธ(Static Generated Website)๋ฅผ ์‰ฝ๊ฒŒ ์ œ์ž‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง์ด๋ž€ ์›น ํŽ˜์ด์ง€์˜ ๋‚ด์šฉ์„ ์„œ๋ฒ„์—์„œ ๋ชจ๋‘ ์ž‘์„ฑํ•ด์„œ ํด๋ผ์ด์–ธํŠธ(๋ธŒ๋ผ์šฐ์ €)๋กœ ๋ณด๋‚ธ ๋’ค ํ™”๋ฉด์— ๊ทธ๋ฆฌ๋Š” ๋ฐฉ์‹์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

Nuxt์˜ ์žฅ์ 

Nuxt๋กœ ๊ฐœ๋ฐœํ–ˆ์„ ๋•Œ์˜ ์žฅ์ ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”
  • ์ดˆ๊ธฐ ํ”„๋กœ์ ํŠธ ์„ค์ • ๋น„์šฉ ๊ฐ์†Œ์™€ ์ƒ์‚ฐ์„ฑ ํ–ฅ์ƒ
    • ESLint, Prettier
    • ๋ผ์šฐํ„ฐ, ์Šคํ† ์–ด ๋“ฑ์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค์น˜ ๋ฐ ์„ค์ • ํŒŒ์ผ ํ•„์š” X
    • ํŒŒ์ผ ๊ธฐ๋ฐ˜์˜ ๋ผ์šฐํŒ… ๋ฐฉ์‹. ์„ค์ • ํŒŒ์ผ ์ž๋™ ์ƒ์„ฑ
  • ํŽ˜์ด์ง€ ๋กœ๋”ฉ ์†๋„์™€ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜ ํ–ฅ์ƒ
    • ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํ•˜๋Š” ์ผ์„ ์„œ๋ฒ„์— ๋‚˜๋ˆ ์ค€๋‹ค
    • ๋ชจ๋ฅด๋ฉด ์ง€๋‚˜์น  ์ˆ˜ ์žˆ๋Š” ์ฝ”๋“œ ์Šคํ”Œ๋ฆฌํŒ…์ด ๊ธฐ๋ณธ์œผ๋กœ ์„ค์ •

Nuxt ํŠน์ง•

Nuxt์˜ ํŠน์ง•์„ ์š”์•ฝํ•ด๋ณด๋ฉด ํฌ๊ฒŒ ์•„๋ž˜์™€ ๊ฐ™์ด ๊ตฌ๋ถ„๋ฉ๋‹ˆ๋‹ค.

Nuxt ์‹œ์ž‘ํ•˜๊ธฐ

Nuxt ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌ์„ฑํ•˜๊ธฐ ์œ„ํ•ด ๋‹ค์Œ ๋ช…๋ น์–ด๋ฅผ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.

npm init nuxt-app ํ”„๋กœ์ ํŠธ๋ช…

ํ”„๋กœ์ ํŠธ๊ฐ€ ์ƒ์„ฑ๋˜๊ณ  ๋‚˜๋ฉด ๋ช…๋ น์–ด ์‹คํ–‰ ์ฐฝ์„ ์ฐธ๊ณ ํ•˜์—ฌ ์•„๋ž˜ ๋ช…๋ น์–ด๋ฅผ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.

cd ํ”„๋กœ์ ํŠธ๋ช…
npm run dev

๋ช…๋ น์–ด ์‹คํ–‰ ์ฐฝ์— ์•ˆ๋‚ด๋œ ์ฃผ์†Œ๋ฅผ ๋ธŒ๋ผ์šฐ์ €์— ์ž…๋ ฅํ•˜๊ณ  ๊ฒฐ๊ณผ๋ฅผ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.