์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

Next.js ์‹œ์ž‘ํ•˜๊ธฐ(feat. ์ง€๋„ ์„œ๋น„์Šค ๊ฐœ๋ฐœ)

Next.js์˜ ๊ธฐ๋ณธ์„ ๋‹ค๋ฃจ๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. Next.js๋กœ ์ง€๋„ ์„œ๋น„์Šค๋ฅผ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ๊ฐœ๋ฐœํ•ด๋ด…๋‹ˆ๋‹ค.

(4.5) ์ˆ˜๊ฐ•ํ‰ 47๊ฐœ

์ˆ˜๊ฐ•์ƒ 907๋ช…

๋‚œ์ด๋„ ์ดˆ๊ธ‰

์ˆ˜๊ฐ•๊ธฐํ•œ ๋ฌด์ œํ•œ

ํ”„๋ก ํŠธ์—”๋“œ
ํ”„๋ก ํŠธ์—”๋“œ
front-end
front-end
next.js
next.js
ํ”„๋ก ํŠธ์—”๋“œ
ํ”„๋ก ํŠธ์—”๋“œ
front-end
front-end
next.js
next.js
์—”์”จ์†Œํ”„ํŠธ
๊ฐ€๋น„์•„
์•ผ๋†€์ž
LG์ „์ž
์ฟ ํŒก

์ฟ ํŒก

์ž„์ง์›๋“ค๋„ ์ด ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ์žˆ์–ด์š”!

์—”์”จ์†Œํ”„ํŠธ
๊ฐ€๋น„์•„
์•ผ๋†€์ž
LG์ „์ž
์ฟ ํŒก

์ฟ ํŒก

์ž„์ง์›๋“ค๋„ ์ด ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ์žˆ์–ด์š”!

๋จผ์ € ๊ฒฝํ—˜ํ•œ ์ˆ˜๊ฐ•์ƒ๋“ค์˜ ํ›„๊ธฐ

4.5

5.0

๊น€ํšจ์‹ 

60% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

๊ฐ•์˜์‹œ๊ฐ„์€ 4์‹œ๊ฐ„์œผ๋กœ ์งง์•„๋ณด์ด์ง€๋งŒ, ์‹ค์ œ๋กœ ์ฝ”๋“œ ์น˜๋Š” ์‹œ๊ฐ„์ด ํฌํ•จ๋˜์ง€ ์•Š์•„์„œ(๋นจ๋ฆฌ ๊ฐ๊ธฐ๋กœ ๋ณด์—ฌ์ฃผ์‹œ๊ฑฐ๋‚˜, ์ด๋ฏธ ๋งŒ๋“ค์–ด๋‘์‹  ์ฝ”๋“œ๋ฅผ ๋ณด์—ฌ์ฃผ์‹œ๋ฉด์„œ ์„ค๋ช…ํ•˜๋Š” ํ˜•ํƒœ์ž…๋‹ˆ๋‹ค) ์‹ค์ œ๋กœ๋Š” ๊ณต๋ถ€ ์‹œ๊ฐ„์ด ๋” ์˜ค๋ž˜ ๊ฑธ๋ฆฝ๋‹ˆ๋‹ค. ๊ทผ๋ฐ ์ €๋Š” ์˜คํžˆ๋ ค ๊ทธ๋ž˜์„œ ์ข‹์Šต๋‹ˆ๋‹ค! ใ…‹ใ…‹ ๋ญ”๊ฐ€ ๋ถˆํ•„์š”ํ•œ ๋ถ€๋ถ„์˜ ์‹œ๊ฐ„์€ ์ค„์—ฌ์ฃผ์‹œ๊ณ , ํ•ต์‹ฌ๋งŒ ์•Œ๋ ค์ฃผ์‹œ๋Š” ๊ฐ•์˜์—ฌ์„œ ํ˜ผ์ž ๊ณต๋ถ€ํ•˜๊ธฐ ์ข‹์Šต๋‹ˆ๋‹ค. ๋ฉ‹์ง„ ๊ฐ•์˜ ๋งŒ๋“ค์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

5.0

์ฝฉํŒฅํŒฅ์ฃฝ

100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

