์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
BEST

์†์— ์ต๋Š” Next.js - ๊ณต์‹ ๋ฌธ์„œ ํ›‘์–ด๋ณด๊ธฐ

๊ณต์‹ ๋ฌธ์„œ๋กœ ์ตœ์‹  Next.js๋ฅผ ๋ฐฐ์›Œ๋ด…๋‹ˆ๋‹ค. ๋ฌธ์ œ ํ•ด๊ฒฐ์˜ ๋„๊ตฌ๋กœ์จ Next.js๊ฐ€ ํ•„์š”ํ•œ ์ด์œ ๋ฅผ ์ดํ•ดํ•˜์‹ค ์ˆ˜ ์žˆ์–ด์š”!

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[ํ”„๋ก ํŠธ์—”๋“œ, ์›น ๊ฐœ๋ฐœ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • ๋ฌธ์ œ ํ•ด๊ฒฐ์˜ ๋„๊ตฌ๋กœ์จ Next.js์˜ ํ•„์š”์„ฑ ์ดํ•ดํ•˜๊ธฐ

  • Next.js์˜ ๊ธฐ๋ณธ ๊ฐœ๋…๊ณผ App Router๋ฅผ ๋ฐฐ์šฐ๊ณ  ์†์— ์ตํžˆ๊ธฐ

  • React 18์—์„œ ๋“ฑ์žฅํ•œ ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ(RSC) ๋ง›๋ณด๊ธฐ

๋‹น๊ทผ ์—”์ง€๋‹ˆ์–ด์™€ ํ•จ๊ป˜ ๊ณต๋ถ€ํ•˜๋Š”
Next.js 13! ๐Ÿ’ก

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ผ๋ฉด, Next.js

Next.js๋Š” ์›น ์•ฑ์„ ์ œ์ž‘ํ•˜๊ณ  ๋ฐฐํฌํ•˜๋Š” ๋ฐ ๊ฐ•๋ ฅํ•œ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค.
์›น ์•ฑ์„ ๋น ๋ฅด๊ณ  ํšจ์œจ์ ์œผ๋กœ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š” Next.js๋Š” ํ˜„์žฌ ๋„ทํ”Œ๋ฆญ์Šค, ๋‚˜์ดํ‚ค, ํ‹ฑํ†ก ๋“ฑ์˜ ๊ธฐ์—…์—์„œ๋„ ํ™œ๋ฐœํžˆ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”! ํ•˜์กฐ์€์ž…๋‹ˆ๋‹ค ๐Ÿ‘‹

๋งˆํ”Œ, ๋ฑ…ํฌ์ƒ๋Ÿฌ๋“œ ๊ฑฐ์ณ ํ˜„์žฌ๋Š” ๋‹น๊ทผ์—์„œ ํ”„๋ก ํŠธ์—”๋“œ ์—”์ง€๋‹ˆ์–ด๋กœ ์ผํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

ํ”„๋ก ํŠธ์—”๋“œ ์—”์ง€๋‹ˆ์–ด๋“ค์€ ๋งค์ผ ๊ฐ™์ด ์Ÿ์•„์ง€๋Š” ์ƒˆ๋กœ์šด ๊ธฐ์ˆ ์— ๋ถ€๋‹ด๊ฐ์„ ๋А๋ผ์ฃ . ์–ด์ฉŒ๋ฉด Next.js์— ๋Œ€ํ•ด์„œ๋„ ๋ถ€๋‹ด๊ฐ์„ ๋А๋ผ๊ณ  ๊ณ„์‹ค์ง€๋„ ๋ชจ๋ฅด๊ฒ ์–ด์š”. ์ตœ๊ทผ์—๋Š” React 18์˜ ์ตœ์‹  ๊ธฐ๋Šฅ์„ ๋„์ž…ํ•œ Next.js 13 ๋ฒ„์ „์ด ๋‚˜์˜ค๋ฉด์„œ ๊ทธ ๋ถ€๋‹ด๊ฐ์ด ์ปค์กŒ์„ ๊ฒƒ ๊ฐ™์•„์š”.

์ € ์—ญ์‹œ ๊ทธ๋žฌ์–ด์š”. Next.js๋ฅผ ์‚ฌ์šฉํ•ด ๋ณธ ์ ์€ ์žˆ์ง€๋งŒ ์ƒˆ๋กœ์šด ๊ฐœ๋…์— ๋Œ€ํ•ด ์ดํ•ดํ•˜์ง€ ๋ชปํ•˜๊ณ  ์žˆ์—ˆ์–ด์š”.

๋งˆ์Œ๋จน๊ณ  ์ƒˆ๋กœ์šด ๊ธฐ์ˆ ์„ ์ดํ•ดํ•ด ๋ณด๋ ค๊ณ  ๋…ธ๋ ฅํ•˜๋Š” ๊ณผ์ •์— ์ด๋ฒˆ ๊ฐ•์˜๋ฅผ ๋งŒ๋“ค๊ฒŒ ๋์–ด์š”. ๊ฐ€๋ฅด์น  ๋•Œ ๊ฐ€์žฅ ๋งŽ์ด ๋ฐฐ์šด๋‹ค๋Š” ๊ฑธ ์ž˜ ์•„์‹ค ๊ฑฐ์˜ˆ์š”. ๋ฐฐ์›Œ์„œ ๋‚จ ์ฃผ์ž๋Š” ๋งˆ์Œ์œผ๋กœ ๋ฐฐ์šฐ๊ณ  ๊ณต๋ถ€ํ•ด์„œ ์ด ๊ฐ•์˜๋ฅผ ์ค€๋น„ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ๊ฐ•์˜๋ฅผ ํ†ตํ•ด ์—ฌ๋Ÿฌ๋ถ„์—๊ฒŒ ์•„๋ž˜์™€ ๊ฐ™์€ ๊ฐ€์น˜๋ฅผ ์ „๋‹ฌํ•ด ๋“œ๋ฆฌ๋ ค๊ณ  ํ•ด์š”.

  • 1๏ธโƒฃ ๋งŽ์€ ํ”„๋ ˆ์ž„์›Œํฌ ์ค‘ Next.js๋ฅผ ๋ฐฐ์›Œ์•ผ ํ•  ์ด์œ ๋ฅผ ์•Œ๋ ค๋“œ๋ ค์š”.
    • ์•ž์œผ๋กœ ํ”„๋ก ํŠธ์—”๋“œ ์—”์ง€๋‹ˆ์–ด๋กœ์„œ ์ƒˆ๋กœ์šด ๋„๊ตฌ๋ฅผ ์„ ํƒํ•  ๋•Œ ์ข‹์€ ๊ธฐ์ค€์ด ๋˜๋Š” ์ง€ํ˜œ๋„ ์–ป์–ด๊ฐ€์…จ์œผ๋ฉด ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค.
  • 2๏ธโƒฃ Next.js 13 ๋ฒ„์ „์—์„œ ์•Œ์•„์•ผ ํ•  ํ•ต์‹ฌ ๊ฐœ๋…์„ ์งš์–ด๋“œ๋ ค์š”.
    • ์ƒˆ๋กœ์šด ๋ผ์šฐํŒ… ์‹œ์Šคํ…œ์ธ App Router์„ ํ•„๋‘๋กœ ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ(Server Component), ๋ฐ์ดํ„ฐ ํŽ˜์นญ(Data Fetching), ์บ์‹ฑ(Caching) ๊ทธ๋ฆฌ๊ณ  ์žฌ๊ฒ€์ฆ(Revalidating)๊นŒ์ง€ ํ›‘์–ด๋ณด๋ฉด์„œ "์•Œ๊ณ  ๋ณด๋‹ˆ ์–ด๋ ต์ง€ ์•Š๋„ค" ํ•˜๋Š” ์ƒ๊ฐ์„ ํ•˜์…จ์œผ๋ฉด ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค.
  • 3๏ธโƒฃ ํ•™์Šตํ•œ ํ•ต์‹ฌ ๊ฐœ๋…, ์•ฑ์„ ๋งŒ๋“ค์–ด ๋ณด๋ฉด์„œ ํ™œ์šฉํ•ด์š”.
    • ์ด ๊ณผ์ •์—์„œ ์‹ค์ˆ˜๋„ ํ•˜๊ณ , ์—๋Ÿฌ๋„ ๋งˆ์ฃผํ•˜๋ฉด์„œ ์‹ค๋ฌด์—์„œ ์•Œ์•„๋‘๋ฉด ์ข‹์„ ๊นจ์•Œ ์ •๋ณด๋ฅผ ์–ป์–ด๊ฐ€์…จ์œผ๋ฉด ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ถ„์„ ์ƒ๊ฐํ•˜๋ฉฐ ๋งŒ๋“ค์—ˆ์–ด์š” ๐Ÿ’โ€โ™‚๏ธ

๐Ÿ˜ข Next.js... ๋‚˜๋งŒ ๋ชฐ๋ผ

React๋ฅผ ๋ฐฐ์šฐ๊ณ  ์‹ค๋ฌด์—์„œ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์–ด์š”. ํ•˜์ง€๋งŒ ์•„์ง Next.js๋Š” ์ œ๋Œ€๋กœ ๋ฐฐ์›Œ๋ณธ ์ ์ด ์—†์–ด์š”. ๋‹ค๋“ค Next.js์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐํ•˜๋Š” ๋ฐ ์ €๋งŒ ๋ชจ๋ฅด๋Š” ๊ฒƒ ๊ฐ™์•„ ๋ถˆ์•ˆํ•ด์š”.

๐Ÿ“Œ ๋‚จ๋“ค์ด ์ƒˆ๋กœ์šด ๊ธฐ์ˆ ์„ ์ด์•ผ๊ธฐํ•œ๋‹ค๊ณ  ๊ผญ ๋ฐฐ์›Œ์•ผ ํ•˜๋Š” ๊ฑด ์•„๋‹ˆ์ฃ . ์ •๋ง ํ•„์š”ํ•  ๋•Œ ๋ฐฐ์šฐ์…”๋„ ๋Šฆ์ง€ ์•Š์•„์š”. ํ•˜์ง€๋งŒ ๋™๋ฃŒ ๊ฐœ๋ฐœ์ž๋“ค๊ณผ ํ•จ๊ป˜ Next.js์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐํ•˜๊ณ  ์‹ถ์œผ์‹œ๋‹ค๋ฉด ์ œ ๊ฐ•์˜๊ฐ€ ๋„์›€์ด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค!

๐Ÿ˜ตโ€๐Ÿ’ซ ๊ณต์‹ ๋ฌธ์„œ ๋ณด๋Š” ๊ฒƒ๋„ ์–ด๋ ค์›Œ์š”

Next.js 13 ๋ฒ„์ „์„ ๋ฐฐ์šฐ๋ ค๊ณ  ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ๋ดค๋Š”๋ฐ๋„ ์ดํ•ด๊ฐ€ ๊ฐ€์งˆ ์•Š์•„์š”. ๋ˆ„๊ตฐ๊ฐ€ ๊ฐ™์ด ๊ณต์‹ ๋ฌธ์„œ์—์„œ ํ•ต์‹ฌ์„ ์š”์•ฝํ•ด ์ฃผ๊ณ  ๊ฐ™์ด ๊ณต๋ถ€ํ•  ์ˆ˜ ์žˆ์œผ๋ฉด ์ข‹๊ฒ ์–ด์š”.

๐Ÿ“Œ ๊ณต์‹ ๋ฌธ์„œ๋Š” ๋ถ„๋ช… ์ข‹์€ ํ•™์Šต ์ž๋ฃŒ์ด์ง€๋งŒ, ๋ถ„๋Ÿ‰์ด ๋ฐฉ๋Œ€ํ•ด์„œ ๋ถ€๋‹ด์Šค๋Ÿฌ์šธ ์ˆ˜ ์žˆ์ฃ . ๊ฒฝํ—˜ ์žˆ๋Š” ์„ ๋ฐฐ๊ฐ€ ํ•„์š”ํ•œ ๋ถ€๋ถ„์„ ์งš์–ด์ค€๋‹ค๋ฉด ์‹œ๊ฐ„ ๋Œ€๋น„ ๋†’์€ ํšจ์œจ๋กœ ํ•™์Šตํ•  ์ˆ˜ ์žˆ์ง€ ์•Š์„๊นŒ์š”? ์ด๋ฒˆ ๊ฐ•์˜๋Š” Next.js์˜ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•ต์‹ฌ ๊ฐœ๋…์„ ์š”์•ฝํ–ˆ์–ด์š”.

๐Ÿค” ์‹ค์ œ๋ก  ์–ด๋–ป๊ฒŒ ์จ์•ผ ํ•˜์ง€?

๊ณต์‹ ๋ฌธ์„œ๋ฅผ ๋ณด๊ณ  ๋”ฐ๋ผ ํ–ˆ๋Š”๋ฐ ์ƒ๊ฐํ•œ ๊ฒƒ์ฒ˜๋Ÿผ ๋™์ž‘ํ•˜์ง€ ์•Š์•„์š”. ๋ญ๊ฐ€ ๋ฌธ์ œ์ธ์ง€ ๋ชจ๋ฅด๊ฒ ์–ด์š”. ๊ฒ€์ƒ‰์„ ํ•ด๋ด๋„ Next.js 13์ด ๋‚˜์˜จ ์ง€ ์–ผ๋งˆ ๋˜์ง€ ์•Š์€ ํƒ“์ธ์ง€ ์ œ๋Œ€๋กœ ๋œ ๊ฒฐ๊ณผ๋ฅผ ์ฐพ๊ธฐ๊ฐ€ ์–ด๋ ต๋„ค์š”.

๐Ÿ“Œ ๊ณต์‹ ๋ฌธ์„œ์— ๋‚˜์™€ ์žˆ๋Š” ์ฝ”๋“œ๋ฅผ ๋”ฐ๋ผ ํ•˜๋‹ค ๋ณด๋ฉด ์ƒ๊ฐ์ฒ˜๋Ÿผ ๋™์ž‘ํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ๋ฅผ ๋งŒ๋‚˜๊ฒŒ ๋˜์ฃ . ์ €๋„ ๊ฐ•์˜๋ฅผ ์ค€๋น„ํ•˜๋ฉด์„œ ๋‹นํ™ฉ์Šค๋Ÿฌ์› ๋˜ ์ ์ด ๋ช‡ ๋ฒˆ ์žˆ์–ด์š”. ์ด ๊ฐ•์˜์—์„œ๋Š” ์‹ค์ œ ๋™์ž‘ํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ๊ณต์œ ํ•ด ๋“œ๋ ค์š”.


์ด ๊ฐ•์˜๋ฅผ ํ†ตํ•ด ์–ป๋Š” ๊ฒƒ๋“ค ๐Ÿ’Ž

1. ๊ธฐ์ˆ ์„ ๋ฐ”๋ผ๋ณด๋Š” ๊ด€์ ์ด ๋ณ€ํ•ด์š”

๋งŽ์€ ๊ธฐ์ˆ ์ด ๊ทธ๋ ‡๋“ฏ Next.js ์—ญ์‹œ ๋ฌธ์ œ ํ•ด๊ฒฐ์„ ์œ„ํ•ด ์„ธ์ƒ์— ๋“ฑ์žฅํ–ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ด์š”. ์ €๋Š” ๊ฐ•์˜์—์„œ ํ•ต์‹ฌ์„ ์ „๋‹ฌํ•˜๊ณ , ๊ฐ๊ฐ์ด ๋„๊ตฌ๋กœ์จ ์–ด๋–ค ์˜๋ฏธ๊ฐ€ ์žˆ๋Š”์ง€ ์„ค๋ช…ํ•ด ๋“œ๋ฆฌ๊ณ  ์‹ถ์–ด์š”.

  • Next.js๊ฐ€ ์„ธ์ƒ์— ์žˆ๊ธฐ๊นŒ์ง€ JavaScript ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ์–ด๋–ป๊ฒŒ ๋ณ€ํ–ˆ๋Š”์ง€ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์–ด์š”.
  • ๋ฌธ์ œ ํ•ด๊ฒฐ์˜ ๋„๊ตฌ๋กœ์จ Next.js๊ฐ€ ๋ฐฐ์šธ๋งŒํ•œ ๊ฐ€์น˜๊ฐ€ ์žˆ๋Š” ๋„๊ตฌ๋ผ๋Š” ์ ์„ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์–ด์š”. 

2. ์–ธ์ œ๋“  ๊บผ๋‚ด๋ณผ ์ˆ˜ ์žˆ๋Š” ํ•™์Šต ์ž๋ฃŒ๊ฐ€ ์ƒ๊ฒจ์š”

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

  • Next.js ๊ณต์‹ ๋ฌธ์„œ์—์„œ ํ•ต์‹ฌ๋งŒ์„ ์š”์•ฝํ•œ ํ•ธ๋“œ๋ถ์„ ์ œ๊ณตํ•ด์š”.
  • ๊ฐ•์˜์—์„œ ํ•จ๊ป˜ ๋งŒ๋“  ํ”„๋กœ์ ํŠธ์˜ ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ์ œ๊ณตํ•ด์š”.
  • ์งˆ๋ฌธ์— ์ตœ๋Œ€ํ•œ ์‹ ์†ํ•˜๊ฒŒ ๋‹ต๋ณ€๋“œ๋ ค์š”. ์ˆ˜๊ฐ•์ƒ ๋งŽ์•„์ง€๋ฉด ๋ณ„๋„์˜ ์ฑ„๋„์„ ์šด์˜ํ•ด์š”.

๋ฌด์—‡์„ ๋ฐฐ์šฐ๊ฒŒ ๋˜๋‚˜์š”? ๐Ÿ“š

์ด ์„ธ ๊ฐœ์˜ ์„น์…˜์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์–ด์š”. 

์„น์…˜ 1.
์™œ Next.js๋ฅผ ๋ฐฐ์šฐ๋Š”๊ฐ€?

Next.js๊ฐ€ ์„ธ์ƒ์— ์žˆ๊ธฐ๊นŒ์ง€ ์–ด๋–ค ์ผ์ด ์žˆ์—ˆ๋Š”์ง€ ์‚ดํŽด๋ด์š”. JavaScript์˜ ๋“ฑ์žฅ๋ถ€ํ„ฐ jQuery, AngularJS, React์™€ ๊ฐ™์€ ๋„๊ตฌ๊ฐ€ ์–ด๋–ค ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋ ค๊ณ  ํ–ˆ๋Š”์ง€ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ์‹œ๊ฐ„์œผ๋กœ ์ค€๋น„ํ–ˆ์–ด์š”. ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ Next.js๊ฐ€ ๋“ฑ์žฅํ•˜๊ฒŒ ๋œ ๋ฐฐ๊ฒฝ์„ ์•Œ๊ฒŒ ๋˜์‹ค ๊ฑฐ์˜ˆ์š”!

์„น์…˜ 2
Next.js ๊ธฐ๋ณธ ๋ฐฐ์šฐ๊ธฐ

Next.js์˜ ๊ณต์‹ ๋ฌธ์„œ์—์„œ ํ•ต์‹ฌ๋งŒ์„ ์ถ”๋ ธ์–ด์š”. Next.js๊ฐ€ ๋ฌด์—‡์ธ์ง€ ์‚ดํŽด๋ณด๊ณ  Next.js 13์—์„œ ๋‹ฌ๋ผ์ง„ ์ ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์–ด์š”. ์ƒˆ๋กญ๊ฒŒ ๋„์ž…๋œ ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ(Server Component)์€ ๋ฌผ๋ก ์ด๊ณ  ํŒŒ์ผ ์‹œ์Šคํ…œ ๊ธฐ๋ฐ˜์˜ ๋ผ์šฐํŒ…(Routing), ๋ฐ์ดํ„ฐ ํŽ˜์นญ(Data Fetching), ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ(Metadata)๊นŒ์ง€ ์ดํ•ดํ•˜์‹ค ์ˆ˜ ์žˆ์–ด์š”!

์„น์…˜ 3.
Next.js ์†์— ์ตํžˆ๊ธฐ

์•ž์„  ์ฑ•ํ„ฐ์—์„œ ๋ฐฐ์šด ๋‚ด์šฉ์„ ์‹ค์ œ ์ฝ”๋“œ๋กœ ์˜ฎ๊ฒจ๋ณด๋Š” ๊ณผ์ •์ด์—์š”. ๋‚ ์”จ ์•ฑ์„ ๋งŒ๋“ค๋ฉฐ ๋จธ๋ฆฟ์†์—๋งŒ ์žˆ๋˜ ๊ฐœ๋…์„ ์‹ค์ œ๋กœ ์จ๋จน์–ด ๋ณผ ์ˆ˜ ์žˆ์–ด์š”. ๋‚ ์”จ API๋ฅผ ์ง์ ‘ ํ˜ธ์ถœํ•ด ๋ณด๊ณ  ๋ฐ์ดํ„ฐ ํŽ˜์นญ, ์บ์‹ฑ(Caching), ์žฌ๊ฒ€์ฆ(Revalidating)๊นŒ์ง€ ํ•ด๋ณด๋ฉด์„œ Next.js๋ฅผ ์†์— ์ตํžˆ๊ฒŒ ๋˜์‹ค ๊ฑฐ์˜ˆ์š”!


์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š” ๐Ÿ“ข

์‹ค์Šต ํ™˜๊ฒฝ๊ณผ ํ•™์Šต ์ž๋ฃŒ์— ๋Œ€ํ•ด ์•ˆ๋‚ด๋“œ๋ ค์š”! ์ €๋Š” ๋งฅ๋ถ ์—์–ด M1 8GB ๋ฉ”๋ชจ๋ฆฌ ๋ชจ๋ธ์„ ์‚ฌ์šฉํ–ˆ์–ด์š”.

์‹ค์Šต ํ™˜๊ฒฝ

  • ์šด์˜ ์ฒด์ œ ๋ฐ ํ™˜๊ฒฝ: macOS, Node.js 18.17.0
  • ์‚ฌ์šฉ ๋„๊ตฌ: VSCode
  • ์‚ฌ์šฉ ์„œ๋น„์Šค: Vercel, WeatherAPI, TimeAPI

ํ•™์Šต ์ž๋ฃŒ

๊ฐ•์˜๋ฅผ ๋“ฃ๊ธฐ ์ „์—

  • ๋ฌด๋ฃŒ๋กœ ๊ณต๊ฐœ๋œ ๊ฐ•์˜๋ฅผ ๋จผ์ € ๋“ค์–ด๋ณด์‹œ๊ธธ ๊ถŒํ•ด๋“œ๋ ค์š”.
  • ๋ฑ…ํฌ์ƒ๋Ÿฌ๋“œ์—์„œ ํ–ˆ๋˜ ํด๋ฆฐ์ฝ”๋“œ ๊ด€๋ จ ๋ฐœํ‘œ๋ฅผ ๋ณด์‹œ๋Š” ๊ฒƒ๋„ ๊ฐ•์˜ ์Šคํƒ€์ผ์„ ์ดํ•ดํ•˜์‹œ๋Š” ๋ฐ ๋„์›€์ด ๋˜์‹ค ๊ฑฐ์˜ˆ์š”. 

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

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

  • Next.js์˜ ์ฃผ์š” ๊ฐœ๋…์„ ์ดํ•ดํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„๋“ค

  • React์˜ ์ตœ์‹  ๊ธฐ๋Šฅ์„ ์จ๋ณด๊ณ  ์‹ถ์œผ์…จ๋˜ ๋ถ„๋“ค

  • JavaScript ํ”„๋ ˆ์ž„์›Œํฌ ์„ ํƒ์— ๊ณ ๋ฏผ์ด ์žˆ๋Š” ๋ถ„๋“ค

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

  • HTML & CSS

  • JavaScript

  • React

  • TypeScript

์•ˆ๋…•ํ•˜์„ธ์š”
ํ•˜์กฐ์€์ž…๋‹ˆ๋‹ค.

1,042

๋ช…

์ˆ˜๊ฐ•์ƒ

80

๊ฐœ

์ˆ˜๊ฐ•ํ‰

45

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

3

๊ฐœ

๊ฐ•์˜

๋งˆํ”Œ, ๋ฑ…ํฌ์ƒ๋Ÿฌ๋“œ ๊ฑฐ์ณ ํ˜„์žฌ๋Š” ๋‹น๊ทผ์—์„œ ํ”„๋ก ํŠธ์—”๋“œ ์—”์ง€๋‹ˆ์–ด๋กœ ์ผํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

 

"๋‚œ ๋„ค๊ฐ€ ํ•„์š”ํ•ด", "๋„ˆ์˜ ์กด์žฌ๊ฐ€ ๋‚˜์—๊ฒŒ ํž˜์ด ๋ผ"๋ผ๋Š” ๋ง์„ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค. ์ด์›ƒ์˜ ํ•„์š”๋ฅผ ์ฑ„์›Œ์ฃผ๊ณ  ํž˜์ด ๋˜์–ด ์ฃผ๋Š” ๊ฒƒ, ๊ทธ๊ฒŒ ์‚ฌ๋ž‘์ด๋ผ๊ณ  ๋ฏฟ์Šต๋‹ˆ๋‹ค. ์ข‹์€ ๊ฐ•์˜๋กœ ์—ฌ๋Ÿฌ๋ถ„์˜ ํ•„์š”๋ฅผ ์ฑ„์šฐ๊ณ  ํž˜์ด ๋˜์–ด๋“œ๋ฆด ์ˆ˜ ์žˆ๋„๋ก ๋…ธ๋ ฅํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

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

์ „์ฒด

22๊ฐœ โˆ™ (1์‹œ๊ฐ„ 54๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!