[Next.js/TS] Next.js์˜ ๋ Œ๋”๋ง ํŒจํ„ด(SSG,ISR,SSR,CSR)/Route Handler๋ฅผ ์‚ฌ์šฉํ•œ TO Do List

2024. 3. 17. 00:16ยท๐Ÿชด Next.js
SMALL

24.3.15

 

๐Ÿซง ๋ฐฐ์šด Next.js์˜ ๊ฐœ๋…์„ ํ† ๋Œ€๋กœ ๊ฐ„๋‹จํžˆ ๋งŒ๋“  To Do List ํ”„๋กœ์ ํŠธ 

 

๊ธฐ๊ฐ„:  3.12 ~ 3.15 ์ธ๋ฐ, ์‚ฌ์‹ค ๊ตฌํ˜„์ž์ฒด๋Š” ๋นจ๋ฆฌ ๋๋ƒˆ๋˜ ๊ฑฐ ๊ฐ™๋‹ค. 

(๊ทผ๋ฐ ๊ทธ ๋’ค์— json-server - vercel ๋ฐฐํฌ๋ฅผ ์‹œ๋„ํ•˜๋‹ค๊ฐ€ ์˜ค๋ฅ˜๊ฐ€ ๋‚˜๊ณ ... localhost๋ฅผ 127.0.0.1๋กœ ๋ฐ”๊ฟ”๋ณด๋‹ค๊ฐ€ CORS ์—๋Ÿฌ๋ฅผ ์ ‘ํ•ด์„œ ใ… ใ…  ์ด๋ฅผ ํ•ด๊ฒฐํ•ด๋ณด๊ณ ์žˆ๋Š” ์ค‘์ด๋‹ค.. )


 

0) ํ™ˆ ๋ฉ”์ธ ํŽ˜์ด์ง€

 

 

1) About ํŽ˜์ด์ง€

SSG๋กœ, (fetch ์˜ต์…˜ - force-cache, ํ˜น์€ ์„ค์ • ์•ˆํ•ด๋„ ๋จ) ๋งŒ๋“ค์–ด build ์‹œ์˜ ๋ฐ์ดํ„ฐ๋กœ ๊ณ ์ •๋˜์–ด ๋ Œ๋”๋ง.

ํšŒ์‚ฌ์ •๋ณด์— ๋Œ€ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€์„œ ๋ณด์—ฌ์ค€๋‹ค. (companyInfo - image, name, description)

 

* ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ์ด๊ธฐ ๋•Œ๋ฌธ์—, ๋ฐ”๋กœ json-server์™€ ์—ฐ๊ฒฐ์‹œ์ผœ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™”๋‹ค. (route handler ๋ฅผ ํ†ตํ•˜์ง€์•Š์Œ) 

 

2) Report ํŽ˜์ด์ง€

ISR๋กœ, revalidate : 10 ์˜ต์…˜์„ ์ฃผ์–ด 10์ดˆ๋งˆ๋‹ค ๋ฐ์ดํ„ฐ ๊ฐฑ์‹ ๋˜๋„๋ก ํ–ˆ๋‹ค.

todos ๋ฐ์ดํ„ฐ์˜ ๋ฐฐ์—ด ๊ธธ์ด๋ฅผ ํ†ตํ•ด ํ•  ์ผ ๋ชฉ๋ก์ด ๋ช‡ ๊ฐœ๊ฐ€ ์žˆ๋Š” ์ง€ ๋“ฑ์„ ๋‚˜ํƒ€๋ƒˆ๋‹ค.

 

* ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ์ด๊ธฐ ๋•Œ๋ฌธ์—, ๋ฐ”๋กœ json-server์™€ ์—ฐ๊ฒฐ์‹œ์ผœ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™”๋‹ค. (route handler ๋ฅผ ํ†ตํ•˜์ง€์•Š์Œ) 

 

3) To-Dos-CSR ํŽ˜์ด์ง€

CSR (ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง)๋กœ ๊ตฌํ˜„ํ•œ ํˆฌ๋‘๋ฆฌ์ŠคํŠธ ํŽ˜์ด์ง€๋กœ, CRUD๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค.

(์—ฌ๊ธฐ์„œ update๋Š” ์™„๋ฃŒ์ƒํƒœ ํ† ๊ธ€๋งŒ ๊ตฌํ˜„) 

toast library ์‚ฌ์šฉ

 

* CSR์ด๊ธฐ๋•Œ๋ฌธ์— ๊ธฐ์กด์˜ React์—์„œ ํ•œ ๊ฒƒ๊ณผ ๋™์ผํ•˜๋‹ค. React-Query๋ฅผ ์‚ฌ์šฉ.

๊ทธ๋Ÿฐ๋ฐ ๋‹ค๋ฅธ ์„œ๋ฒ„์ปดํฌ๋„ŒํŠธ์™€ ๋‹ฌ๋ฆฌ, ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ์ธ ์—ฌ๊ธฐ์„œ๋Š” route handler (app/api/.../route.ts)๋ฅผ ๋ฐฑ์—”๋“œ์‚ผ์•„ ์—ฐ๊ฒฐํ•ด์ฃผ๊ธฐ๋กœํ•จ.