ํ•œ ์ค„ ์†Œ๊ฐ : ํฐ ๊ธฐ๋Œ€ ์—†์ด ๊ฒฐ์ œํ–‡๋‹ค๊ฐ€ ์ด ๊ฐ•์˜ ์ข‹๋‹ค ๋ผ๊ณ  ๋А๋‚Œ ๊ฒฐ์ œ๊ณ„๊ธฐ : ํƒ€ ๊ฐ•์˜ ๊ฒฐ์ œํ•œ๊ฒŒ ์žˆ๋Š”๋ฐ ์—…๋ฌด๋•œ์— ์งฌ์ด ์•ˆ๋‚˜๋‹ค ์‹ ๊ทœ๋Š” ๋ชจ๋˜ ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ์œผ๋กœ ์ง„ํ–‰ํ•œ๋‹คํ•˜์—ฌ ํ•„์š”ํ•œ ์‹œ๊ธฐ๊ฐ€ ๋˜์–ด ๊ธฐ์กด ๊ฒฐ์ œ๊ฐ•์˜ ๋ณด๋Š”๋ฐ ๋„ˆ๋ฌด ๊ธธ๊ณ  ์ง€๋ฃจํ•ด์„œ ์งง์€๊ฑฐ ์ฐพ๋‹ค๊ฐ€ ๋ชฉ์ฐจ๋ณด๊ณ  ๊ฒฐ์ œํ•จโ€จโ€จ ์ข‹์•˜๋˜ ์  1. ๋ธŒ๋ผ์šฐ์ € ์—ด๊ณ  ๋””๋ฒ„๊น…ํ•˜๋ฉด์„œ ์›๋ฆฌ๋ฅผ ์•Œ๋ ค์ฃผ์–ด ๊นŠ์ด์žˆ๋Š” ๊ณต๋ถ€๊ฐ€ ๋˜์—ˆ๋‹คโ€จ(๋‹จ์ˆœ ๊ตฌํ˜„์ด ์•„๋‹Œ ๊นŠ์ด์žˆ๋Š” ๊ณต๋ถ€๋ฅผ ํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค) 2. ๋ถˆํ•„์š”ํ•œ ์„ค๋ช…์„ ์—†์ด next.js์— ์ดˆ์ ์„ ๋งž์ถ˜๋‹ค (scss, css.module, react, ์บ์‹œ ๋ฐฐ๊ฒฝ์ง€์‹ ๋“ฑ) 3. ๊ต์ˆ˜๋ฒ•์ด ์ข‹์•˜๋‹ค โ€จ๋ธŒ๋žœ์น˜ ์ฒดํฌ์•„์›ƒํ•˜๋ฉด์„œ ์ฃผ์„๋งŒ ์ œ๊ฑฐํ•˜๊ณ  ์—ฌ๋Ÿฌ ๋น„๊ต์‚ฌํ•ญ ๋ณด์—ฌ์ฃผ๋ฉฐ ์ฐจ์ด์  ๋ฐ ํšจ์œจ์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•์„ ์ง์ ‘ ๋ณด์—ฌ์ค€๋‹ค (์ฐจ์ด์  ๊ทธ๋ฆฌ๊ณ  ํ™œ์šฉ๋ฒ•์„ ๊ตฐ๋”๋”๊ธฐ ์—†๋Š” ์„ค๋ช…์„ ํ•ด์ฃผ์—ˆ๋‹ค) 4. ๊ฐ€๊ฒฉ์ด ํ˜œ์žโ€จ ์ด์ •๋„ ํ€„๋ฆฌํ‹ฐ์— ์ด ๊ฐ€๊ฒฉ ๋„ˆ๋ฌด ํ˜œ์ž๋ผ๊ณ  ์ƒ๊ฐ๋œ๋‹ค. 5. ์งˆ๋ฌธ์— ๋Œ€ํ•œ ๋‹ต๋ณ€์ด ๊ต‰์žฅํžˆ ์ƒ์„ธํ•˜๋‹ค โ€จ์ด๋ ‡๊ฒŒ๊นŒ์ง€ ์‹œ๊ฐ„์„ ์จ์„œ ๋‹ต๋ณ€์„ ํ•ด์ค€๋‹ค๊ณ ? ๋ผ๊ณ  ๋А๊ปด์งˆ ์ •๋„์˜€๋‹ค 6. tailwind ์‚ฌ์šฉ Xโ€จ ์Šคํƒ€์ผ๋ง์„ ์œ„ํ•œ ์Šคํƒ€์ผ์„ ์™ธ์šฐ๊ณ  html ํƒœ๊ทธ์— ์Šคํƒ€์ผ๋งํ•˜๋Š”๊ฒŒ ๋„ˆ๋ฌด ๋ถˆํŽธํ•œ๋ฐ ๋‹คํ–‰์ด์˜€์Šต๋‹ˆ๋‹ค. 7. ๊ณต์‹๋ฌธ์„œ ๋‚ด์šฉ๋„ ๊ฐ™์ด ๋ด์ค˜์„œ ๋‚ด๊ฐ€ ์ง์ ‘๋ด์•ผ๋˜๋Š” ๋น„์šฉ์ด ๊ฐ์†Œ 8. seo๊ด€๋ จ๋œ ๋‚ด์šฉ ์ž˜ ๋ชฐ๋ผ์„œ ๋‹ต๋‹ตํ–‡๋Š”๋ฐ ์ƒ๊ฐ๋ณด๋‹ค ์‰ฝ๊ฒŒ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์—‡๊ณ  ์š”์•ฝ๋„ ๋„˜ ์ž˜๋˜์ž‡์Œ 9.์›น ์ ‘๊ทผ์„ฑ์„ ๊ณ ๋ คํ•œ html ์ฝ”๋“œ ์ž‘์„ฑ์„ ์™œ ํ•ด์•ผํ•˜๋Š”์ง€ ์•Œ๊ฒŒ๋˜์—‡์Œ ๊ฐœ์ธ์ ์œผ๋กœ ์ถ”๊ฐ€๋˜์—ˆ์œผ๋ฉด ํ•˜๋Š” ๋‚ด์šฉ 1. vscode์—์„œ monorepo๋กœ next.js ์‚ฌ์šฉ์‹œ ๋””๋ฒ„๊น… ์…‹ํŒ…์ด ์‰ฝ์ง€ ์•Š์•„์„œ ์ด๊ฒƒ๋„ ์•Œ๋ ค์ฃผ์‹œ๋ฉด ๋„ˆ๋ฌด ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. (๋””๋ฒ„๊น… ์…‹ํŒ…์ด๋ผ๋Š”๊ฑด ์ค‘๋‹จ์  ๋งํ•˜๋Š” ๊ฒƒ์ž„ next.js ๊ณต์‹๋ฌธ์„œ์—์„œ๋„ ๋ชจ๋…ธ๋ ˆํฌ ๋””๋ฒ„๊น… ์…‹ํŒ…์€ ๋‚˜์™€์žˆ์ง€ ์•Š์•„์š”)

5.0

JC

31% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

์‹ค์ œ Next.js๊ฐ€ ์ƒ์„ฑํ•œ ํŒŒ์ผ๊นŒ์ง€ ๋“ค์—ฌ๋‹ค๋ณด๋ฉด์„œ ๋ Œ๋”๋ง ๋ฐฉ์‹์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ด์ฃผ์‹  ๊ฒƒ์ด Next.js ๋™์ž‘ ์ดํ•ด์— ํฐ ๋„์›€์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋˜ ์ง€๋„ ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“œ๋Š” ๊ณผ์ •์„ ์ž์„ธํžˆ ๋ณด์—ฌ์ฃผ์…”์„œ, ๊ณผ์ • ์ค‘์— ์‚ฌ์šฉ๋œ ์—ฌ๋Ÿฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์— ๋Œ€ํ•œ ์ •๋ณด๋‚˜ ์ž์ž˜ํ•œ ๊ฐœ๋ฐœ ํŒ๋“ค์„ ๋งŽ์ด ์–ป์–ด๊ฐˆ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. React์˜ ๊ธฐ์ดˆ๋ฅผ ์–ด๋А ์ •๋„ ์•Œ๊ณ  ์žˆ์„ ๋•Œ, ์ด ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉด ์‹ค์šฉ์ ์ธ ์›น์‚ฌ์ดํŠธ๋ฅผ ์ง์ ‘ ๋งŒ๋“ค์–ด๋ณผ ์ˆ˜ ์žˆ๋Š” ๋‹จ๊ณ„๊นŒ์ง€ ๋‚˜์•„๊ฐ€๋Š” ๋ฐ์— ํฐ ๋„์›€์ด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค!

