Nuxt.js๋ก ๋ง๋๋ ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง!
์ด์ Vue.js๋ฅผ ๋ ๊ฐ๋ ฅํ๊ฒ ์ฌ์ฉํด๋ณด์ธ์.
Vue.js, ๋ ์ ์ฌ์ฉํ๊ณ ์ถ๋ค๋ฉด?

๋ทฐ ๊ฐ๋ฐ์๋ผ๋ฉด ๋์คํธ๋ฅผ ํตํด
์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง์ ๊ตฌํํ ์ ์์ด์.
๊ทธ๋ฐ๋ฐ,
์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง์ด ๋ญ์ฃ ? ๐ค
์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง์ด๋ ์๋ฒ์์ ํ์ด์ง๋ฅผ ๊ทธ๋ ค ํด๋ผ์ด์ธํธ (๋ธ๋ผ์ฐ์ )๋ก ๋ณด๋ธ ํ ํ๋ฉด์ ํ์ํ๋ ๊ธฐ๋ฒ์
๋๋ค. ๊ฒ์์์ง ์ต์ ํ( SEO: Search Engine Optimization)์ SNS์์ ๋ด ์ฌ์ดํธ ์ ๋ณด๋ฅผ ์ ํํ๊ฒ ์ ๋ฌํ๊ธฐ ์ํด ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง ๊ธฐ์ ์ ์ฌ์ฉํฉ๋๋ค.

์ด๋ฐ ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง์ ๊ตฌํํ๊ธฐ ์ํด Vue.js ๊ฐ๋ฐ์๋ค์ด ๋ง์ด ์ฐ๋ ํ๋ ์์ํฌ๊ฐ ๋ฐ๋ก Nuxt.js์
๋๋ค. ๋ด๊ฐ ๋ง๋ ์ฌ์ดํธ๋ฅผ ๋ ๋ง์ ์ฌ๋๋ค์๊ฒ ๋
ธ์ถํด ์ฃผ๋ ์ญํ ์ ํ์ฃ .
๋ค๋ง ๊ตญ๋ด์๋ ์์ง Nuxt.js ์ ๋ฌธ ๊ฐ์๊ฐ ์๊ณ , ์ฐธ๊ณ ํ ๋งํ ์๋ฃ๋ ๋ง์ง ์๊ธฐ ๋๋ฌธ์ ์์
์ ๊ฐ์คํด๋ฌ๋ผ๋ ์์ฒญ์ ์ข
์ข
๋ฐ์์ต๋๋ค. ์ด ๊ฐ์๊ฐ Nuxt.js๋ก ์๋น์ค๋ฅผ ๊ฐ๋ฐํด์ผ ํ๋ ๋ถ๋ค๊ป ์ ์ฉํ ์๋ฃ๊ฐ ๋์์ผ๋ฉด ์ข๊ฒ ์ต๋๋ค.
Nuxt.js๋ฅผ ์์ํ๋ ๋ถ๋ค๊ป
๋์์ด ๋ ์ ์๋๋ก.

ํ๋ก์ ํธ ์์ฑ๋ถํฐ ์๋น์ค ๋ฐฐํฌ๊น์ง,
๋์คํธ๋ก ๊ฐ๋ฐํ ๋ ๊ผญ ์์์ผ ํ
๋ชจ๋ ๋ด์ฉ์ ๋ค๋ฃจ์ด๋๋ฆฝ๋๋ค.
โ๋์คํธ ์จ๋ด์ผ ํ๋๋ฐ, ๋ทฐ๋ ๊ฐ๋ฐ ๋ฐฉ์์ด ์ด๋ป๊ฒ ๋ค๋ฅธ ๊ฑฐ์ง?โ
์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง ๊ฐ๋
์ด ๋ฏ์ ๋ถ๋ค, ํ์ฌ์์ Nuxt.js๋ก ๊ฐ๋ฐํด์ผ ํ๋๋ฐ ํ๋ฒ๋ ๋ค๋ค๋ณด์ง ์์ ๋ถ๋ค๊ป ์ ํฉํ ๊ฐ์ข์
๋๋ค. ๊ฐ๋จํ ์ผํ๋ชฐ ์ฌ์ดํธ ์ผ๋ถ๋ฅผ ์ ์ํด ๋ณด๋ฉด์ Nuxt.js์ ๊ธฐ์กด Vue.js์ ๊ฐ๋ฐ ๋ฐฉ์์ด ์ด๋ป๊ฒ ๋ค๋ฅธ์ง ํจ๊ป ๋ฐฐ์๋ณผ๊น์?
โ
Nuxt.js๋ฅผ ์ฒ์์ผ๋ก ์์ํ์๋ ๋ถ
โ
Vue.js ๊ฐ๋ฐ ๊ธฐ๋ณธ ๊ฐ๋
์ ์์ง๋ง, ์๋ฒ์ฌ์ด๋ ๋ ๋๋ง์ด ์ต์ํ์ง ์์ ๋ถ
โ
ํ์ฌ์์ Nuxt.js ํ๋ก์ ํธ๋ฅผ ์งํํ๋๋ฐ ์ด๋์๋ถํฐ ์์ํด์ผ ํ๋์ง ๊ฐ์ ์ก๊ธฐ ์ด๋ ค์ด ๋ถ
โ
์๋ฒ์ฌ์ด๋ ๋ ๋๋ง์ ๊ด์ฌ์ด ์๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์
์ด ๊ฐ์๋ฅผ ๋ง๋
์ง์๊ณต์ ์๋ฅผ ์๊ฐํฉ๋๋ค ๐

