[Next.js] Next.js ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๊ธฐ (๊ธฐ๋Šฅ, ํ•œ๊ณ„์  ๋“ฑ)

2024. 3. 12. 02:18ยท๐Ÿชด Next.js
SMALL

0311 โœ๏ธ

๐Ÿ”ฎ Next.js ์˜ ๊ธฐ๋ณธ ์†Œ๊ฐœ

 

 

Vercel์—์„œ React.js๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๋งŒ๋“ , ์›น ๊ฐœ๋ฐœ์„ ์œ„ํ•œ ํ”„๋ ˆ์ž„์›Œํฌ
Route Handler๋ฅผ ํ†ตํ•ด ๋ฐฑ์—”๋“œ๋ฅผ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ์–ด, ํ’€ ์Šคํƒ ์›น ๊ฐœ๋ฐœ์ด ๊ฐ€๋Šฅ

 

+ ์—ฌ๊ธฐ์„œ ํ”„๋ ˆ์ž„์›Œํฌ๋ž€?
๊ฐœ๋ฐœ์ž๊ฐ€ ๊ธฐ๋Šฅ ๊ตฌํ˜„์—๋งŒ ์ง‘์ค‘ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•„์š”ํ•œ ๋ชจ๋“  ํ”„๋กœ๊ทธ๋ž˜๋ฐ์  ์žฌ์›์„ ์ง€์›ํ•˜๋Š” '๊ธฐ์ˆ ์˜ ์กฐํ•ฉ'์œผ๋กœ,
๋ณ„๋„์˜ ์…‹ํŒ…์„ ๊ฐœ๋ฐœ์ž๊ฐ€ ํ•  ํ•„์š” ์—†์ด ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ๋‹ค ์•Œ์•„์„œ ํ•ด์ค˜์„œ ํŽธ๋ฆฌํ•˜๊ฒŒ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋‹ค!
 Ex )   Next.js, ํ˜น์€ JS๊ธฐ๋ฐ˜ ์›น FE SPA ํ”„๋ ˆ์ž„์›Œํฌ๋“ค์ธ Vue.js, Augular.js ๋“ฑ)

+ ์ด์— ๋ฐ˜ํ•ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š”
๊ณตํ†ต ๊ธฐ๋Šฅ์˜ ๋ชจ๋“ˆํ™”๊ฐ€ ์ด๋ฃจ์–ด์ง„ ํ”„๋กœ๊ทธ๋žจ์˜ ์ง‘ํ•ฉ.
๊ฐœ๋ฐœ์ž์˜ ๋ณ„๋„ ์…‹ํŒ…์ด ํ•„์š”ํ•˜๋ฉฐ, ํ”„๋ ˆ์ž„์›Œํฌ๋ณด๋‹ค ๊ธฐ๋Šฅ์ ์œผ๋กœ ๋ถ€์กฑํ•˜๋‹ค๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, Routing ์ด๋ผ๋Š” ํŠน์ • ๊ธฐ์ˆ ์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š”
React.js ์™€ ๊ฐ™์€ (UI๋ฅผ ๋งŒ๋“ค๊ธฐ์œ„ํ•œ) ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ๋Š” ๋ณ„๋„๋กœ react-router-dom ๋“ฑ์„ ์„ค์น˜ํ•ด routing ์„ค์ • ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด์•ผํ•˜์ง€๋งŒ,
Next.js ์™€ ๊ฐ™์€ ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ๋Š” ์ด๋ฏธ routing ์…‹ํŒ…์ด ๋˜์–ด์žˆ์–ด์„œ, ๊ทธ๋ƒฅ ์ •ํ•ด์ง„ ๋ฐฉ๋ฒ•์— ๋งž๊ฒŒ ์ฝ”๋“œ ์ž‘์„ฑ๋งŒ ํ•ด์ฃผ๋ฉด routing์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ( => ๊ฐœ๋ฐœ์ž๊ฐ€ ์•„๋‹Œ ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ๊ธฐ์ˆ ์„ ์ œ์–ด - (IoC : Inversion of Control ์ œ์–ด์˜ ์—ญ์ „)

 

๐Ÿช„ Next.js ์˜ ๊ธฐ๋Šฅ๊ณผ ์ด์ 

  • React.js๊ฐ€ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๊ธฐ๋Šฅ์„ ํ™•์žฅํ•œ React ํ”„๋ ˆ์ž„์›Œํฌ
  • ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์— ํ•„์š”ํ•œ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ, ๊ตฌ์กฐ ์ œ๊ณต 
1)   ๋‹ค์–‘ํ•œ ๋ Œ๋”๋ง ๊ธฐ๋ฒ•  : ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง CSR ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ, ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง SSR, SSG, ISR ๊ฐ€๋Šฅํ•ด ( => TTV๊ฐ€ ์งง๋‹ค๊ฑฐ๋‚˜, SEO์—์„œ ์œ ๋ฆฌํ•˜๋‹ค๋Š” ์žฅ์  ๋“ฑ)

