Vue.js / Nuxt.js

Nuxt ๋ชจ๋“ˆ

Nuxt ๋ชจ๋“ˆ ์ƒํƒœ๊ณ„, Nuxt Content, Nuxt Image, Nuxt UI, Pinia ๋ชจ๋“ˆ, ์ปค์Šคํ…€ ๋ชจ๋“ˆ ์ƒ์„ฑ

18 ๋ฉด์ ‘ ์งˆ๋ฌธยท
Mid-Level
1

Nuxt ๋ชจ๋“ˆ์ด๋ž€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

๋‹ต๋ณ€

Nuxt ๋ชจ๋“ˆ์€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์‹œ์ž‘ ์‹œ ์‹คํ–‰๋˜๋ฉฐ Nuxt์˜ ๊ธฐ๋ณธ ๋™์ž‘์„ ํ™•์žฅํ•˜๊ฑฐ๋‚˜ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค. ๋ชจ๋“ˆ์€ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์ถ”๊ฐ€ํ•˜๊ณ , ๋นŒ๋“œ๋ฅผ ๊ตฌ์„ฑํ•˜๊ณ , ํ›…์„ ๋“ฑ๋กํ•˜๊ฑฐ๋‚˜, ์„œ๋“œํŒŒํ‹ฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ†ตํ•ฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. @nuxt/content๋‚˜ @nuxt/image์ฒ˜๋Ÿผ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๊ณ  ๊ณต์œ  ๊ฐ€๋Šฅํ•œ ๋ฐฉ์‹์œผ๋กœ Nuxt๋ฅผ ํ™•์žฅํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค.

2

์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— Nuxt ๋ชจ๋“ˆ์„ ์„ค์น˜ํ•˜๊ณ  ๊ตฌ์„ฑํ•˜๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ•˜๋‚˜์š”?

๋‹ต๋ณ€

Nuxt ๋ชจ๋“ˆ์„ ์„ค์น˜ํ•˜๋ ค๋ฉด ๋จผ์ € npm/yarn/pnpm์œผ๋กœ ์„ค์น˜ํ•œ ๋‹ค์Œ nuxt.config.ts์˜ modules ๋ฐฐ์—ด์— ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด npm install @nuxt/content๋ฅผ ์‹คํ–‰ํ•œ ํ›„ modules: []์— '@nuxt/content'๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ์ผ๋ถ€ ๋ชจ๋“ˆ์€ ๊ฐ™์€ nuxt.config.ts ํŒŒ์ผ์—์„œ ๊ตฌ์„ฑ ์˜ต์…˜๋„ ๋ฐ›์Šต๋‹ˆ๋‹ค.

3

@nuxt/content ๋ชจ๋“ˆ์˜ ์ฃผ์š” ๋ชฉ์ ์€ ๋ฌด์—‡์ธ๊ฐ€์š”?

๋‹ต๋ณ€

@nuxt/content๋Š” Markdown, YAML, CSV, JSON ํŒŒ์ผ์„ ์ฟผ๋ฆฌ ๊ฐ€๋Šฅํ•œ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ์ฝ˜ํ…์ธ  ์ค‘์‹ฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค. ํ™•์žฅ๋œ Markdown ์ง€์›, syntax highlighting, ์ „๋ฌธ ๊ฒ€์ƒ‰, ์ž๋™ ๋ชฉ์ฐจ ์ƒ์„ฑ์„ ๊ฐ–์ถ˜ ํŒŒ์ผ ๊ธฐ๋ฐ˜ ์ฝ˜ํ…์ธ  ๊ด€๋ฆฌ ์‹œ์Šคํ…œ(CMS)์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๋ธ”๋กœ๊ทธ, ๋ฌธ์„œ, ์ •์  ์‚ฌ์ดํŠธ์— ์ด์ƒ์ ์ž…๋‹ˆ๋‹ค.

4

@nuxt/content๋กœ ํŠน์ • ๋ฌธ์„œ๋ฅผ ๊ฐ€์ ธ์˜ค๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ•˜๋‚˜์š”?

5

@nuxt/image ๋ชจ๋“ˆ์˜ ์ฃผ์š” ์žฅ์ ์€ ๋ฌด์—‡์ธ๊ฐ€์š”?

+15 ๋ฉด์ ‘ ์งˆ๋ฌธ