๋ฆฌ์ฟผ๋ฅผ ํ†ตํ•ด route handler (๋ฐฑ์—”๋“œ ์—ญํ• ) ์™€ ์—ฐ๊ฒฐํ•˜๊ณ , route handler์—์„œ json-server (์›๋ž˜ BaaS์ง€๋งŒ) ๋ฅผ DB๋กœ ์‚ผ์•„ ์—ฐ๊ฒฐ์‹œ์ผœ์คฌ๋‹ค.

์ฆ‰ CSR (ํ”„๋ก ํŠธ) <-> route handler (๋ฐฑ) <-> DB   ์ด๋ ‡๊ฒŒ ์—ฐ๊ฒฐ๋œ๋‹ค

 

* ์ฒ˜์Œ์— route handler์™€ ์—ฐ๊ฒฐ ์‹œ, ๋ฐ์ดํ„ฐ์š”์ฒญ ์‹œ ํŠน์ • id๊ฐ€ ํ•„์š”ํ•œ  delete๋‚˜ toggle(์ˆ˜์ • patch) ํ•จ์ˆ˜์˜ ๊ฒฝ์šฐ ๊ทธ๋ƒฅ fetch - request ๋กœ id ๋„ ๊ฐ™์ด ๋„˜๊ฒจ์คฌ์—ˆ๋Š”๋ฐ, ์›๋ž˜๋Š” route handler - dynamic routing ๋™์  ๋ผ์šฐํŒ…์„ ์จ์•ผ ํ•œ๋‹ค๊ณ  ํ•œ๋‹ค.?! 

๊ทธ๋ž˜์„œ  api ํด๋” / todos / [id] ํด๋”  >> ์•ˆ์— route.ts ๋ฅผ ๋งŒ๋“ค์–ด ๊ทธ๊ณณ์— DELETE, PATCH ํ•จ์ˆ˜๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์œผ๋กœ ๋ณ€๊ฒฝํ–ˆ๋‹ค.

 

๊ทธ๋Ÿฌ๋ฉด ์•„๋ž˜ ์ฝ”๋“œ์™€ ๊ฐ™์ด, request ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ { param } ๊ฐ์ฒด๋„ ์ธ์ž๋กœ ๋ฐ›์•„์™€์„œ param์ธ id๋ฅผ ๊บผ๋‚ด์„œ ์“ฐ๋ฉด ๋œ๋‹ค.

์ด route handler ์—์„œ๋Š” ์—ฌ๊ธฐ์„œ db์—ญํ• ์„ ๋งก์€ json-server๋กœ parameter id๋ฅผ ํ†ตํ•ด patch ์š”์ฒญ์„ ๋ณด๋‚ธ๋‹ค. 

// app/api/todos/[id]/route.ts  - route handler

export async function PATCH(request: Request, { params }: { params: { id: string } }) {
    try {
        // const { id, isDone } = await request.json(); ์ด์ œ ์ด๋ ‡๊ฒŒ ํ•  ํ•„์š” X
        const id = params.id;
        const { isDone } = await request.json();
        await fetch(`${process.env.NEXT_PUBLIC_DB_URL}/todos/${id}`, { // json-server ์ฃผ์†Œ
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ isDone: !isDone }) 
        });
        return new Response(null, { status: 204 });
    } catch (error) {
        throw new Error('Internal Server Error !');
    }
}

 

 

4) To-Dos-SSR ํŽ˜์ด์ง€

SSR (์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง)๋กœ ๊ตฌํ˜„ํ•œ ํˆฌ๋‘๋ฆฌ์ŠคํŠธ ํŽ˜์ด์ง€๋กœ, Read ์กฐํšŒ๋งŒ ๊ฐ€๋Šฅํ•œ ์ƒํƒœ์ด๋‹ค.

์œ ์ € ์š”์ฒญ๋งˆ๋‹ค ๋ฐ์ดํ„ฐ๊ฐ€ ๊ฐฑ์‹ ๋˜๊ธฐ ๋•Œ๋ฌธ์— CSR ๊ณผ ์œ ์‚ฌํ•˜์ง€๋งŒ, ์„œ๋ฒ„ ์‚ฌ์ด๋“œ์—์„œ ๋ Œ๋”๋งํ•œ๋‹ค๋Š” ์ !

 

* ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ์ด๊ธฐ ๋•Œ๋ฌธ์—, ๋ฐ”๋กœ json-server์™€ ์—ฐ๊ฒฐ์‹œ์ผœ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™”๋‹ค. (route handler ๋ฅผ ํ†ตํ•˜์ง€์•Š์Œ) 

 

 


 

next.js ์˜ ๋ Œ๋”๋ง ํŒจํ„ด ๊ธฐ์ดˆ๊ฐœ๋…์€ ์ˆ™์ง€ํ–ˆ์ง€๋งŒ .. ์ž์„ธํžˆ ํŒŒ๊ณ ๋“ค์–ด๊ฐ€๋ฉด ํ—ท๊ฐˆ๋ฆฌ๋Š” ๊ฒƒ ๊ฐ™๊ธฐ๋„ ํ•˜๋‹ค. 

 

