# Nuxt.js




vue.js๋ฅผ ์„œ๋ฒ„์—์„œ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” ์˜คํ”ˆ์†Œ์Šค ํ”„๋ ˆ์ž„์›Œํฌ

์„œ๋ฒ„, ํด๋ผ์ด์–ธํŠธ ์ฝ”๋“œ์˜ ๋ฐฐํฌ๋ฅผ ์ถ•์•ฝ์‹œ์ผœ SPA(์‹ฑ๊ธ€ํŽ˜์ด์ง€ ์•ฑ)์„ ๊ฐ„ํŽธํ•˜๊ฒŒ ๋งŒ๋“ค์–ด์ค€๋‹ค.

Vue.js ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•  ๋•Œ, ์„œ๋ฒ„ ๋ถ€๋ถ„์„ ๋ฏธ๋ฆฌ ๊ตฌ์„ฑํ•˜๊ณ  ์ •์  ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค์–ด๋‚ด๋Š” ๊ธฐ๋Šฅ์„ ํ†ตํ•ด UI ๋ Œ๋”๋ง์„ ๋ณด๋‹ค ์‹ ์†ํ•˜๊ฒŒ ์ œ๊ณตํ•ด์ฃผ๋Š” ๊ธฐ๋Šฅ์ด ์žˆ๋‹ค.



๋“ค์–ด๊ฐ€๊ธฐ์— ์•ž์„œ

  • SSR(Server Side Rendering) : ์„œ๋ฒ„ ์ชฝ์—์„œ ํŽ˜์ด์ง€ ์ปจํ…์ธ ๋“ค์ด ๋ Œ๋”๋ง๋œ ์ƒํƒœ๋กœ ์‘๋‹ตํ•ด์คŒ

  • CSR(Client Side Rendering) : ํด๋ผ์ด์–ธํŠธ(์›น๋ธŒ๋ผ์šฐ์ €) ์ชฝ์—์„œ ์ปจํ…์ธ ๋“ค์„ ๋ Œ๋”๋งํ•˜๋Š” ๊ฒƒ

  • SPA(Single Page Application) : ํ•˜๋‚˜์˜ ํŽ˜์ด์ง€๋กœ ๊ตฌ์„ฑ๋œ ์›น์‚ฌ์ดํŠธ. index.html์•ˆ์— ๋ชจ๋“  ์›นํŽ˜์ด์ง€๋“ค์ด javascript๋กœ ๊ตฌํ˜„๋˜์–ด ์žˆ๋Š” ํ˜•ํƒœ

SPA๋Š” ๋ณด์•ˆ ์ด์Šˆ๋‚˜ ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”์— ์žˆ์–ด์„œ ๋‹จ์ ์ด ์กด์žฌ. ์ด๋ฅผ ๊ทน๋ณตํ•˜๊ธฐ ์œ„ํ•ด ์ฒ˜์Œ ๋ถˆ๋Ÿฌ์˜ค๋Š” ํ™”๋ฉด์€ SSR๋กœ, ๊ทธ ์ดํ›„๋ถ€ํ„ฐ๋Š” CSR๋กœ ์ง„ํ–‰ํ•˜๋Š” ๋ฐฉ์‹์ด ํšจ์œจ์ ์ด๋‹ค.


Nuxt.js๋Š” ์™œ ์‚ฌ์šฉํ•˜๋‚˜?

vue.js๋ฅผ ์„œ๋ฒ„์—์„œ ๋ Œ๋”๋งํ•˜๋ ค๋ฉด ์„ค์ •ํ•ด์•ผํ•  ๊ฒƒ๋“ค์ด ํ•œ๋‘๊ฐœ๊ฐ€ ์•„๋‹ˆ๋‹คใ… 

๋ณดํ†ต babel๊ณผ ๊ฐ™์€ webpack์„ ํ†ตํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋นŒ๋“œํ•˜๊ณ  ์ปดํŒŒ์ผํ•˜๋Š” ๊ณผ์ •์„ ๊ฑฐ์น˜๊ฒŒ ๋œ๋‹ค. Node.js์—์„œ๋Š” ์ง์ ‘ ๋นŒ๋“œ, ์ปดํŒŒ์ผ์„ ํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ, ์ด๋Ÿฐ ๊ฒƒ๋“ค์„ ๋ถ„๋ฆฌํ•˜์—ฌ SSR(์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง)์ด ๊ฐ€๋Šฅํ•˜๋„๋ก ๋ฏธ๋ฆฌ ์„ธํŒ…ํ•ด๋‘๋Š” ๊ฒƒ์ด Nuxt.js๋‹ค.