๊ธฐํƒ€ Vue.js / Nuxt.js ๋ฉด์ ‘ ์ฃผ์ œ

JavaScript ๊ธฐ์ดˆ

Junior
20๊ฐœ ์งˆ๋ฌธ

๋ชจ๋˜ JavaScript (ES6+)

Junior
20๊ฐœ ์งˆ๋ฌธ

Vue ๊ธฐ์ดˆ

Junior
22๊ฐœ ์งˆ๋ฌธ

Vue ์ปดํฌ๋„ŒํŠธ

Junior
20๊ฐœ ์งˆ๋ฌธ

Vue Router

Junior
18๊ฐœ ์งˆ๋ฌธ

Pinia State Management

Junior
20๊ฐœ ์งˆ๋ฌธ

Vuex (Legacy)

Mid-Level
15๊ฐœ ์งˆ๋ฌธ

Composition API

Mid-Level
24๊ฐœ ์งˆ๋ฌธ

Vue ๋ฐ˜์‘์„ฑ

Mid-Level
20๊ฐœ ์งˆ๋ฌธ

Nuxt ๊ธฐ์ดˆ

Mid-Level
22๊ฐœ ์งˆ๋ฌธ

Nuxt ๋ฐ์ดํ„ฐ ํŽ˜์นญ

Mid-Level
20๊ฐœ ์งˆ๋ฌธ

Nuxt SSR ๋ฐ SSG

Mid-Level
22๊ฐœ ์งˆ๋ฌธ

Nuxt ์„œ๋ฒ„ ๋ผ์šฐํŠธ

Mid-Level
20๊ฐœ ์งˆ๋ฌธ

Vue ์ปดํฌ์ €๋ธ”

Mid-Level
20๊ฐœ ์งˆ๋ฌธ

Vue ํผ๊ณผ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ

Mid-Level
20๊ฐœ ์งˆ๋ฌธ

Nuxt ์ƒํƒœ ๊ด€๋ฆฌ

Mid-Level
18๊ฐœ ์งˆ๋ฌธ

Vue ํ…Œ์ŠคํŒ…

Mid-Level
20๊ฐœ ์งˆ๋ฌธ

Nuxt ๋ฐฐํฌ ๋ฐ CI/CD

Mid-Level
22๊ฐœ ์งˆ๋ฌธ

Vue ์„ฑ๋Šฅ

Senior
22๊ฐœ ์งˆ๋ฌธ

Vue ๊ณ ๊ธ‰ ํŒจํ„ด

Senior
24๊ฐœ ์งˆ๋ฌธ

Vue์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๋Š” TypeScript

Senior
22๊ฐœ ์งˆ๋ฌธ

Nuxt ์ธ์ฆ

Senior
20๊ฐœ ์งˆ๋ฌธ

Nuxt์—์„œ์˜ SEO

Senior
20๊ฐœ ์งˆ๋ฌธ

Nuxt ๊ตญ์ œํ™”

Senior
18๊ฐœ ์งˆ๋ฌธ

Vue ์•„ํ‚คํ…์ฒ˜

Senior
22๊ฐœ ์งˆ๋ฌธ

Nuxt ๋ณด์•ˆ

Senior
20๊ฐœ ์งˆ๋ฌธ

Vue ์ƒํƒœ๊ณ„

Senior
18๊ฐœ ์งˆ๋ฌธ

Vue 2โ†’3 ๋ฐ Nuxt 2โ†’3 ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜

Senior
22๊ฐœ ์งˆ๋ฌธ

๋‹ค์Œ ๋ฉด์ ‘์„ ์œ„ํ•ด Vue.js / Nuxt.js์„ ๋งˆ์Šคํ„ฐํ•˜์„ธ์š”

๋ชจ๋“  ์งˆ๋ฌธ, flashcards, ๊ธฐ์ˆ  ํ…Œ์ŠคํŠธ, ์ฝ”๋“œ ๋ฆฌ๋ทฐ ์—ฐ์Šต, ๋ฉด์ ‘ ์‹œ๋ฎฌ๋ ˆ์ดํ„ฐ์— ์ ‘๊ทผํ•˜์„ธ์š”.

๋ฌด๋ฃŒ๋กœ ์‹œ์ž‘ํ•˜๊ธฐ