728x90
๋ฐ˜์‘ํ˜•

Next.js 2

Next.js] Next.js ์„ค์น˜ ๋ฐ ์‹œ์ž‘, ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ (Insallation)

๊ณตํ™ˆ์„ ๋ณด๋ฉด์„œ ํ•˜๋‚˜์”ฉ ์ •๋ฆฌํ•ด ๋‚˜๊ฐ€๋ณด๋ ค ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ ์‹œ์ž‘์ธ Next.js ์„ค์น˜๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. https://nextjs.org/ ์ผ๋‹จ ์ œ์ผ ๋จผ์ € Node.js๊ฐ€ ์„ค์น˜ ๋˜์–ด์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. React๊ฐœ๋ฐœ์ž๋ฉด ๋‹น์—ฐํžˆ ์„ค์น˜ ๋ผ์žˆ์„ ๊ฒƒ์œผ๋กœ ์ƒ๊ฐ ๋“ญ๋‹ˆ๋‹ค.(16.8 ๋ฒ„์ „ ์ด์ƒ์ด๋ผ๊ณ  ์•ˆ๋‚ด๋˜์–ด ์žˆ๋„ค์š”) ์ž๋™์„ค์น˜ npx create-next-app@latest ์œ„ ๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ•˜๋ฉด ์ œ์ผ ์ตœ์‹  ๋ฒ„์ „์˜ Next.js๊ฐ€ ์„ค์น˜๋ฉ๋‹ˆ๋‹ค. What is your project named? my-app Would you like to use TypeScript? No / Yes Would you like to use ESLint? No / Yes Would you like to use Tailwind CSS? No / Yes W..

Front-End/Next.js 2023.08.09

Next.js] Next.js๋ž€?

next.js๋Š” React ๊ฐœ๋ฐœ์ž๋ผ๋ฉด ๋ฐ˜๋“œ์‹œ ์•Œ์•„์•ผ ํ•˜๋Š” ํ”„๋ ˆ์ž„ ์›Œํฌ์ž…๋‹ˆ๋‹ค. ์ˆœ์ˆ˜ React๋Š” ์˜คํžˆ๋ ค ์•ˆ ์“ฐ๊ณ , React์— Next.js๋ฅผ ์–น์–ด์„œ ์ฃผ๋กœ ๊ฐœ๋ฐœํ™˜๊ฒฝ์„ ๊ตฌ์„ฑํ•œ๋‹ค๊ณ  ๋ณด์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด Next.js๋ž€ ๋ฌด์—‡์ธ์ง€๋ถ€ํ„ฐ ํ•ด์„œ ๊ฐ™์ด ๊ณต๋ถ€๋ฅผ ํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฏธ ํ”„๋กœ์ ํŠธ ์ง„ํ–‰ํ•  ๋•Œ ๊ณ„์†ํ•ด์„œ ์‚ฌ์šฉํ•˜๊ณ ๋Š” ์žˆ์ง€๋งŒ, ๋”ฑํžˆ ๊ณต๋ถ€๋ฅผ ํ•ด์„œ ์•Œ๊ณ ์„œ ์‚ฌ์šฉํ•˜๊ธฐ๋ณด๋‹ค๋Š” ๊ทธ๋•Œ๊ทธ๋•Œ ๋งž์ถฐ์„œ ์ฐพ์•„๋ณด๊ณ  ํ–ˆ๋˜ ํ„ฐ๋ผ ์ด๋ฒˆ๊ธฐํšŒ์— ์ •๋ฆฌํ•  ๊ฒธ ๊ณต๋ถ€ํ•  ๊ฒธ ๊ฒธ์‚ฌ๊ฒธ์‚ฌ ํ•˜๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค. Next.js๋ž€? React๋กœ ๋งŒ๋“  ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง(SSR) ํ”„๋ ˆ์ž„ ์›Œํฌ์ž…๋‹ˆ๋‹ค. ์ •ํ™•ํžˆ๋Š” SSG์— ๊ตฌ๋ถ„๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. CSR์ธ Reactํ™˜๊ฒฝ์—์„œ SSR๊ธฐ๋Šฅ์„ ๊ตฌ์‚ฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด ์ค๋‹ˆ๋‹ค. SSR์˜ ํŠน์ƒ‰์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์—, ๋งŒ์•ฝ ๋ฆฌ์†Œ์Šค๊ฐ€ ํฐ ํŽ˜์ด์ง€๊ฐ€ ์žˆ๊ฑฐ๋‚˜,..

Front-End/Next.js 2023.08.06
728x90
๋ฐ˜์‘ํ˜•