2)   Routing : ํŒŒ์ผ(ํด๋”) ๊ธฐ๋ฐ˜ ๋ผ์šฐํŒ…

3)   Route Handler : ๋ฐฑ์—”๋“œ ๊ฐ€๋Šฅ (GET,POST,DELETE,PATCH์™€ ๊ฐ™์€ ์š”์ฒญ ๊ฐ€๋Šฅํ•œ ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ. ๋ฐ์ดํ„ฐ ์ œ๊ณต์ž๋กœ์„œ์˜ ๋ฐฑ์—”๋“œ ์—ญํ•  ์ˆ˜ํ–‰ ๊ฐ€๋Šฅ)

4)   ์Šคํƒ€์ผ๋ง : CSS, Sass, CSS-in-JS, TailwindCSS ๋“ฑ ๊ฐ€๋Šฅ

5)   ์ตœ์ ํ™”, ๋ฒˆ๋“ค๋ง : ์ฝ”๋“œ splitting, ์ด๋ฏธ์ง€ ์ตœ์ ํ™”, ์›นํŒฉ ์„ค์ • ๋“ฑ์„ ํ•ด์คŒ

 

 

 

๐Ÿšจ Next.js ์˜ ํ•œ๊ณ„

1) Route Handler ํ†ตํ•ด ๋ฐฑ์—”๋“œ๊นŒ์ง€ ๋‹ค๋ฃจ๋Š” ํ’€์Šคํƒ ์›น ๊ฐœ๋ฐœ์ด ๊ฐ€๋Šฅํ•˜์ง€๋งŒ,
๋ณต์žกํ•œ ๋ฐฑ์—”๋“œ ๋กœ์ง ๊ตฌํ˜„์€ ์•„์ง ์–ด๋ ต๋‹ค.
 
(ex) WebSocket, WebRTC ๋“ฑ)

2) FE ๋กœ์ง์— ๋Œ€ํ•œ ์ข…์†์„ฑ : ๋ฐฑ์—”๋“œ ๋กœ์ง๋งŒ ๋ณ€๊ฒฝํ•ด์„œ ๋ฐฐํฌํ•˜๊ณ  ์‹ถ๋‹ค๊ณ  ํ•ด๋„, ํ”„๋ก ํŠธ์—”๋“œ๋„ ํ•จ๊ป˜ ๋ฐฐํฌํ•ด์•ผ

 


๐Ÿ“œ  Next.js์˜ ๊ฐ„๋‹จํ•œ History

    - ๋ชจ๋“  ์—ฐ๋„ ๊ธฐ๋ก X ์ƒ๋žต๋œ ๋ถ€๋ถ„ ์žˆ์Šต๋‹ˆ๋‹ค

  * 2016 : ๊นƒํ—ˆ๋ธŒ ์˜คํ”ˆ์†Œ์Šค ํ”„๋กœ์ ํŠธ๋กœ ์ฒซ ์ถœ์‹œ
 6๊ฐ€์ง€ ์›์น™ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ฐœ๋ฐœ
