# 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๋ก ํ์ฉํ๋ ๊ฒ ์๋นํ ์ด๋ ต๋ค๊ณ ํจ