ํ์
๊ฐ๋ฐ ์ค๋ฌด์์
๋
ธํ์ฐ๋ฅผ ์๋ ค๋๋ ค์ ๐



์ด ๊ฐ์๋ง์ ํน์ง์
ํ์ธํ์ธ์ โจ

๊ฐ์ ๊ต์์ ์ ๊ณตํฉ๋๋ค.
๊ฐ์์์ ๋ค๋ฃฐ Nuxt.js ๋ฐ ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง ๊ด๋ จ ์ฃผ์ ๊ฐ๋
์ ์ ์์ฑ๋ ๊ต์๊ณผ ๊ทธ๋ฆผ์ ํตํด ์ฝ๊ฒ ์ดํดํ ์ ์๋๋ก ํฉ๋๋ค.
์ง์ ์ฌ์ดํธ๋ฅผ ์ ์ํด๋ณด์ธ์.
์ผํ๋ชฐ ์ฌ์ดํธ๋ฅผ ์ ์ํ๋ฉด์ Nuxt.js์ ์ฅ์ ๊ณผ ๋ฌธ๋ฒ์ ์์ฐ์ค๋ฝ๊ฒ ์ฒด๋ํ ์ ์์ต๋๋ค. (์ค์ต 70% ์ด์)
์์ฐ์ค๋ฝ๊ฒ ๊ตฌ์กฐ๋ฅผ ๋น๊ตํฉ๋๋ค.
์บกํดํ๊ต Vue.js ์๋ฆฌ์ฆ ๋ด์ฉ์ด ์์ฐ์ค๋ฝ๊ฒ Nuxt.js ๊ฐ์์ ์ฐ๊ฒฐ๋๋๋ก, ์ฑ๊ธ ํ์ด์ง์ ๊ตฌ์กฐ์ ๋น๊ตํ์ฌ ์ค๋ช
ํฉ๋๋ค.
๐ข ์ ์ ์ง์์ ํ์ธํด์ฃผ์ธ์!
๊ฐ์์์ ๋ฐฐ์ฐ๋
๋ด์ฉ์ ์๋ ค๋๋ ค์ ๐
์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง
๊ธฐ์กด ๋ทฐ CLI๋ก ์์ฑํ ํ๋ก์ ํธ๋ก ๊ฐ๋ฐํ์ ๋์์ ์ฐจ์ด์ ๊ณผ ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง์ ๋ํ ๋์ ๋ฐฉ์ ๊ทธ๋ฆฌ๊ณ ์ด์ ๋ฑ์ ์์ธํ ์ค๋ช
ํฉ๋๋ค.
์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง ๋์ ๋ฐฉ์ ์ดํด
์ค์ SSR์ด ์ ์ฉ๋ ์ฌ์ดํธ์ ๊ทธ๋ ์ง ์์ ์ฌ์ดํธ๋ฅผ ๋น๊ตํ๋ฉด์ ๋์ผ๋ก ๋ฐฐ์ด ๊ฐ๋
์ ์ฝ๊ฒ ์ดํดํ ์ ์๊ฒ ๋์์ค๋๋ค.
๋ ์ด์์ ํจํด ์ดํด
Nuxt.js์ ๋ ์ด์์ ์ปดํฌ๋ํธ๋ฅผ ์ดํดํ๊ธฐ ์ํ ๋์๊ณผ ๊ธฐ์กด ์ฑ๊ธ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์
๊ณผ์ ์ฐจ์ด์ ์ ์์ธํ ์ค๋ช
ํฉ๋๋ค.
Nuxt.js์ ESLint ๊ท์น
๋ทฐ CLI ํ๋ก์ ํธ๋ณด๋ค ๊ฐํ๋ Nuxt.js์ ESLint ๊ท์น์ ์ค๋ช
ํฉ๋๋ค. ์ฝ๋์์ ์ค์ ESLint๊ฐ ์ด๋ป๊ฒ ์ ์ฉ๋๊ณ ์๋์ง ์ดํด๋ด
๋๋ค.
๋ฐฑ์๋ API ์๋ฒ ๊ตฌ์ฑ ๋ฐ ์ฐ๋
์ผํ๋ชฐ ์ฌ์ดํธ ๊ฐ๋ฐ์ ์ํ ๋ฐฑ์๋ API ์๋ฒ ๊ตฌ์ฑ ๋ฐฉ๋ฒ์ ์๋ดํฉ๋๋ค. ์๋ฒ๋ฅผ ๊ตฌ์ฑํ๊ธฐ ์ํ ์ ์ฐจ๋ ์์
์ดํ์๋ ์ค์ค๋ก ์งํํด ๋ณผ ์ ์๋๋ก ๊ฐ์ด๋๋ฅผ ์ ๊ณตํฉ๋๋ค.
์ปดํฌ๋ํธ ์ค๊ณ ๋ฐฉ์
React, Vue ๋ฑ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ ํ๋ ์์ํฌ์์ ๊ณ ๋ฏผํด์ผ ํ๋ ์ปดํฌ๋ํธ ์ค๊ณ ๋ฐฉ์์ ๋ํด์ ์๋ดํ๊ณ ๊ตฌํ๋ ๋ด์ฉ์ ๋ํด ๋ฆฌ๋ทฐํฉ๋๋ค.
์ผํ๋ชฐ๊ณผ ์ ์ฌํ ์น ์ฌ์ดํธ ์ ์
์ผํ๋ชฐ๊ณผ ์ ์ฌํ ์น ์ฌ์ดํธ๋ฅผ ์ค์ API๋ก ์ฐ๋ํ์ฌ ์ ์ํด๋ด
๋๋ค. ์ ์ํ๋ ๊ณผ์ ์์ Nuxt.js์ ๊ฐ๋
์ ์ฐจ๋ก๋๋ก ํ๋ํ๋ ์ ์ฉํด ๋ณด๋ฉด์ ๊ธฐ์กด Vue.js ์ ํ๋ฆฌ์ผ์ด์
๊ณผ์ ์ฐจ์ด์ ์ ์์๋ด
๋๋ค.
๋งํฌ์
& ์คํ์ผ๋ง์ ํ์ํ๋งํผ๋ง
ํ๋ฉด ๊ฐ๋ฐ์ ์ํ ์ฃผ์ ๋ ์ด์์ ๋งํฌ์
๊ณผ ์คํ์ผ๋ง๋ง ์งํํ๊ณ ์ธ๋ถ ์คํ์ผ๋ง์ ๊นํ ๋ฆฌํฌ์งํ ๋ฆฌ ์์ค ์ฝ๋๋ก ์ ๊ณตํฉ๋๋ค. Nuxt.js์ ๊ฐ๋
ํ์ต์ ์ง์คํ ์ ์์ด ๋น ๋ฅด๊ณ ํจ์จ์ ์ธ ํ์ต์ด ๊ฐ๋ฅํฉ๋๋ค.
์์ฃผ ๋ฌป๋ ์ง๋ฌธ ๐ฌ
Q. Vue.js๋ ์ฒ์ ์ ํ๋๋ฐ ์ด ๊ฐ์๋ฅผ ๋ค์ด๋ ๋ ๊น์?
์ด ๊ฐ์๋ Vue.js์ ๊ธฐ๋ณธ ๊ฐ๋
์ ์๊ณ ์๋ ๋ถ๋ค์ด ๋ฃ๊ธฐ ์ ํฉํฉ๋๋ค. Nuxt.js๋ Vue.js๋ก ๊ฐ๋ฐํ ๋ ์์์ผ ํ๋ ๊ธฐ๋ณธ ์ง์์ ๊ท์น์ด ์กฐ๊ธ ๋ ์ถ๊ฐ๋ ํ๋ ์์ํฌ๋ก ๋ณด์๋ฉด ์ข์ ๊ฒ ๊ฐ์์. ์บกํดํ๊ต์ Vue.js ์๋ฆฌ์ฆ ๊ฐ์ ์์ํ๊ธฐ~๋์ฅ๋ด๊ธฐ๊น์ง ๋จผ์ ์๊ฐํ์ ํ ๋ฃ๋ ๊ฑธ ์ถ์ฒ ๋๋ฆฝ๋๋ค.
Q. ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง ๊ฐ๋
์ ์ ํ ๋ชจ๋ฅด๋๋ฐ ์์
์ ๋ค์ด๋ ๋ ๊น์?
๋ค, ๋ค์ผ์
๋ ๋ฉ๋๋ค. Nuxt.js์ API๋ ์ฌ์ฉ๋ฒ๋ง ๋ค๋ฃฐ ๋ฟ๋ง ์๋๋ผ ์ ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง์ ์ฐ๋ฉด ์ข์์ง ๊ธฐ์กด์ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ๋ ๋๋ง (์ฑ๊ธ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์
)๊ณผ์ ์ฐจ์ด์ ์ ๋ฌด์์ธ์ง ํ๋ํ๋ ์ธ๋ถ์ ์ผ๋ก ์์ธํ ๋ค๋ฃจ๊ณ ์์ต๋๋ค. ์์
์ ๋ฃ๊ณ ๋๋ฉด ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง์ ๋ํ ๊ฐ๋
์ ํ์คํ ์ก์ผ์ค ์ ์์ ๊ฑฐ์์.
Q. ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ด ์ฒ์์ธ๋ฐ ์๊ฐํด๋ ๊ด์ฐฎ์๊น์?
์ด ๊ฐ์๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์์ ์ฒ์ ์์ํ์๋ ๋ถ๋ค๊ป๋ ์ ํฉํ์ง ์์ ๊ฐ์์
๋๋ค. HTML, CSS, JS์ ๋ํ ๊ธฐ๋ณธ์ ์ธ ๊ฐ๋
์ด ์๋ ๋ถ๋ค์ด ๋ฃ๊ธฐ ์ข๊ฒ ๊ฐ์๋ฅผ ๊ตฌ์ฑํ์์ต๋๋ค. ์ต์ํ Vue.js์ ๊ธฐ๋ณธ ๊ฐ๋
๊ณผ ๋ผ์ฐํฐ๋ฅผ ์ด์ฉํ ์ฑ๊ธ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์
์ ๊ฐ๋
์ ์ดํดํ ์ํ์์ ๋ฃ๋ ๊ฑธ ์ถ์ฒ๋๋ฆฝ๋๋ค.
Q. Vue.js 3์ด ๋์๋๋ฐ Vue 3์ผ๋ก ์งํํ๋์? Vue 2๋ก ์งํํ๋์?
์ด ์์
์ Vue 2๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์งํ๋ฉ๋๋ค. ์์ง Vue 3๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ Nuxt.js์ ๊ณต์ ๋ฒ์ ์ ์ถ์๋์ง ์์ ์ํ์ด๊ณ Vue 3 ์ญ์ ํ์
์์ ์ฌ์ฉํ๊ธฐ์๋ ์ ์ฝ ์ฌํญ์ด ๋ง๊ธฐ ๋๋ฌธ์ ํ์ต ํ ๋ฐ๋ก ์ ์ฉํ ์ ์๋ Vue 2๋ฅผ ๊ธฐ์ค์ผ๋ก ์ ์ํ์์ต๋๋ค. ์ถํ์ Vue 3๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ ์ํ๊ณ๊ฐ ์์ ๋๋ฉด Vue 3 ๋ด์ฉ๋ ์ถ๊ฐ๋ก ์
๋ฐ์ดํธ ํ ์์ ์ด๋ ์ฐธ๊ณ ํด ์ฃผ์ธ์ :)
โป Vue 2๋ก ๋ฐฐ์ด ๋ด์ฉ์ ๋ชจ๋ Vue 3์์ ๊ทธ๋๋ก ์ ์ฉํ ์ ์์ต๋๋ค. Vue 2์ Vue 3์ ์ฐจ์ด๋ ์ฃผ์ API 1๊ฐ ์ ๋์ ์ฐจ์ด๋ก ๋ณด์๋ฉด ๋๊ณ , ํฌ๊ฒ ์ฐจ์ด๊ฐ ์์ง๋ ์์ต๋๋ค.
์บกํดํ๊ต์
๋ค๋ฅธ ๊ฐ์๊ฐ ๊ถ๊ธํ๋ค๋ฉด?

์ง์๊ณต์ ์ ์๊ฐ ๐จโ๐ซ
์ฅ๊ธฐํจ (์บกํดํ๊ต)
"์ธํ๋ฐ์ด ๋ง๋ ์ฌ๋" ์ธํฐ๋ทฐ
โ๊ฐ์ ์์ต์ผ๋ก Vue.js ์คํ์์ค +
์ํ์ฝ๋ฉ์ ํ์ํฉ๋๋ค ๐โ
๊ฐ์ ํ ์ธ์ ์ ๊ณตํฉ๋๋ค!
์๋ฆฌ์ฆ "Vue.js๋ก ์์ฑํ๋ ํ๋ก ํธ์๋
๊ฐ๋ฐ์ ๋ก๋๋งต" 25% ํ ์ธ (ํด๋ฆญ)
์์
์ด ์๋ ์คยท๊ณ ๋ฑํ์,
๋ํ์์ ์ํ ํ์ 50% ํ ์ธ (ํด๋ฆญ)