์ˆ˜๊ฐ• ํ›„ ์ด๋Ÿฐ๊ฑธ ์–ป์„ ์ˆ˜ ์žˆ์–ด์š”

  • Next.js ๊ธฐ๋ณธ ๊ตฌ์กฐ์™€ ๋‹ค์–‘ํ•œ API

  • Next.js๋กœ ์ง€๋„ ์›น์„œ๋น„์Šค ์ œ์ž‘

  • Next.js ํ”„๋กœ์ ํŠธ ๋ฐฐํฌ, ๊ฒ€์ƒ‰์—”์ง„ ๋“ฑ๋ก, ๊ฐ์ข… ์ตœ์ ํ™”

์•ž์„œ๊ฐ€๋Š” FE ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ Next.js! 
๋งค์žฅ ์ง€๋„ ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค๋ฉฐ ์‰ฝ๊ณ  ์žฌ๋ฏธ์žˆ๊ฒŒ.

์ง€๋„ ์„œ๋น„์Šค ์ œ์ž‘ - ๋ฐฐํฌ - ์ตœ์ ํ™”๊นŒ์ง€ 
Next.js ํ•œ๋ฒˆ์— ์‹œ์ž‘ํ•˜๊ธฐ

โœ…
Next.js๋กœ ๋งŒ๋“ค์–ด์ง„ ์›น ์„œ๋น„์Šค์˜ ์ฝ”๋“œ๋ฅผ ์‚ดํŽด๋ณด๊ณ  ์‹ถ๋‹ค๋ฉด

โœ…
๋ฐฑ์—”๋“œ ์ฝ”๋“œ ์—†์ด ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ์ˆ ๋กœ ์›น ์„œ๋น„์Šค๋ฅผ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ์™„์„ฑํ•˜๋Š” ๊ณผ์ •์„ ์•Œ๊ณ  ์‹ถ๋‹ค๋ฉด

โœ…
SSR/SSG/CSR ๋“ฑ ๋‹ค์–‘ํ•œ ์ตœ์ ํ™” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ๊ถ๊ธˆํ•˜๋‹ค๋ฉด

Next.js ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ผ๋ฉด!

Next.js ์ž…๋ฌธ/์ดˆ๊ธ‰ ๋‹จ๊ณ„์˜ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ฐฑ์—”๋“œ ์ฝ”๋“œ ์—†์ด Next.js์—์„œ ์ง€์›ํ•˜๋Š” ๋‹ค์–‘ํ•œ API๋กœ ๊ฐ„ํŽธํ•˜๊ฒŒ ์ง€๋„ ์„œ๋น„์Šค๋ฅผ ๊ฐœ๋ฐœํ•˜๋Š” ๊ณผ์ •์„ ํ†ตํ•ด ํ•„์ˆ˜์ ์ธ Next.js ์ž‘๋™ ๋ฐฉ์‹ ๋ฐ API๋ฅผ ๋ชจ๋‘ ํ•™์Šตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ง€๊ธˆ, ์™œ Next.js์ธ๊ฐ€์š”?

Next.js๋Š” ๋›ฐ์–ด๋‚œ ๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜, ๊ฐ„ํŽธํ•˜๊ณ  ์ง๊ด€์ ์ธ API, ๋‹ค์–‘ํ•œ ์ตœ์ ํ™”๋ฅผ ์ง€์›ํ•˜๋Š” ๋ฆฌ์•กํŠธ(React) ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค. SSR/SSG/CSR ๋ฐฉ์‹์„ ์ ์žฌ์ ์†Œ์— ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ณ , ๊ฐœ๋ฐœ์ž์˜ ํŽธ์˜๋ฅผ ๊ณ ๋ คํ•œ ์ตœ์ ํ™” ๊ธฐ๋Šฅ ๋˜ํ•œ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋™์•ˆ Next.js๋กœ ์—ฌ๋Ÿฌ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ Next.js์˜ ์žฅ์ ๋“ค์ด ๋ˆˆ์— ๋“ค์–ด์™”์Šต๋‹ˆ๋‹ค. ์•ž์œผ๋กœ ํ”„๋ก ํŠธ์—”๋“œ ์ง„์˜์—์„œ์˜ ๋”์šฑ ๋น ๋ฅธ ์„ฑ์žฅ์ด ๊ธฐ๋Œ€๋˜๋Š” Next.js๋ฅผ ์†Œ๊ฐœํ•ด๋“œ๋ฆฌ๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.


ํ•™์Šต ๋ถ€๋‹ด์€ ์ค„์ด๊ณ , 
๊ฐœ๋…์€ ๋”์šฑ ํ™•์‹คํ•˜๊ฒŒ.

์ง€๋„ ์„œ๋น„์Šค๋กœ A๋ถ€ํ„ฐ Z๊นŒ์ง€

์ง€๋„ ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค๋ฉฐ ๊ฐœ๋ฐœ ๊ณผ์ •์—์„œ ํ•„์ˆ˜์ ์ธ Next.js ์ž‘๋™ ๋ฐฉ์‹๊ณผ API์„ ๋ชจ๋‘ ํ•™์Šตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Next.js 12์™€ Next.js 13์— ๋ชจ๋‘ ํฌํ•จ๋˜๋Š” next/link, next/image ๋“ฑ์˜ API๋ฅผ ๋‘ ๋ฒ„์ „ ๋ชจ๋‘ ํ•™์Šตํ•ด๋ณด๋ฉฐ v13์˜ ์žฅ์ ์„ ์ดํ•ดํ•ฉ๋‹ˆ๋‹ค.

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ์‹ค๋ ฅ์„ ์‘ฅ์‘ฅ

๊ฐ•์˜๋ฅผ ๋”ฐ๋ผ ํ•™์Šตํ•˜๋Š” ๊ณผ์ •์—์„œ UI ๊ฐœ๋ฐœ(HTML/CSS), ์›น ์„ฑ๋Šฅ๊ณผ ์›น ์ ‘๊ทผ์„ฑ, ๋ฐฐํฌ, ๊ฒ€์ƒ‰ ์—”์ง„ ๋“ฑ๋ก ๋“ฑ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ์„œ ์•Œ์•„์•ผ ํ•  ๊ธฐ๋ณธ ๊ฐœ๋…๊นŒ์ง€ ํ•จ๊ป˜ ์ตํž ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•™์Šต์ž๋ฅผ ์ƒ๊ฐํ•œ ๊ฐ•์˜

