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

์†์— ์ต๋Š” Next.js - ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜๊ธฐ

React์—์„œ Next.js 14๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜๋ฉฐ React์™€ Next.js์˜ ์ฐจ์ด์ ์„ ์ตํ˜€๋ด…๋‹ˆ๋‹ค. Next.js์„ ๋ณด๋‹ค ๊นŠ๊ฒŒ ์ดํ•ดํ•˜์‹ค ์ˆ˜ ์žˆ์–ด์š”!

Thumbnail

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

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

  • React๋กœ ์‹œ์ž‘ํ•œ ์„œ๋น„์Šค๋ฅผ Next.js๋กœ ๋ฐ”๊พธ๊ธฐ

  • React Router๋ฅผ App Router๋กœ ๋ฐ”๊พธ๊ธฐ

  • Next.js 14์˜ ์„ค์ •(Config) ์ดํ•ดํ•˜๊ธฐ

React.js์—์„œ Next.js๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜,
์—ฌ๋Ÿฌ๋ถ„๋„ ํ•  ์ˆ˜ ์žˆ์–ด์š”!

๋น„๊ตํ•˜๋ฉฐ ๋ฐฐ์šฐ๋Š” Next.js

React๋กœ ์„œ๋น„์Šค๋ฅผ ์šด์˜ํ•˜๋‹ค ๋ณด๋ฉด Next.js๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ํ•ด์•ผ ํ•  ์ผ์ด ์ƒ๊ธฐ๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์€ ๋ณต์žกํ•˜๊ณ  ์–ด๋ ค์šด ์ผ์ด์ง€๋งŒ ๊ทธ ๊ณผ์ •์—์„œ ์„œ๋น„์Šค๋ฅผ ๋”์šฑ ๊นŠ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐํšŒ๊ฐ€ ๋˜๊ธฐ๋„ ํ•˜์ฃ . ์ด๋ฒˆ ๊ฐ•์˜ ์—ญ์‹œ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์ด๋ผ๋Š” ํ˜•์‹์„ ์ทจํ•ด React์™€ Next.js๋ฅผ ๋น„๊ตํ•˜๋ฉฐ ์ƒˆ๋กœ์šด ์ง€์‹์„ ๋ฐฐ์šธ ์ˆ˜ ์žˆ๋Š” ๊ธฐํšŒ๋กœ ์‚ผ์œผ๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. #React, #Next.js, #next.js, #next, #vitejs

์ด ๊ฐ•์˜์—์„œ ์–ป์„ ์ˆ˜ ์žˆ๋Š” ๊ฒƒ

  • Next.js์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ธฐ๋ณธ ์„ค์ •์„ ๋น„๋กฏํ•ด TypeScript ์„ค์ •, ESLint ์„ค์ •์„ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์–ด์š”.

  • Create React App, Vite๋กœ ๋งŒ๋“  React ์•ฑ์„ Next.js๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ํ•  ์ˆ˜ ์žˆ์–ด์š”.


  • ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ๊ณผ์ •์—์„œ React์™€ Next.js์˜ ์ฐจ์ด๋ฅผ ์ดํ•ดํ•˜์‹ค ์ˆ˜ ์žˆ์–ด์š”.


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

1. Next.js ์„ค์ • ์ฝ์–ด๋ณด๊ธฐ

Next.js ์•ฑ์˜ ๊ธฐ๋ณธ ์„ค์ •์— ํฌํ•จ๋œ next.config.js, tsconfig.json, .eslintrc.json, package.json ํŒŒ์ผ์„ ์ฝ์–ด๋ด…๋‹ˆ๋‹ค. ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์— ํ•„์š”ํ•œ ์„ค์ •์„ ์ดํ•ดํ•˜๊ณ  Next.js์— ๋Œ€ํ•œ ๊นŠ์ด๋ฅผ ๋”ํ•  ์ˆ˜ ์žˆ์–ด์š”.

๋‹ค์–‘ํ•œ ์„ค์ •์„ ํ•จ๊ป˜ ์ฝ์–ด๋ด์š”

2. Vite์—์„œ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜๊ธฐ

Next.js ๊ณต์‹ ๋ฌธ์„œ์— ์†Œ๊ฐœ๋œ ๊ฐ€์ด๋“œ์— ๋”ฐ๋ผ Vite๋กœ ๋งŒ๋“  React ์•ฑ์„ Next.js๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•ฉ๋‹ˆ๋‹ค. Vite์™€ Next.js์˜ ์„ค์ • ์ฐจ์ด๋ฅผ ์ดํ•ดํ•˜๊ณ  React์™€ Next.js์˜ ์ฐจ์ด์ ์„ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์–ด์š”.

Vite๋กœ ์‹œ์ž‘ํ•ด์„œ Next.js๋กœ

3. Create React App์—์„œ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜๊ธฐ

React๋ฅผ ์ฒ˜์Œ ์‹œ์ž‘ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๋„๊ตฌ์ธ CRA(create-react-app)์œผ๋กœ ๋งŒ๋“  React ์•ฑ์„ Next.js๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•ฉ๋‹ˆ๋‹ค. Vite๋กœ ๋งŒ๋“  ์•ฑ๊ณผ ๋‹ค๋ฅธ ์ ๋„ ์‚ดํŽด๋ณด๋ฉด์„œ React, Next.js๋ฅผ ๋ณด๋‹ค ๋‹ค์–‘ํ•˜๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์–ด์š”.

CRA๋กœ ์‹œ์ž‘ํ•ด์„œ Next.js๋กœ

4. React Router์—์„œ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜๊ธฐ

React ๋ผ์šฐํŒ… ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ค‘์— ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” React Router๋ฅผ App Router๋กœ ๋ฐ”๊ฟ”๋ด…๋‹ˆ๋‹ค. ๋ผ์šฐํŒ… ๋ฐฉ์‹์˜ ์ฐจ์ด๋ฅผ ์ดํ•ดํ•˜๊ณ  Next.js ํŒŒ์ผ ์‹œ์Šคํ…œ ๊ธฐ๋ฐ˜ ๋ผ์šฐํŒ…, ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ, ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์†์— ์ตํž ์ˆ˜ ์žˆ์–ด์š”.

React Router๋ฅผ App Router๋กœ

์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ  ์‚ฌํ•ญ

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

  • ์šด์˜ ์ฒด์ œ ๋ฐ ํ™˜๊ฒฝ: macOS, Node.js 20.10.0

  • ์‚ฌ์šฉ ๋„๊ตฌ: VSCode

  • ์‚ฌ์šฉ ์„œ๋น„์Šค: Vercel, FakeStoreAPI

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

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

์—ฐ๊ด€ ๊ฐ•์˜

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

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

  • ์ฒซ ๋ฒˆ์งธ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ํ”„๋กœ์ ํŠธ๋ฅผ ์•ž๋‘” ๋ถ„๋“ค

  • React๋ฅผ Next.js๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜๊ณ  ์‹ถ์€ ๋ถ„๋“ค

  • React์™€ Next.js์˜ ์ฐจ์ด์ ์„ ์ดํ•ดํ•˜๊ณ  ์‹ถ์€ ๋ถ„๋“ค

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

  • React

  • TypeScript

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

1,042

๋ช…

์ˆ˜๊ฐ•์ƒ

80

๊ฐœ

์ˆ˜๊ฐ•ํ‰

45

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

3

๊ฐœ

๊ฐ•์˜

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

 

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

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

์ „์ฒด

32๊ฐœ โˆ™ (1์‹œ๊ฐ„ 43๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

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