๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Next.js

(3)
[ Next.js ] Next15์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ธฐ. 2024๋…„ 10์›” 21์ผ Next15 ๋ฒ„์ „์ด ๊ณต์‹ ๋ธ”๋กœ๊ทธ์— ์—…๋ฐ์ดํŠธ๋˜์—ˆ๋‹ค.๊ณต์‹์ ์œผ๋กœ ์•ˆ์ •ํ™”๋˜์–ด ํ”„๋กœ๋•์…˜์—์„œ ์‚ฌ์šฉํ•  ์ค€๋น„๊ฐ€ ์™„๋ฃŒ๋˜์—ˆ๋‹ค๊ณ  ํ•œ๋‹ค.  ์ด๋ฒˆ ๋ฆด๋ฆฌ์ฆˆ๋Š” RC1๊ณผ RC2์˜ ์—…๋ฐ์ดํŠธ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜๋ฉฐ, ์•ˆ์ •์„ฑ์— ์ค‘์ ์„ ๋‘๋ฉด์„œ๋„ ํฅ๋ฏธ๋กœ์šด ์—…๋ฐ์ดํŠธ๋ฅผ ์ถ”๊ฐ€ํ•˜์˜€๋‹ค๊ณ  ํ•œ๋‹ค.10์›” 24์ผ์— ์—ด๋ฆฐ Next.js Conf๊ฐ€ ์žˆ์—ˆ๋Š”๋ฐ, ์‚ฌ์ „ ์‹ ์ฒญํ•˜๊ณ  ๋ชป ๋“ค์–ด์„œ ๋…นํ™”๋ณธ์„ ๋ณด๊ณ  ๋‹ค์Œ์— ๊ทธ ๋‚ด์šฉ์— ๋Œ€ํ•œ ํฌ์ŠคํŒ…๋„ ํ•  ์˜ˆ์ •์ด๋‹ค.  Next15์˜ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์€ ์•„๋ž˜์™€ ๊ฐ™๋‹ค.# ์ƒˆ๋กœ์šด ์ž๋™ ์—…๊ทธ๋ ˆ์ด๋“œ CLI ์‚ฌ์šฉnpx @next/codemod@canary upgrade latest# ...๋˜๋Š” ์ˆ˜๋™์œผ๋กœ ์—…๊ทธ๋ ˆ์ด๋“œnpm install next@latest react@rc react-dom@rc      Next.js 15์˜ ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ..
[ Next.js ] Next13์˜ ์ฃผ์š” ๊ธฐ๋Šฅ์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž. VercelํŒ€์ด Next.js์˜ 13๋ฒ„์ „์ด 2022๋…„ 10์›” 26์ผ Next.js ๊ณต์‹ ํŽ˜์ด์ง€์— ์†Œ๊ฐœ๋˜์—ˆ์ง€๋งŒ, ์ž์„ธํžˆ ์‚ดํŽด๋ณด์ง€๋ฅผ ์•Š์•˜๋Š”๋ฐ ์ƒˆ๋กœ ์ด์งํ•˜๊ฒŒ๋œ ํšŒ์‚ฌ์—์„œ Next13์œผ๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒˆ๋กœ ์„ธํŒ…ํ•˜๊ธฐ๋กœ ์ด์•ผ๊ธฐ๊ฐ€ ๋˜์–ด ๊ณต์‹ ๋ธ”๋กœ๊ทธ ๋‚ด์šฉ์„ ์‚ดํŽด๋ณด์•˜๋‹ค. ++Next.js 13.4(ํ˜„์žฌ ๊ธฐ์ค€ ์ตœ์‹  ๋ฒ„์ „)์„ ์‚ฌ์šฉํ•˜๋ ค๋ฉด ์•„๋ž˜์˜ ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด ์„ค์น˜ํ•  ์ˆ˜ ์žˆ๋‹ค. npm i next@latest react@latest react-dom@latest eslint-config-next@latest ์•ฑ ๋ผ์šฐํŒ… (App Directory) - Next.13.4(ํ˜„์žฌ)๊ธฐ์ค€ Stable ๊ธฐ์กด์— pages/ ๋””๋ ‰ํ† ๋ฆฌ์—์„œ ๋ผ์šฐํŒ… ๋˜๋˜ ๋ฐฉ์‹๊ณผ ๋‹ค๋ฅด๊ฒŒ, app/ ๋””๋ ‰ํ† ๋ฆฌ๋กœ ๋ผ์šฐํŒ… ํ•˜๋Š” ๋ฐฉ์‹์ด ์ถ”๊ฐ€๋˜์—ˆ๋‹ค. - Tree : ๊ณ„์ธต ๊ตฌ์กฐ๋ฅผ ..
[ NEXT.JS ] Next.js์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ธฐ. NEXT.JS๋Š” ๋ฌด์—‡์ผ๊นŒ? Next.js ๋Š” ๋น ๋ฅธ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ๋นŒ๋”ฉ ๋ธ”๋ก์„ ์ œ๊ณตํ•˜๋Š” React ํ”„๋ ˆ์ž„ ์›Œํฌ๋กœ, React์— ํ•„์š”ํ•œ ๋„๊ตฌ ๋ฐ ๊ตฌ์„ฑ์„ ์ฒ˜๋ฆฌํ•˜๊ณ  ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ๋Œ€ํ•œ ์ถ”๊ฐ€ ๊ตฌ์กฐ, ๊ธฐ๋Šฅ ๋ฐ ์ตœ์ ํ™”๋ฅผ ์ œ๊ณตํ•œ๋‹ค. Next.js๋Š” SSR(Server-Side-Rendering), ์ •์  ์›น ํŽ˜์ด์ง€ ์ƒ์„ฑ ๋“ฑ React ๊ธฐ๋ฐ˜ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ธฐ๋Šฅ๋“ค์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜๋Š” Node.js ์œ„์—์„œ ๋นŒ๋“œ๋œ ์˜คํ”ˆ ์†Œ์Šค ์›น ํ”„๋ ˆ์ž„์›Œํฌ์ด๋‹ค. React๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ UI๋ฅผ ๊ตฌ์ถ•ํ•œ ๋‹ค์Œ, Next.js ๊ธฐ๋Šฅ์„ ์ ์ง„์ ์œผ๋กœ ์ฑ„ํƒํ•˜์—ฌ ๋ผ์šฐํŒ…, ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ, ํ†ตํ•ฉ๊ณผ ๊ฐ™์€ ์ผ๋ฐ˜์ ์ธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์š”๊ตฌ ์‚ฌํ•ญ์„ ํ•ด๊ฒฐํ•˜๋Š” ๋™์‹œ์— ๊ฐœ๋ฐœ์ž ๋ฐ ์ตœ์ข… ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๊ฐœ์„ ํ•  ์ˆ˜ ์žˆ๋‹ค. React์˜ ๊ณต์‹ ํŽ˜์ด์ง€์—์„œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ์†Œ๊ฐœํ•œ๋‹ค..