๊ฐ•์˜ ์ง„ํ–‰์„ ์œ„ํ•œ ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ์ˆ˜์—…๋ณ„๋กœ branch๋กœ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ๋ชจ๋“  ์ˆ˜์—… ์˜์ƒ์— ์ž๋ง‰์„ ์ง€์›ํ•˜์—ฌ ๋‚ด์šฉ์„ ๋”ฐ๋ผ์˜ค์‹œ๊ธฐ์— ์–ด๋ ค์›€์ด ์—†๋„๋ก ์ œ์ž‘ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

๊ฐ•์˜๋Š” ์—…๋ฐ์ดํŠธ๋ฉ๋‹ˆ๋‹ค

์ถ”๊ฐ€ ์„ค๋ช…์ด ํ•„์š”ํ•œ ๋ถ€๋ถ„์— ๋Œ€ํ•ด ๋ณด๊ฐ•์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค. Next.js 13๊ณผ ๊ด€๋ จ๋œ ์†Œ์‹์— ๋Œ€ํ•ด์„œ๋„ ๊ฐ•์˜ ์—…๋ฐ์ดํŠธ๋ฅผ ์ง„ํ–‰ํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

๋งค์žฅ ์ง€๋„ ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค๋ฉฐ ๋ฐฐ์šฐ๋Š” Next.js API 10๊ฐ€์ง€ Point โœ…

  1. next/link๋กœ ์ง€๋„ ํŽ˜์ด์ง€/ํ”ผ๋“œ๋ฐฑ ํŽ˜์ด์ง€ ์ด๋™ํ•˜๊ธฐ
  2. next/image๋กœ ๋กœ๊ณ  ์ด๋ฏธ์ง€/๋งค์žฅ ์ด๋ฏธ์ง€ ์ตœ์ ํ™”
  3. next/script๋กœ ์ง€๋„ ์Šคํฌ๋ฆฝํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ
  4. API Routes๋กœ ๋งค์žฅ ๋ฐ์ดํ„ฐ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ
  5. getStaticProps๋กœ ์ง€๋„ ํŽ˜์ด์ง€ pre-renderingํ•˜๊ธฐ
  1. getStaticPaths๋กœ ๋ชจ๋“  ๋งค์žฅ์˜ dynamic routes๋ฅผ pre-renderingํ•˜๊ธฐ
  2. getServerSideProps์—์„œ ํ”ผ๋“œ๋ฐฑ ํŽ˜์ด์ง€ ๋ฐ์ดํ„ฐ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ
  3. Next.js 12์™€ 13์—์„œ next/link, next/image ๋“ฑ์˜ API ์ฐจ์ด์ 
  4. Lighthouse๋กœ ์›น ์„ฑ๋Šฅ ๊ฒ€์‚ฌ ๋ฐ ์›น ์ ‘๊ทผ์„ฑ, SEO ๊ฐœ์„ 
  5. Vercel์„ ํ†ตํ•œ Next.js ํ”„๋กœ์ ํŠธ ๋ฐฐํฌ

ํ•™์Šต ์ปค๋ฆฌํ˜๋Ÿผ ๐Ÿ“š

๐Ÿ‘‰ ๊ฐ•์˜์—์„œ ๋งŒ๋“œ๋Š” ์ง€๋„ ํ”„๋กœ์ ํŠธ ๋ฏธ๋ฆฌ๋ณด๊ธฐ (๋งํฌ)

Section 0: ๊ฐœ๋ฐœํ™˜๊ฒฝ ์„ธํŒ…

  • ๋ณธ๊ฒฉ์ ์ธ ๋‚ด์šฉ์„ ํ•™์Šตํ•˜๊ธฐ ์ „, Next.js ๊ธฐ๋ณธ ์„ธํŒ…์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.
  • create-next-app์œผ๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๊ณ  eslint, prettier๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.

Section 1: Data Fetching ์ดํ•ดํ•˜๊ธฐ

  • Next.js์˜ ๋‹ค์–‘ํ•œ data-fetching ๊ธฐ๋ฒ•์„ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค. (SSR/SSG/CSR)
  • next build ๊ฒฐ๊ณผ๋ฌผ๊ณผ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ์˜ network ํƒญ์„ ํ†ตํ•ด Next.js์˜ page transition ์ตœ์ ํ™” ์›๋ฆฌ๋ฅผ ์ดํ•ดํ•ฉ๋‹ˆ๋‹ค.
  • next/link์™€ next/router๋ฅผ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

Section 2: Header UI ๋งŒ๋“ค๊ธฐ

  • ๋กœ๊ณ  ์ด๋ฏธ์ง€๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ ์œ„ํ•ด next/image API๋ฅผ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.
  • Next.js 13 next/image์™€ Next.js 12 next/legacy/image์˜ ์šฉ๋Ÿ‰ ์ตœ์ ํ™”์™€ ๊ธฐ๋Šฅ์„ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.
  • Section 1์—์„œ ํ•™์Šตํ•œ ๋‚ด์šฉ์„ ๋ฐ”ํƒ•์œผ๋กœ ์ง€๋„ ํŽ˜์ด์ง€์™€ ํ”ผ๋“œ๋ฐฑ ํŽ˜์ด์ง€๋ฅผ routing ํ•ฉ๋‹ˆ๋‹ค.

Section 3: ์ง€๋„ UI ๋งŒ๋“ค๊ธฐ

  • ์ง€๋„ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ ์œ„ํ•ด next/script API๋ฅผ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.
  • next/router๋ฅผ ์ด์šฉํ•˜์—ฌ URL๋กœ ์ƒํƒœ๋ฅผ ์ €์žฅํ•˜๋Š” ๊ธฐ๋ฒ•์„ ๋ฐฐ์›๋‹ˆ๋‹ค.
  • Sprite marker image๋กœ ๋งˆ์ปค ์•„์ด์ฝ˜์„ ๊ทธ๋ฆฝ๋‹ˆ๋‹ค.
  • map, marker์— ๋Œ€ํ•œ click event๋ฅผ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค.
  • SWR์„ ์ด์šฉํ•˜์—ฌ ๊ฐ„๋‹จํ•˜๊ฒŒ ๋งค์žฅ ๋ฐ์ดํ„ฐ๋ฅผ ์ „์—ญ ์ƒํƒœ๋กœ ๊ด€๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