์˜ˆ๋ฅผ ๋“ค๋ฉด SSR ํŽ˜์ด์ง€๋Š” ์„œ๋ฒ„์ปดํฌ๋„ŒํŠธ์ด์ง€๋งŒ ๊ทธ ์•ˆ์—, ์œ ์ €์™€ ์ƒํ˜ธ์ž‘์šฉํ•˜๋Š” '๋ฒ„ํŠผ'๊ณผ ๊ฐ™์€ ์ปดํฌ๋„ŒํŠธ๋Š” ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ์ด๋‹ค. ํ•˜์ง€๋งŒ, SSR ํŽ˜์ด์ง€์— ์žˆ๋Š” TodoList ์ปดํฌ๋„ŒํŠธ๋Š” ์„œ๋ฒ„์ปดํฌ๋„ŒํŠธ์ด๊ณ , ๋˜ ๊ทธ ์•ˆ์— ์†ํ•˜๋Š” TodoItem ์ปดํฌ๋„ŒํŠธ๋Š” ๋ฐ˜๋“œ์‹œ ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ์—ฌ์•ผ๋งŒ ๋™์ž‘ํ–ˆ๋‹ค. (์—ฌ๊ธฐ์„œ react query usemutation์„ ํ™œ์šฉํ•˜๋Š” hook์„ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ ๋•Œ๋ฌธ??)  

 

๊ทธ๋ฆฌ๊ณ  [parameter] ํด๋”๋ฅผ ๋งŒ๋“ค์–ด ๋™์ ๋ผ์šฐํŒ…ํ•ด์„œ route handler ํ™œ์šฉํ•˜๊ธฐ๋„ ์—ฐ์Šตํ•ด๋ณด๋‹ˆ ์ข‹์•˜์ง€๋งŒ ๋‹ค์‹œ ๊ณต๋ถ€ํ•ด๋ด์•ผ ํ•  ๊ฑฐ ๊ฐ™๋‹ค.

 

 

(ํŠนํžˆ ์ผ๋‹จ์€ .. ์•„๋งˆ route handler ๋•Œ๋ฌธ์— ์ƒ๊ธด ๋ฐฐํฌ ์—๋Ÿฌ๋ถ€ํ„ฐ ํ•ด๊ฒฐํ•˜๊ณ  ....ใ…Žใ…Ž ใ… ใ… ใ…  

json-server ๋ฐฐํฌ๋„ ํ•ด๋ณด๊ณ ์‹ถ์—ˆ๋Š”๋ฐ ์–ด๋ ต๋‹ค..!) 

SMALL

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

[Next.js] not-found.js (ts(x)) ํŽ˜์ด์ง€ ์ƒ์„ฑ์€ appํด๋” ๋ฐ”๋กœ ๋ฐ‘์— ํ•˜๊ธฐ  (0) 2024.03.29
[Next.js] Setting : yarn create next-app (+ yarn dev ์‹คํ–‰ ์—๋Ÿฌ ํ•ด๊ฒฐํ•˜๊ธฐ)  (0) 2024.03.19
[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] not-found.js (ts(x)) ํŽ˜์ด์ง€ ์ƒ์„ฑ์€ appํด๋” ๋ฐ”๋กœ ๋ฐ‘์— ํ•˜๊ธฐ
  • [Next.js] Setting : yarn create next-app (+ yarn dev ์‹คํ–‰ ์—๋Ÿฌ ํ•ด๊ฒฐํ•˜๊ธฐ)
  • [Next.js] Route Handler๋ฅผ ํ†ตํ•ด ๋ฐฑ์—”๋“œ ๊ตฌํ˜„ํ•ด๋ณด๊ธฐ
  • [Next.js] SSG(Static Site Generation) ๋ Œ๋”๋ง ์‹œ DB ๋ณ€๋™์‚ฌํ•ญ ์ ์šฉ์œ„ํ•ด Cache ๋น„์šฐ๊ธฐ
๋ จ๋””
๋ จ๋””
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 ๐Ÿ˜บ
    • ๋„ค์ด๋ฒ„ ๋ธ”๋กœ๊ทธ ๐ŸŽต๐ŸŽง (์ผ์ƒ,์Œ์•… ๋“ฑ)
  • ๊ณต์ง€์‚ฌํ•ญ

  • ์ธ๊ธฐ ๊ธ€

  • ํƒœ๊ทธ

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

  • ์ตœ๊ทผ ๊ธ€

  • hELLOยท Designed By์ •์ƒ์šฐ.v4.10.0
๋ จ๋””
[Next.js/TS] Next.js์˜ ๋ Œ๋”๋ง ํŒจํ„ด(SSG,ISR,SSR,CSR)/Route Handler๋ฅผ ์‚ฌ์šฉํ•œ TO Do List
์ƒ๋‹จ์œผ๋กœ

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