1. out-of-the-box functionality requiring no setup ๋ณ„๋„์˜ ์…‹ํŒ…์—†์ด
2. JavaScript everywhere ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์–ด๋””์„œ๋“  ์“ฐ์ด๊ฒŒ + all functions are written in JavaScript
3. automatic code-splitting and server-rendering ์ฝ”๋“œ ์Šคํ”Œ๋ฆฌํŒ…, ์„œ๋ฒ„ ๋ Œ๋”๋ง
4. configurable data-fetching   ์˜ต์…”๋„ํ•˜๊ฒŒ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋„๋ก ์„ค์ •๊ฐ€๋Šฅ
5. anticipating requests ์‚ฌ์šฉ์ž๊ฐ€ ์›ํ•˜๋Š” ๊ฒƒ์ด ๋ฌด์—‡์ธ์ง€๋ฅผ ๋จผ์ € ์˜ˆ์ธก = ์š”๊ตฌ์‚ฌํ•ญ ์˜ˆ์ธก
6. simplifying deployment ๋ฐฐํฌ ์‰ฝ๊ฒŒ

* 2020 :
Ver. 9.3   SSG, SSR๋ฟ๋งŒ ์•„๋‹ˆ๋ผ, `ISR` (Incremental Static Regeneration - ์ผ์ • ์ฃผ๊ธฐ๋งˆ๋‹ค ๋ฐ์ดํ„ฐ ๊ฐฑ์‹ ๊ฐ€๋Šฅ) ๋ Œ๋”๋ง ํŒจํ„ด์˜ ๋“ฑ์žฅ

* 2022 :
Ver. 13์˜ ํš๊ธฐ์ ์ธ ๋“ฑ์žฅ!! `app route` ๋“ฑ์žฅ.  React ver.13์— ๋“ฑ์žฅํ•œ `์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ` ์ ์šฉ . `(nested) layouts` ๋“ฑ์žฅ. 

* 2023 :
Ver. 14 ๋“ฑ์žฅ. ๋ฉ”๋ชจ๋ฆฌ๊ด€๋ฆฌ ํ–ฅ์ƒ (`edge runtime` - ์ „์„ธ๊ณ„ ์—ฌ๋Ÿฌ ์„œ๋ฒ„ ์ค‘ ์‚ฌ์šฉ์ž์—๊ฒŒ ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ์„œ๋ฒ„์—์„œ ์‹คํ–‰ํ•˜๋Š” ๊ธฐ์ˆ )
SMALL

'๐Ÿชด Next.js' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[Next.js] Setting : yarn create next-app (+ yarn dev ์‹คํ–‰ ์—๋Ÿฌ ํ•ด๊ฒฐํ•˜๊ธฐ)  (0) 2024.03.19
[Next.js/TS] Next.js์˜ ๋ Œ๋”๋ง ํŒจํ„ด(SSG,ISR,SSR,CSR)/Route Handler๋ฅผ ์‚ฌ์šฉํ•œ TO Do List  (0) 2024.03.17
[Next.js] Route Handler๋ฅผ ํ†ตํ•ด ๋ฐฑ์—”๋“œ ๊ตฌํ˜„ํ•ด๋ณด๊ธฐ  (0) 2024.03.14
[Next.js] SSG(Static Site Generation) ๋ Œ๋”๋ง ์‹œ DB ๋ณ€๋™์‚ฌํ•ญ ์ ์šฉ์œ„ํ•ด Cache ๋น„์šฐ๊ธฐ  (0) 2024.03.13
[Next.js] ๋ Œ๋”๋ง ํŒจํ„ด 4๊ฐ€์ง€  (0) 2024.03.12
'๐Ÿชด Next.js' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • [Next.js/TS] Next.js์˜ ๋ Œ๋”๋ง ํŒจํ„ด(SSG,ISR,SSR,CSR)/Route Handler๋ฅผ ์‚ฌ์šฉํ•œ TO Do List
  • [Next.js] Route Handler๋ฅผ ํ†ตํ•ด ๋ฐฑ์—”๋“œ ๊ตฌํ˜„ํ•ด๋ณด๊ธฐ
  • [Next.js] SSG(Static Site Generation) ๋ Œ๋”๋ง ์‹œ DB ๋ณ€๋™์‚ฌํ•ญ ์ ์šฉ์œ„ํ•ด Cache ๋น„์šฐ๊ธฐ
  • [Next.js] ๋ Œ๋”๋ง ํŒจํ„ด 4๊ฐ€์ง€