Section 4: ๋งค์žฅ ์ƒ์„ธ ํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ

  • ๋งค์žฅ ์ƒ์„ธ ํŽ˜์ด์ง€์— ๋Œ€ํ•œ dynamic routes๋ฅผ ๋งŒ๋“ค๊ณ  getStaticPaths API ์‚ฌ์šฉ๋ฒ•์„ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.
  • ๋งค์žฅ ์ƒ์„ธ UI๋ฅผ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.
  • next/router๋ฅผ ์ด์šฉํ•ด ๋งค์žฅ ์ƒ์„ธ ํŽ˜์ด์ง€์™€ ์ง€๋„ ํŽ˜์ด์ง€๋ฅผ ์—ฐ๊ฒฐํ•ฉ๋‹ˆ๋‹ค.

Section 5: Lighthouse๋กœ ์›น ์„ฑ๋Šฅ ๊ฒ€์‚ฌํ•˜๊ธฐ

  • Chrome Lighthouse๋ฅผ ์ด์šฉํ•ด ์›น ์„ฑ๋Šฅ์„ ๊ฒ€์‚ฌํ•ฉ๋‹ˆ๋‹ค.
  • ์›น ์„ฑ๋Šฅ, ์›น ์ ‘๊ทผ์„ฑ, SEO๋ฅผ ๊ฐœ์„ ํ•ฉ๋‹ˆ๋‹ค.
  • _document ๋˜๋Š” next-seo ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ด์šฉํ•ด HTML head๋ฅผ ์ฑ„์›๋‹ˆ๋‹ค.

Section 6: Vercel๋กœ ๋ฐฐํฌํ•˜๊ธฐ

  • ์™„์„ฑ๋œ ์›น์‚ฌ์ดํŠธ๋ฅผ vercel๋กœ ๋ฐฐํฌํ•ฉ๋‹ˆ๋‹ค.
  • next-sitemap ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ด์šฉํ•ด robots.txt์™€ sitemap.xml ํŒŒ์ผ์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
  • ๋„ค์ด๋ฒ„ ์„œ์น˜์–ด๋“œ๋ฐ”์ด์ €์™€ Google Search Console์— ์‚ฌ์ดํŠธ๋ฅผ ๋“ฑ๋กํ•ฉ๋‹ˆ๋‹ค.
  • Google Analytics๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

Section 7: ํ”„๋กœ์ ํŠธ ๋งˆ๋ฌด๋ฆฌ

  • Next.js API Routes๋กœ ๋งค์žฅ ๋ฐ์ดํ„ฐ๋ฅผ ์‘๋‹ตํ•˜๋Š” GET API๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค.
  • ํ”ผ๋“œ๋ฐฑ ํŽ˜์ด์ง€์—์„œ Firebase Cloud Firestore๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ฝ๊ณ  ์“ฐ๋Š” ๋ฐฉ๋ฒ•์„ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.
  • ์ง€๋„ ์„œ๋น„์Šค ๋งŒ๋“ค๊ธฐ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งˆ๋ฌด๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

Section 8~: ์งˆ๋ฌธ ๋‹ต๋ณ€ ๋ฐ ๋ณด๊ฐ•

  • ๊ฐ•์˜ ๋‚ด์šฉ ์ค‘ ๋ณด์ถฉ ์„ค๋ช…์ด ํ•„์š”ํ•˜๊ฑฐ๋‚˜ ์ค‘์š”ํ•œ ์งˆ๋ฌธ์ด ์žˆ์„ ๋•Œ ๋ณด๊ฐ•์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.
  • Next.js 13์— ๋Œ€ํ•ด ์ถ”๊ฐ€ ์„ค๋ช…์ด ํ•„์š”ํ•  ๋•Œ ๋ณด๊ฐ•์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

Next.js๋กœ ์„œ๋น„์Šค ๋ฐ ํ”„๋กœ๋•ํŠธ๋ฅผ ๊ฐœ๋ฐœํ•˜๋ฉฐ ์–ป์€ ํŒ์„ ์ „ํ•ด๋“œ๋ฆฝ๋‹ˆ๋‹ค.

์ €๋Š” ์Šคํƒ€ํŠธ์—… 4๋…„์ฐจ ํ”„๋ก ํŠธ์—”๋“œ ๋ฆฌ๋”๋กœ ์ผํ•˜๋ฉด์„œ Next.js๋กœ ๋ฉ”์ธ ํ”„๋กœ๋•ํŠธ ๋ฐ ํ™ˆํŽ˜์ด์ง€๋ฅผ ๊ฐœ๋ฐœํ•˜์˜€์Šต๋‹ˆ๋‹ค. ์ด์™ธ์— Next.js๋กœ ์›น ๊ฒŒ์ž„ ์„œ๋น„์Šค๋ฅผ ๊ฐœ๋ฐœํ•˜์—ฌ JUNCTION ASIA 2022 Track 3๋“ฑ์„ ์ˆ˜์ƒํ•œ ๊ฒฝํ—˜, Next.js T3 Stack์„ ํ™œ์šฉํ•œ ์›น์„œ๋น„์Šค๋กœ KAIST SPARCS HACKATHON 2๋“ฑ์„ ์ˆ˜์ƒํ•œ ๊ฒฝํ—˜์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋™์•ˆ Next.js๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉฐ ์•Œ๊ฒŒ ๋œ ์žฅ์ ๊ณผ ๋…ธํ•˜์šฐ๋ฅผ ๋” ๋งŽ์€ ๋ถ„๋“ค๊ป˜ ์†Œ๊ฐœํ•ด๋“œ๋ฆฌ๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค ๐Ÿ™‚


Q&A ๐Ÿ’ญ

Q. Next.js๋ฅผ ์™œ ๋ฐฐ์›Œ์•ผ ํ•˜๋‚˜์š”?

ํ˜„์กดํ•˜๋Š” ํ”„๋ก ํŠธ์—”ํŠธ ๊ฐœ๋ฐœ ํ”„๋ ˆ์ž„์›Œํฌ ์ค‘ ๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜์ด ์ข‹๊ณ , API๊ฐ€ ์ง๊ด€์ ์ด๊ณ , ๋‹ค์–‘ํ•œ ์ตœ์ ํ™”๋ฅผ ์ง€์›ํ•ด์ค€๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ง€๊ธˆ๊นŒ์ง€๋Š” ๋‹ค์–‘ํ•œ ๊ธฐ์ˆ ๋“ค์˜ ์žฅ๋‹จ์ ์„ trade-offํ•˜๋ฉฐ ์ €์šธ์งˆํ–ˆ๋‹ค๋ฉด, Next.js๋Š” ๊ทธ๋“ค์˜ ์žฅ์ ๋งŒ์„ ๋ฝ‘์•„ API๋กœ ์ œ๊ณตํ•˜๋Š” ๋ฐฉํ–ฅ์„ ์ถ”๊ตฌํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ฌด์—‡๋ณด๋‹ค ์ง€์†์ ์œผ๋กœ ์—…๋ฐ์ดํŠธ๊ฐ€ ์ด๋ฃจ์–ด์ง€๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์•ž์œผ๋กœ ์ ์  ๋” ๋งŽ์€ ๊ณณ์—์„œ ๋„์ž…๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Q. ๊ฐ•์˜ ๋‚œ์ด๋„๋Š” ์–ด๋А ์ •๋„์ธ๊ฐ€์š”?