Vue์—์„œ๋Š” Nuxt๋ฅผ, React์—์„œ๋Š” Next ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•จ


Nuxt CLI๋ฅผ ํ†ตํ•ด ์‰ฝ๊ฒŒ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค๊ณ  ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ์Œ

$ vue init nuxt/starter <project-name>

๊ธฐ๋ณธ์ ์œผ๋กœ vue-router๋‚˜ vuex๋ฅผ ์ด์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋””๋ ‰ํ† ๋ฆฌ๊ฐ€ ์ค€๋น„๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— Vue.js๋กœ ๊ฐœ๋ฐœ์„ ํ•ด๋ณธ ์‚ฌ๋žŒ๋“ค์€ ํŽธํ•˜๊ฒŒ ํ™œ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.


# ์žฅ์ 


  • ์ผ๋ฐ˜์ ์ธ SPA ๊ฐœ๋ฐœ์€, ๊ฒ€์ƒ‰ ์—”์ง„์—์„œ ๋…ธ์ถœ๋˜์ง€ ์•Š์•„ ์กฐํšŒ๊ฐ€ ํž˜๋“ค๋‹ค. ํ•˜์ง€๋งŒ Nuxt๋ฅผ ์ด์šฉํ•˜๊ฒŒ ๋˜๋ฉด ์„œ๋ฒ„์‚ฌ์ด๋“œ๋ Œ๋”๋ง์œผ๋กœ ํ™”๋ฉด์„ ๋ณด์—ฌ์ฃผ๊ธฐ ๋•Œ๋ฌธ์—, ๊ฒ€์ƒ‰์—”์ง„ ๋ด‡์ด ํ™”๋ฉด๋“ค์„ ์ž˜ ๊ธ์–ด๊ฐˆ ์ˆ˜ ์žˆ๋‹ค. ๋”ฐ๋ผ์„œ SPA๋กœ ๊ฐœ๋ฐœํ•˜๋”๋ผ๋„ SEO(๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”)๋ฅผ ๊ฑฑ์ •ํ•˜์ง€ ์•Š์•„๋„ ๋œ๋‹ค.

    ์ผ๋ฐ˜์ ์œผ๋กœ ๋งŽ์€ ํšŒ์‚ฌ๋“ค์€ ๊ฒ€์ƒ‰์—”์ง„์— ์ ์ ˆํžˆ ๋…ธ์ถœ๋˜๋Š” ๊ฒƒ์ด ๋งค์šฐ ์ค‘์š”ํ•จ. ๋”ฐ๋ผ์„œ ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”๋Š” ๊ฐœ๋ฐœ ์‹œ ๋ฐ˜๋“œ์‹œ ๊ณ ๋ คํ•ด์•ผ ํ•  ๋ถ€๋ถ„

  • SPA์ž„์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ , Express๊ฐ€ ์„œ๋ฒ„๋กœ ๋’ค์—์„œ ๋Œ๊ณ  ์žˆ๋‹ค. ์ด๋Š” ๋‚ด๊ฐ€ ์›ํ•˜๋Š” API๋ฅผ ํ”„๋กœ์ ํŠธ์—์„œ ๋งŒ๋“ค์–ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๋œป!

# ๋‹จ์ 


Nuxt๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ, ๋‹จ์ˆœํžˆ ํ”„๋ก ํŠธ/๋ฐฑ์—”๋“œ๋ฅผ ํ•œ ํ”„๋กœ์ ํŠธ์—์„œ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์ง€์•Š์„๊นŒ๋กœ ์ ‘๊ทผํ•˜๋ฉด ํฐ์ฝ” ๋‹ค์น  ์ˆ˜ ์žˆ๋‹ค.

ex) API ์š”์ฒญ์‹œ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด, ํ”„๋ก ํŠธ์—”๋“œ์—๊ฒŒ ์˜ค๋ฅ˜ ๋ฐœ์ƒ ์ƒํƒœ๋ฅผ ์ „๋‹ฌํ•ด์ค˜์•ผ ์˜ˆ์™ธ์ฒ˜๋ฆฌ๋ฅผ ์ง„ํ–‰ํ• ํ…๋ฐ Nuxt์—์„œ Express ์—๋Ÿฌ๊นŒ์ง€ ๋จน์–ด๋ฒ„๋ฆฌ๊ณ  ๋ฆฌ๋””๋ ‰์…˜์‹œํ‚ด

API๋ถ€๋ถ„์„ Nuxt๋กœ ํ™œ์šฉํ•˜๋Š” ๊ฒŒ ์ƒ๋‹นํžˆ ์–ด๋ ต๋‹ค๊ณ ํ•จ

์ตœ์ข… ์ˆ˜์ • : 12/17/2022, 7:23:59 AM