๋ จ๋””
๋ จ๋””
FE - ๊ฐœ๋ฐœ ๊ณต๋ถ€์˜ ๊ธฐ๋ก
  • ๋ จ๋””
    Ryeon's Devstory
    ๋ จ๋””
  • ์ „์ฒด
    ์˜ค๋Š˜
    ์–ด์ œ
    • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (69)
      • ๐Ÿชด JavaScript & TypeScript (11)
        • ๐Ÿงฉ Algorithm (6)
      • ๐Ÿชด React (12)
      • ๐Ÿชด Next.js (8)
      • ๐Ÿชด HTML & CSS (2)
      • ๐Ÿชด DB & BaaS (5)
      • ๐Ÿชด Git &Github (0)
      • โœ๏ธ ํ”„๋กœ์ ํŠธ ๊ณผ์ • & ํšŒ๊ณ  (18)
      • โœ๏ธ Today what I Learned _T.. (11)
      • ๐Ÿ•Š๏ธ IT ์•„ํ‹ฐํด (0)
      • etc. (2)
  • ๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

    • ํ™ˆ
    • ํƒœ๊ทธ
    • ๋ฐฉ๋ช…๋ก
  • ๋งํฌ

    • My Github ๐Ÿ˜บ
    • ๋„ค์ด๋ฒ„ ๋ธ”๋กœ๊ทธ ๐ŸŽต๐ŸŽง (์ผ์ƒ,์Œ์•… ๋“ฑ)
  • ๊ณต์ง€์‚ฌํ•ญ

  • ์ธ๊ธฐ ๊ธ€

  • ํƒœ๊ทธ

    fetch
    ๋ฐฐ์—ด ๋ฉ”์„œ๋“œ
    reactquery
    props
    ํ‹ฐ์Šคํ† ๋ฆฌ์ฑŒ๋ฆฐ์ง€
    useMutation
    useEffect
    ํ‹ฐ์Šคํ† ๋ฆฌ๋ธ”๋กœ๊ทธ์Šคํ‚จ
    json-server
    ๋ฆฌ์•กํŠธ์ฟผ๋ฆฌ
    tailwind
    ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ
    reacthook
    react
    ์›น๊ฐœ๋ฐœ ๊ธฐ์ดˆ
    ์˜์กด์„ฑ๋ฐฐ์—ด
    ์ปดํฌ๋„ŒํŠธ๋ถ„๋ฆฌ
    ๋ Œ๋”๋งํŒจํ„ด
    State
    ์˜ค๋ธ”์™„
    BAAS
    NVM
    route handler
    axios
    Array.filter
    ์—๋Ÿฌ
    Vite
    Next.js
    ๋น„๋™๊ธฐํ†ต์‹ 
    Supabase
  • ์ตœ๊ทผ ๋Œ“๊ธ€

  • ์ตœ๊ทผ ๊ธ€

  • hELLOยท Designed By์ •์ƒ์šฐ.v4.10.0
๋ จ๋””
[Next.js] Next.js ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๊ธฐ (๊ธฐ๋Šฅ, ํ•œ๊ณ„์  ๋“ฑ)
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”