Next.js ์ž…๋ฌธ์„ ๋ชฉํ‘œ๋กœ ์ œ์ž‘ํ•˜์—ฌ ์†Œ์Šค ์ฝ”๋“œ, ์˜์ƒ, ์ž๋ง‰์„ ๋”ฐ๋ผ์˜ค๋‹ค๋ณด๋ฉด ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ํ”„๋กœ์ ํŠธ๊ฐ€ ์™„์„ฑ๋˜๋„๋ก ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ•์˜๋ณ„๋กœ branch๊ฐ€ ์ œ๊ณต๋˜๊ธฐ ๋•Œ๋ฌธ์— ์‹ค๋ ฅ์— ๋”ฐ๋ผ ๊ฐ•์˜๋ฅผ ๋„˜์–ด๊ฐ€๊ฑฐ๋‚˜ ๋‹ค์‹œ ๋˜๋Œ์•„์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. React์— ๋Œ€ํ•œ ๊ธฐ๋ณธ ์ง€์‹(jsx ๋ฌธ๋ฒ•, useState/useEffect hook ๋“ฑ)์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

Next.js๊ฐ€ ์ฒ˜์Œ์ด์‹ค ๊ฒฝ์šฐ ๋‹ค์Œ ๋‹จ๊ณ„๋กœ Next.js๋ฅผ ์‹œ์ž‘ํ•ด๋ณด์‹œ๋Š” ๊ฒƒ์„ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

  1. ๊ฐ•์˜์™€ ์ œ๊ณต๋œ ์ฝ”๋“œ๋ฅผ ๋ณด๋ฉฐ ์ „์ฒด ํ๋ฆ„์„ ์ตํžŒ๋‹ค.
  2. ์ฝ”๋“œ๋ฅผ ์ž์‹ ๋งŒ์˜ ๋ฐฉ๋ฒ•์œผ๋กœ ๋ณ€๊ฒฝํ•˜๊ณ  ๊ฐœ์„ ํ•ด๋ณธ๋‹ค.
  3. ์ž์‹ ๋งŒ์˜ Next.js ํ”„๋กœ์ ํŠธ๋ฅผ ์™„์„ฑํ•œ๋‹ค.

Q. ์ˆ˜์—…์—์„œ๋Š” Next.js ์™ธ์— ์–ด๋–ค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋‚˜์š”?

TypeScript, ESlint/Prettier, SWR, next-seo, next-sitemap, sass(scss), react-icons, copy-to-clipboard, @types/navermaps, firebase(Cloud Firestore)๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ํ•ต์‹ฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(TypeScript, scss)๋ฅผ ์ œ์™ธํ•œ ๋‚˜๋จธ์ง€๋Š” ์„œ๋น„์Šค ๊ตฌํ˜„์„ ์œ„ํ•ด ์ตœ์†Œํ•œ์œผ๋กœ๋งŒ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ถ”๊ฐ€์ ์ธ UI library๋‚˜ CSS-in-JS๋Š” ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๐Ÿ’พ ์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ  ์‚ฌํ•ญ

  • ๊ฐ•์˜๋Š” Next.js 13.0.7 version, pages directory๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.
  • ์ด๋ก ๊ณผ ์‹ค์Šต์€ 1:2 ๋น„์ค‘์œผ๋กœ ์ง„ํ–‰๋ฉ๋‹ˆ๋‹ค. ์‹ค์Šต ๊ณผ์ •์—์„œ ๋‹จ์ˆœ UI ๊ตฌํ˜„์€ ๊ฐ€๋ณ๊ฒŒ ์„ค๋ช…ํ•˜๋ฉฐ, ์ด๋ก  ์‹œ๊ฐ„์— ๋ฐฐ์šด Next.js ๊ฐœ๋…์„ ์ค‘์‹ฌ์œผ๋กœ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.
  • IDE๋Š” JetBrains์˜ WebStorm, Package Manager๋Š” yarn์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. VSCode๋‚˜ npm์„ ์‚ฌ์šฉํ•˜๋‹ค๊ฐ€ ์–ด๋ ค์›€์„ ๊ฒช์œผ์‹ค ๊ฒฝ์šฐ ๋ฌธ์˜ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.
  • React Framework์ธ Next.js์— ๋Œ€ํ•œ ๊ฐ•์˜์ด๊ธฐ ๋•Œ๋ฌธ์— React์— ๋Œ€ํ•œ ์„ ์ˆ˜ ์ง€์‹์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.(jsx ๋ฌธ๋ฒ•, useState/useEffect hook ๋“ฑ)
  • scss๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. CSS-in-JS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(emotion, styled-components)๋Š” ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
  • React, yarn(npm) ์™ธ์—๋„ TypeScript ๋ฐ Git์— ๋Œ€ํ•œ ๊ธฐ์ดˆ ์ง€์‹์„ ํ•„์š”๋กœ ํ•ฉ๋‹ˆ๋‹ค.
  • ์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ SWR์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค(Next.js์™€ ๋™์ผํ•˜๊ฒŒ Vercel ํŒ€์—์„œ ๋งŒ๋“  ์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ). ํ•™์Šต์— ๋ถ€๋‹ด์ด ์—†๋„๋ก ์ตœ์†Œํ•œ์˜ ์ „์—ญ ์ƒํƒœ ์ €์žฅ ์šฉ๋„๋กœ๋งŒ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
  • ์ˆ˜์—…๋ณ„ Branch๋ฅผ ํฌํ•จํ•œ ์ „์ฒด ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ œ๊ณต๋œ ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ๋ณด๋ฉฐ ์˜์ƒ์— ์ง‘์ค‘ํ•˜์—ฌ ๋”ฐ๋ผ๊ฐ€์‹œ๋Š” ๊ฒƒ์„ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค. (ํ™”๋ฉด์˜ ์ฝ”๋“œ๋ฅผ ๋˜‘๊ฐ™์ด ๋”ฐ๋ผ ์“ฐ๋Š” ๋ฐฉ์‹์€ ์ง€์–‘ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.) ์ถ”๊ฐ€๋กœ Next.js ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ ํ•˜์‹œ๋ฉด ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.
  • ์งˆ๋ฌธ ๋‹ต๋ณ€๊ณผ ๋”๋ถˆ์–ด ๋ณด์ถฉ์ด ํ•„์š”ํ•˜๋‹ค ํŒ๋‹จ๋  ์‹œ ๋ณด๊ฐ• ์˜์ƒ์„ ์—…๋ฐ์ดํŠธํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • Next.js๋ฅผ ๋ฐฐ์›Œ๋ณด๊ณ  ์‹ถ์€ ๋ถ„๋“ค

  • ์›น์„œ๋น„์Šค ๊ฐœ๋ฐœ ๊ณผ์ •์„ ์ „์ฒด์ ์œผ๋กœ ๋ณด๊ณ  ์‹ถ์€ ๋ถ„๋“ค

  • ์ง€๋„ ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค์–ด๋ณด๊ณ  ์‹ถ์€ ๋ถ„๋“ค

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • React(jsx ๋ฌธ๋ฒ•, useState/useEffect ์‚ฌ์šฉ๋ฒ•)

  • git ์‚ฌ์šฉ๋ฒ•

  • yarn(๋˜๋Š” npm) ์‚ฌ์šฉ๋ฒ•

  • TypeScript ๋ฌธ๋ฒ•

