[ํ”„๋กœ์ ํŠธ] Next.js_๐Ÿซ  1

ํ•จ๋ฏผํ˜ยท2023๋…„ 11์›” 6์ผ
0

ํ”„๋กœ์ ํŠธ

๋ชฉ๋ก ๋ณด๊ธฐ
8/18
post-thumbnail

Next.js๋ž€?

React๋ฅผ ์ด์šฉํ•œ ์›น ์—ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ framewrok

React : โ€˜A JavaScript library for building user interfacesโ€™
Angular : 'Angular is an application-design framework and development platform for creating efficient and sophisticated single-page apps.'

  1. React๋Š” ๊ฒฝ๋Ÿ‰ํ™”๋œ UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋ฉฐ, ๊ฐœ๋ฐœ์ž๊ฐ€ ํ•„์š”ํ•œ ๋‹ค๋ฅธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜์—ฌ ์›ํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ๋Š” ์œ ์—ฐ์„ฑ์„ ์ œ๊ณต

  2. ๊ทธ๋Ÿฌ๋‚˜ ํ”„๋กœ์ ํŠธ๊ฐ€ ์ปค์ง€๊ณ  ์—”ํ„ฐํ”„๋ผ์ด์ฆˆ ํ™˜๊ฒฝ์œผ๋กœ ๋ฐœ์ „ํ•จ์— ๋”ฐ๋ผ ํŠน์ •ํ•œ ๋„๊ตฌ์™€ ๊ตฌ์กฐ์˜ ํ•„์š”์„ฑ์ด ๋”์šฑ ์ค‘์š”ํ•ด์ง

  3. ์ด๋•Œ, React๋ฅผ ๋ณด๋‹ค ๊ตฌ์กฐํ™”๋œ ํ˜•ํƒœ๋กœ ์ œ๊ณตํ•˜๊ณ  ๋‹ค์–‘ํ•œ ๋ฌธ์ œ๋“ค์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด Next.js์™€ ๊ฐ™์€ ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ๋„์ž…๋จ

  4. Next.js๋Š” React ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์ถ•ํ•  ๋•Œ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š” ๋‹ค์–‘ํ•œ ๋ฌธ์ œ๋“ค์„ ํ•ด๊ฒฐํ•˜๊ณ , ํ”„๋กœ์ ํŠธ๋ฅผ ๋ณด๋‹ค ์‰ฝ๊ฒŒ ๊ตฌ์ถ•ํ•˜๊ณ  ์œ ์ง€๋ณด์ˆ˜ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€. ๋˜ํ•œ, React ์ƒํƒœ๊ณ„์˜ ๋‹ค์–‘ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€์˜ ํ˜ธํ™˜์„ฑ ๋ฌธ์ œ๋ฅผ ์™„ํ™”ํ•˜๊ณ , ์ตœ์‹ ์˜ Best Practice์™€ ๊ตฌ์กฐ๋ฅผ ์ œ๊ณตํ•˜์—ฌ ๊ฐœ๋ฐœ์ž๋“ค์ด ๋ณด๋‹ค ํšจ์œจ์ ์œผ๋กœ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์คŒ

  • Next.js๋Š” React ์ƒํƒœ๊ณ„์—์„œ ๋ฐœ์ƒํ•˜๋Š” ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ณ , ๋ณด๋‹ค ๊ตฌ์กฐํ™”๋œ ๋ฐฉ์‹์œผ๋กœ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” ๊ฐ•๋ ฅํ•œ ๋„๊ตฌ๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ์Œ.
  • Next.js๋Š” ๋‹จ์ˆœํžˆ ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง(SSR)๋งŒ์„ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, React ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋ณด๋‹ค ๊ตฌ์กฐํ™”๋œ ํ˜•ํƒœ๋กœ ์ œ๊ณตํ•˜๊ณ  ๋‹ค์–‘ํ•œ ๋ฌธ์ œ๋“ค์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์„ ์ œ๊ณต

๊ฒฐ๊ตญ ํฌ์ธํŠธ๋Š” SSR๋งŒ์„ ์œ„ํ•ด์„œ Next.js๊ฐ€ ์กด์žฌํ•˜๋Š”๊ฒŒ ์•„๋‹ˆ๋ž€๊ฑธ ์•Œ๊ณ  ์จ์•ผํ•œ๋‹ค๋Š”๊ฑฐ์ž„. Next.js์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ ์ค‘ ํ•˜๋‚˜๊ฐ€ SSR์ธ๊ฑฐ์ผ๋ฟ.

์ฐธ๊ณ ํ•œ ๋ธ”๋กœ๊ทธ์˜ ๋‚ด์šฉ์— ์˜ํ•˜๋ฉด ๊ธฐ์กด์— ๋ฆฌ์—‘ํŠธ๋ฅผ ํ•˜๋ฉฐ ๊ฒช์—ˆ๋˜ ๊ณ ํ†ต๋“ค์ด ๋งŽ์ด ํ•ด๊ฒฐ๋  ๊ฒƒ์ด๋ผ๊ณ  ํ•˜๋‹ˆ... ์‚ฌ์šฉํ•ด๋ณด๋ฉด์„œ ๋ชธ์†Œ ๋А๊ปด๋ณด์ž

React : ๊ธฐ๋ณธ์ ์œผ๋กœ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ตฌ์ถ•ํ•˜๊ธฐ ์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
Next.js : React ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์œ„ํ•œ ๊ตฌ์กฐ๋ฅผ ์ œ๊ณตํ•˜๋Š” ์™„์ „ํ•œ ํ”„๋ ˆ์ž„์›Œํฌ

profile
Born to be FE developer ๐Ÿง‘๐Ÿปโ€๐Ÿ’ป

0๊ฐœ์˜ ๋Œ“๊ธ€