πͺ λ€μ΄κ°λ©°Next.jsμμλ μλ²μ¬μ΄λ λ λλ§(SSR)μ ν΅ν΄ μ¬μ©μκ° νμ΄μ§μ μ κ·ΌνκΈ° μ μ μλ²μμ λ°μ΄ν°λ₯Ό 미리 κ°μ Έμ νμ΄μ§λ₯Ό λ λλ§ν μ μμ΅λλ€. μ΄ κ³Όμ μλ λ κ°μ§ μ€μν μμκ° μλν©λλ€API νΈλ€λ¬ (@api/article.ts)νμ΄μ§ μ»΄ν¬λνΈ (@pages/community/index.tsx)μ΄ λ μμκ° μ΄λ»κ² μνΈμμ©νμ¬ λμ μ½ν
μΈ λ₯Ό ν¨μ¨μ μΌλ‘ μ 곡νλμ§ μ΄ν΄λ³΄μ βοΈ1. @api/article.tsμν : API νΈλ€λ¬κΈ°λ₯: ν΄λΌμ΄μΈνΈμ GET, POST, DELETE μμ²μ μ²λ¦¬νκ³ , μΈλΆ APIλ λ°μ΄ν°λ² μ΄μ€μ μνΈμμ©νμ¬ νμν λ°μ΄ν°λ₯Ό κ°μ Έμ€κ±°λ μμ ν©λλ€.μ΄λ λ°±μλμμ λ°μ΄ν° μ²λ¦¬λ₯Ό λ΄λΉν©λλ€.μμ: getArticles() ν¨μλ κ²μκΈ λͺ©λ‘μ κ°μ Έμ JSON ν..
CSRκ³Ό SSR λΉκ΅ λ° CSRμ λ¨μ 보μ λ°©λ²μ°μ SPAμ MPAμ λν΄μ μμ보μ1. SPAμ MPAμ κΈ°λ³Έ κ°λ
1οΈβ£ SPA (Single Page Application)νλμ νμ΄μ§λ‘ ꡬμ±λ μΉ μ ν리μΌμ΄μ
μ
λλ€. νμ΄μ§ μ ν μ νλ©΄μ΄ κΉλΉ‘μ΄μ§ μκ³ , μλ‘μ΄ νμ΄μ§λ₯Ό μμ²ν λ μλ²λ‘λΆν° νμν λ°μ΄ν°λ§ μ λ¬λ°μ λ λλ§ν©λλ€.μ¦, CSR(Client-Side Rendering) λ°©μμ μ¬μ©ν©λλ€.2οΈβ£ MPA (Multi Page Application)μ ν΅μ μΈ μΉ μ ν리μΌμ΄μ
λ°©μμ
λλ€. νμ΄μ§ μ ν μλ§λ€ μλ²μμ μλ‘μ΄ HTMLμ λ°μμ μ 체 νμ΄μ§λ₯Ό μλ‘ λ λλ§ν©λλ€. μ΄λ νμ΄μ§κ° κΉλΉ‘μΌ μ μμΌλ©°, SSR(Server-Side Rendering) λ°©μμ μ¬μ©ν©λλ€.2. CSR(Clie..
public ν΄λμ μ νμΌ: public ν΄λλ μ μ νμΌ(μ΄λ―Έμ§, ν°νΈ, μμ΄μ½ λ±)μ μ μ₯νλ κ³³μ
λλ€. μ΄ ν΄λμ μλ νμΌμ / κ²½λ‘λ‘ μ κ·Όν μ μμ΅λλ€.μ©λ: μ μ νμΌμ μ μ₯νλ ν΄λλ‘, μΉ μ ν리μΌμ΄μ
μ 리μμ€λ₯Ό κ΄λ¦¬ν©λλ€.μμ: public/images/logo.png νμΌμ /images/logo.pngλ‘ μ κ·Όν μ μμ΅λλ€._app.js νμΌμ»€μ€ν
App μ»΄ν¬λνΈ: _app.js νμΌμ Next.js μ ν리μΌμ΄μ
μ μ 체 λ μ΄μμκ³Ό μν κ΄λ¦¬λ₯Ό μν μ§μ
μ μ
λλ€. λͺ¨λ νμ΄μ§μμ 곡ν΅μΌλ‘ μ¬μ©ν μ»΄ν¬λνΈλ₯Ό μ€μ ν μ μμ΅λλ€.μ©λ: κ° νμ΄μ§μμ 곡ν΅μ μΌλ‘ μ μ©ν μ€μ μ μ μν©λλ€.μν κ΄λ¦¬: μ μ μ€νμΌμ΄λ λ μ΄μμ, 컨ν
μ€νΈ μ 곡 λ±μ μ€μ ν μ μμ΄, νμ΄μ§ μ ν μ μΌκ΄λ UIλ₯Ό..