์•ˆ๋…•ํ•˜์„ธ์š”
๋ฐ•์šฉ์ฃผ์ž…๋‹ˆ๋‹ค.

1,047

๋ช…

์ˆ˜๊ฐ•์ƒ

51

๊ฐœ

์ˆ˜๊ฐ•ํ‰

87

๊ฐœ

๋‹ต๋ณ€

4.5

์ 

๊ฐ•์˜ ํ‰์ 

2

๊ฐœ

๊ฐ•์˜

์•ˆ๋…•ํ•˜์„ธ์š”.
์Šคํƒ€ํŠธ์—…์—์„œ 5๋…„๋™์•ˆ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ ์ผํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
React, Next.js, ์ง€๋„, ์ฐจํŠธ, UI library ๋“ฑ์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

45๊ฐœ โˆ™ (4์‹œ๊ฐ„ 7๋ถ„)

ํ•ด๋‹น ๊ฐ•์˜์—์„œ ์ œ๊ณต:

์ˆ˜์—…์ž๋ฃŒ
๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

47๊ฐœ

4.5

47๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

  • ์ฝฉํŒฅํŒฅ์ฃฝ๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    ์ฝฉํŒฅํŒฅ์ฃฝ

    ์ˆ˜๊ฐ•ํ‰ 24

    โˆ™

    ํ‰๊ท  ํ‰์  4.3

    5

    100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    ํ•œ ์ค„ ์†Œ๊ฐ : ํฐ ๊ธฐ๋Œ€ ์—†์ด ๊ฒฐ์ œํ–‡๋‹ค๊ฐ€ ์ด ๊ฐ•์˜ ์ข‹๋‹ค ๋ผ๊ณ  ๋А๋‚Œ ๊ฒฐ์ œ๊ณ„๊ธฐ : ํƒ€ ๊ฐ•์˜ ๊ฒฐ์ œํ•œ๊ฒŒ ์žˆ๋Š”๋ฐ ์—…๋ฌด๋•œ์— ์งฌ์ด ์•ˆ๋‚˜๋‹ค ์‹ ๊ทœ๋Š” ๋ชจ๋˜ ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ์œผ๋กœ ์ง„ํ–‰ํ•œ๋‹คํ•˜์—ฌ ํ•„์š”ํ•œ ์‹œ๊ธฐ๊ฐ€ ๋˜์–ด ๊ธฐ์กด ๊ฒฐ์ œ๊ฐ•์˜ ๋ณด๋Š”๋ฐ ๋„ˆ๋ฌด ๊ธธ๊ณ  ์ง€๋ฃจํ•ด์„œ ์งง์€๊ฑฐ ์ฐพ๋‹ค๊ฐ€ ๋ชฉ์ฐจ๋ณด๊ณ  ๊ฒฐ์ œํ•จโ€จโ€จ ์ข‹์•˜๋˜ ์  1. ๋ธŒ๋ผ์šฐ์ € ์—ด๊ณ  ๋””๋ฒ„๊น…ํ•˜๋ฉด์„œ ์›๋ฆฌ๋ฅผ ์•Œ๋ ค์ฃผ์–ด ๊นŠ์ด์žˆ๋Š” ๊ณต๋ถ€๊ฐ€ ๋˜์—ˆ๋‹คโ€จ(๋‹จ์ˆœ ๊ตฌํ˜„์ด ์•„๋‹Œ ๊นŠ์ด์žˆ๋Š” ๊ณต๋ถ€๋ฅผ ํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค) 2. ๋ถˆํ•„์š”ํ•œ ์„ค๋ช…์„ ์—†์ด next.js์— ์ดˆ์ ์„ ๋งž์ถ˜๋‹ค (scss, css.module, react, ์บ์‹œ ๋ฐฐ๊ฒฝ์ง€์‹ ๋“ฑ) 3. ๊ต์ˆ˜๋ฒ•์ด ์ข‹์•˜๋‹ค โ€จ๋ธŒ๋žœ์น˜ ์ฒดํฌ์•„์›ƒํ•˜๋ฉด์„œ ์ฃผ์„๋งŒ ์ œ๊ฑฐํ•˜๊ณ  ์—ฌ๋Ÿฌ ๋น„๊ต์‚ฌํ•ญ ๋ณด์—ฌ์ฃผ๋ฉฐ ์ฐจ์ด์  ๋ฐ ํšจ์œจ์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•์„ ์ง์ ‘ ๋ณด์—ฌ์ค€๋‹ค (์ฐจ์ด์  ๊ทธ๋ฆฌ๊ณ  ํ™œ์šฉ๋ฒ•์„ ๊ตฐ๋”๋”๊ธฐ ์—†๋Š” ์„ค๋ช…์„ ํ•ด์ฃผ์—ˆ๋‹ค) 4. ๊ฐ€๊ฒฉ์ด ํ˜œ์žโ€จ ์ด์ •๋„ ํ€„๋ฆฌํ‹ฐ์— ์ด ๊ฐ€๊ฒฉ ๋„ˆ๋ฌด ํ˜œ์ž๋ผ๊ณ  ์ƒ๊ฐ๋œ๋‹ค. 5. ์งˆ๋ฌธ์— ๋Œ€ํ•œ ๋‹ต๋ณ€์ด ๊ต‰์žฅํžˆ ์ƒ์„ธํ•˜๋‹ค โ€จ์ด๋ ‡๊ฒŒ๊นŒ์ง€ ์‹œ๊ฐ„์„ ์จ์„œ ๋‹ต๋ณ€์„ ํ•ด์ค€๋‹ค๊ณ ? ๋ผ๊ณ  ๋А๊ปด์งˆ ์ •๋„์˜€๋‹ค 6. tailwind ์‚ฌ์šฉ Xโ€จ ์Šคํƒ€์ผ๋ง์„ ์œ„ํ•œ ์Šคํƒ€์ผ์„ ์™ธ์šฐ๊ณ  html ํƒœ๊ทธ์— ์Šคํƒ€์ผ๋งํ•˜๋Š”๊ฒŒ ๋„ˆ๋ฌด ๋ถˆํŽธํ•œ๋ฐ ๋‹คํ–‰์ด์˜€์Šต๋‹ˆ๋‹ค. 7. ๊ณต์‹๋ฌธ์„œ ๋‚ด์šฉ๋„ ๊ฐ™์ด ๋ด์ค˜์„œ ๋‚ด๊ฐ€ ์ง์ ‘๋ด์•ผ๋˜๋Š” ๋น„์šฉ์ด ๊ฐ์†Œ 8. seo๊ด€๋ จ๋œ ๋‚ด์šฉ ์ž˜ ๋ชฐ๋ผ์„œ ๋‹ต๋‹ตํ–‡๋Š”๋ฐ ์ƒ๊ฐ๋ณด๋‹ค ์‰ฝ๊ฒŒ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์—‡๊ณ  ์š”์•ฝ๋„ ๋„˜ ์ž˜๋˜์ž‡์Œ 9.์›น ์ ‘๊ทผ์„ฑ์„ ๊ณ ๋ คํ•œ html ์ฝ”๋“œ ์ž‘์„ฑ์„ ์™œ ํ•ด์•ผํ•˜๋Š”์ง€ ์•Œ๊ฒŒ๋˜์—‡์Œ ๊ฐœ์ธ์ ์œผ๋กœ ์ถ”๊ฐ€๋˜์—ˆ์œผ๋ฉด ํ•˜๋Š” ๋‚ด์šฉ 1. vscode์—์„œ monorepo๋กœ next.js ์‚ฌ์šฉ์‹œ ๋””๋ฒ„๊น… ์…‹ํŒ…์ด ์‰ฝ์ง€ ์•Š์•„์„œ ์ด๊ฒƒ๋„ ์•Œ๋ ค์ฃผ์‹œ๋ฉด ๋„ˆ๋ฌด ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. (๋””๋ฒ„๊น… ์…‹ํŒ…์ด๋ผ๋Š”๊ฑด ์ค‘๋‹จ์  ๋งํ•˜๋Š” ๊ฒƒ์ž„ next.js ๊ณต์‹๋ฌธ์„œ์—์„œ๋„ ๋ชจ๋…ธ๋ ˆํฌ ๋””๋ฒ„๊น… ์…‹ํŒ…์€ ๋‚˜์™€์žˆ์ง€ ์•Š์•„์š”)

    • LuckyLatte๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
      LuckyLatte

      ์ˆ˜๊ฐ•ํ‰ 1

      โˆ™

      ํ‰๊ท  ํ‰์  5.0

      5

      100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

      ์ •๋ง ๋ช…๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ๋„ํ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ next์˜ ํŠน์ง•์„ ๋ฐ”๋‹ฅ๋ถ€ํ„ฐ ๊ผผ๊ผผํžˆ ์„ค๋ช…ํ•ด์ฃผ์‹ญ๋‹ˆ๋‹ค. ๋•๋ถ„์— ์˜๋ฌธ์„œ ๋Œ€์ถฉ ์ฝ์–ด์„œ ์• ๋งคํ–ˆ๋˜ ๊ฐœ๋…์„ ๊น”๋”ํ•˜๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์•ž์œผ๋กœ SSR์˜ ํŠน์ง•๊ณผ ์žฅ์ ์„ ์ž˜ ์‚ด๋ ค์„œ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ๋ถ€ํ„ฐ ๋ฐฐํฌ, ๊ฒ€์ƒ‰์—”์ง„์— ๋“ฑ๋กํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ SEO, ์ตœ์ ํ™”๊นŒ์ง€ ํ•œํ์— ์•Œ๋ ค์ฃผ๋‹ˆ ๋” ์ข‹์•˜์Šต๋‹ˆ๋‹ค. Next@13์˜ layout ๊ฐœ๋…๋„ ์ถ”๊ฐ€๊ฐ•์˜๋กœ ๋‚˜์˜ค๊ธธ ๊ธฐ๋Œ€ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค!!

      • tlsgkdals71๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
        tlsgkdals71

        ์ˆ˜๊ฐ•ํ‰ 6

        โˆ™

        ํ‰๊ท  ํ‰์  5.0

        5

        78% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

        next13์— ๋Œ€ํ•ด์„œ ์ •๋ง ์ž์„ธํ•˜๊ฒŒ ๊ฐ•์˜ํ•˜์‹ ๋‹ค ๋‚ด๊ฐ€ ์›ํ•˜๋˜ ๊ฐ•์˜!!!! ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.!!!

        • ํ™ฉํ˜ธ์„ธ๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
          ํ™ฉํ˜ธ์„ธ

          ์ˆ˜๊ฐ•ํ‰ 1

          โˆ™

          ํ‰๊ท  ํ‰์  5.0

          5

          76% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

          Next.js ๊ธฐ๋ณธ๊ธฐ๋ฅผ ์Œ“๊ธฐ ์œ„ํ•ด ๋“ค์—ˆ๋Š”๋ฐ Next.js ์‹ค๋ ฅ์ด ํ™• ๋Š˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค

          • SHAN๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
            SHAN

            ์ˆ˜๊ฐ•ํ‰ 1

            โˆ™

            ํ‰๊ท  ํ‰์  5.0

            5

            100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

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

            ๋น„์Šทํ•œ ๊ฐ•์˜

            ๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

            ์‹ ๊ทœ๊ฐ€์ž… 25% ํ• ์ธ

            โ‚ฉ33,000

            25%

            โ‚ฉ44,000