JAMstackμ μ μ¬λ ₯μ μ΅λν νμ©νμΈμ. μλ²λ¦¬μ€, API, μ΅μ νλ‘ νΈμλ λꡬλ₯Ό μ¬μ©νμ¬ μ μ μ¬μ΄νΈμ λμ κΈ°λ₯μ ν΅ν©νκ³ , μ μΈκ³μ μΌλ‘ κ³ μ±λ₯ μΉ κ²½νμ ꡬμΆνλ λ°©λ²μ μμ보μΈμ.
νλ‘ νΈμλ JAMstack ν₯μ: μ μ μ¬μ΄νΈμμ λμ κΈ°λ₯ ꡬννκΈ°
λΉ λ₯΄κ² λ°μ νλ μΉ κ°λ° νκ²½μμ JAMstack μν€ν μ²λ λΉν λ° μλ μ±λ₯, 보μ, νμ₯μ±μ μ½μνλ©° κ°λ ₯ν νμΌλ‘ λΆμνμ΅λλ€. μ ν΅μ μΌλ‘ "μ μ μ¬μ΄νΈ"λ λ¨μνκ³ λ³νμ§ μλ μΉ νμ΄μ§λ₯Ό μ°μμμΌ°μ΅λλ€. νμ§λ§ νλμ JAMstackμ μ΄λ¬ν μΈμμ κΉ¨κ³ , κ°λ°μλ€μ΄ μ μ μ λ¬μ ν΅μ¬ μ΄μ μ ν¬μνμ§ μμΌλ©΄μλ λλλλ‘ λμ μ΄κ³ μνΈμμ©μ΄ κ°λ₯νλ©° κ°μΈνλ μ¬μ©μ κ²½νμ ꡬμΆν μ μκ² νμ΅λλ€.
μ΄ μ’ ν© κ°μ΄λλ μ μ μΈ κ²κ³Ό λμ μΈ κ²μ΄ λ§λλ λ§€νΉμ μΈ μΈκ³λ₯Ό νꡬν©λλ€. μ°λ¦¬λ JAMstackμ΄ μ΄λ»κ² νλ‘ νΈμλ κ°λ°μλ€μ΄ νλ 볡μ‘ν μλ²μ¬μ΄λ μ ν리μΌμ΄μ μ μ μ λ¬Όμ΄μλ μ κ΅ν κΈ°λ₯λ€μ ν΅ν©ν μ μκ² νλμ§, λμμ μ½ν μΈ μ μ‘ λ€νΈμν¬(CDN)μ κΈλ‘λ² λλ¬ λ²μμ ν¨μ¨μ±μ νμ©νλ λ°©λ²μ μ΄ν΄λ³Ό κ²μ λλ€. μ μΈκ³ μ¬μ©μλ₯Ό λμμΌλ‘ νλ κ²½μ°, μ΄λ¬ν ν₯μλ κΈ°λ₯μ μ΄ν΄νλ κ²μ λλ₯κ³Ό λ€μν λ€νΈμν¬ μ‘°κ±΄μ κ±Έμ³ μ¬μ©μμκ² μννκ² μλΉμ€λ₯Ό μ 곡νλ κ²¬κ³ νκ³ κ³ μ±λ₯μΈ μΉ μ ν리μΌμ΄μ μ ꡬμΆνλ λ° λ§€μ° μ€μν©λλ€.
JAMstack ν΄λΆ: κ°λ¨ν μ λ¬Έ
λμ κΈ°λ₯ ν₯μμ λν΄ μμ보기 μ μ JAMstackμ ν΅μ¬ μμΉμ μ μ μ΄ν΄λ³΄κ² μ΅λλ€:
- JavaScript: λͺ¨λ λμ νλ‘κ·Έλλ° μμ²κ³Ό μλ΅μ μ²λ¦¬ν©λλ€. ν΄λΌμ΄μΈνΈ μΈ‘μμ μ€νλλ μνΈμμ©μ μμ§μ λλ€.
- APIs: JavaScriptκ° ν΅μ νλ HTTPλ₯Ό ν΅ν μ¬μ¬μ© κ°λ₯νκ³ μ κ·Ό κ°λ₯ν μΈν°νμ΄μ€μ λλ€. μ΄λ₯Ό ν΅ν΄ μλ²μ¬μ΄λ νλ‘μΈμ€μ λ°μ΄ν°λ² μ΄μ€ μμ μ μ λ¬Έ μλΉμ€μ μ€νλ‘λν©λλ€.
- Markup: CDNμμ μ§μ μ 곡λλ μ¬μ λΉλλ μ μ HTML νμΌμ λλ€. μ΄κ²μ΄ μλμ 보μμ κΈ°λ°μ λλ€.
λ§λ²μ λ컀νλ§μ μμ΅λλ€. λͺ¨λ κ²μ μ²λ¦¬νλ λ¨μΌ μλ² λμ , JAMstackμ νλ‘ νΈμλ(λ§ν¬μ λ° ν΄λΌμ΄μΈνΈμ¬μ΄λ JavaScript)λ₯Ό λ°±μλ μλΉμ€(API λ° λ°μ΄ν°λ² μ΄μ€)μ λΆλ¦¬ν©λλ€. μ΄ λΆλ¦¬κ° λ°λ‘ μ ν΅μ μΈ μλ² μμ΄ λμ κΈ°λ₯μ ꡬνν μ μλ λ¬Έμ μ΄μ΄μ£Όλ κ²μ λλ€.
λͺ¨μμ ν΄κ²°: μ μ μ¬μ΄νΈκ° λμ μ±μ λ¬μ±νλ λ°©λ²
JAMstackμ λμ κΈ°λ₯μ ν΅μ¬μ 볡μ‘μ±μ μ λ΅μ μ νμ μμ΅λλ€. μμ² μ μλ²μμ λμ μ½ν μΈ λ₯Ό λ λλ§νλ λμ , JAMstack μ ν리μΌμ΄μ μ μ’ μ’ λ€μκ³Ό κ°μ΄ μλν©λλ€:
- μ¬μ λ λλ§ (λΉλ νμ): λΉλ κ³Όμ μμ κ°λ₯ν ν λ§μ μ μ HTMLμ μμ±ν©λλ€. μ¬κΈ°μλ ν€λλ¦¬μ€ CMSμ λΈλ‘κ·Έ κ²μλ¬Ό, μ ν νμ΄μ§ λλ μΌλ°μ μΈ λ§μΌν μ½ν μΈ κ° ν¬ν¨λ μ μμ΅λλ€.
- νμ΄λλ μ΄μ (ν΄λΌμ΄μΈνΈ μ¬μ΄λ): JavaScriptλ₯Ό μ¬μ©νμ¬ μ΄ μ μ HTMLμ "νμ΄λλ μ΄νΈ(hydrate)"νμ¬ μμ ν μνΈμμ©μ΄ κ°λ₯ν λ¨μΌ νμ΄μ§ μ ν리μΌμ΄μ (SPA) λλ μ μ§μ μΌλ‘ ν₯μλ μ¬μ΄νΈλ‘ λ§λλλ€.
- λμ λ°μ΄ν° κ°μ Έμ€κΈ° (λ°νμ): ν΄λΌμ΄μΈνΈμ¬μ΄λ JavaScript(λλ μλ²λ¦¬μ€ ν¨μ)μμ API νΈμΆμ νμ¬ μ€μκ° λ°μ΄ν°λ₯Ό κ°μ Έμ€κ±°λ, μμμ μ μΆνκ±°λ, μ¬μ©μ μΈμ¦μ μ²λ¦¬νκ³ , μ΄ λ°μ΄ν°λ₯Ό μ¬μ λ λλ§λ λ§ν¬μ μ ν΅ν©ν©λλ€.
μ΄ "λΉλ νμ" λ "λ°νμ"μ ꡬλΆμ λ§€μ° μ€μν©λλ€. μ μ μ¬μ΄νΈλ CDNμ μ μ μΌλ‘ μ‘΄μ¬νμ§λ§, μ΅μ λΈλΌμ°μ μ λΆμ° μλΉμ€μ νμ νμ©νμ¬ μ¬μ©μ μνΈμμ© μ λ§€μ° λμ μΌλ‘ λ³ν©λλ€.
JAMstackμ λμ κΈ°λ₯μ ꡬλνλ ν΅μ¬ κΈ°μ
μ μ μ¬μ΄νΈ νλ μμν¬ λ΄μμ λμ κΈ°λ₯μ ꡬννλ κ²μ μ¬λ¬ κΈ°μ λ€μ μλμ§ ν¨κ³Όμ ν¬κ² μμ‘΄ν©λλ€. μ£Όμ κ΅¬μ± μμλ₯Ό μ΄ν΄λ³΄κ² μ΅λλ€:
1. μλ²λ¦¬μ€ ν¨μ (Functions as a Service - FaaS)
μλ²λ¦¬μ€ ν¨μλ JAMstackμ μλμ νμ₯νλ λ° μμ΄ κ°μ₯ νμ μ μΈ μμλΌκ³ ν μ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ κ°λ°μλ μλ²λ₯Ό νλ‘λΉμ λνκ±°λ κ΄λ¦¬ν νμ μμ΄ μ΄λ²€νΈ(μ: HTTP μμ²)μ μλ΅νμ¬ λ°±μλ μ½λλ₯Ό μ€νν μ μμ΅λλ€. μ¦, μμ μ μΆ μ²λ¦¬, κ²°μ μ²λ¦¬, λ°μ΄ν°λ² μ΄μ€μμ μνΈ μμ©κ³Ό κ°μ λ§μΆ€ν λ°±μλ λ‘μ§μ μ μ νλ‘ νΈμλμμ μ§μ μ€νν μ μμ΅λλ€.
- κΈλ‘λ² μ 곡μ 체: AWS Lambda, Azure Functions, Google Cloud Functions, Cloudflare Workersμ κ°μ μλΉμ€λ κ²¬κ³ νκ³ μ μΈκ³μ μΌλ‘ λΆμ°λ μλ²λ¦¬μ€ νλ«νΌμ μ 곡ν©λλ€.
- JAMstack μ μ© κ΅¬ν: Netlify Functions λ° Vercel Edge Functionsμ κ°μ νλ«νΌμ κ°κ°μ λ°°ν¬ μν¬νλ‘μ°μ μννκ² ν΅ν©λμ΄ κ°λ°μ λ¨μνν©λλ€.
- μ¬μ© μ¬λ‘:
- λ§μΆ€ν API μλν¬μΈνΈ: νΉμ μꡬμ λ§λ μ체 λ°±μλ APIλ₯Ό ꡬμΆν©λλ€.
- μμ μ²λ¦¬: μμ μ μΆμ μμ νκ² μ²λ¦¬νκ³ μ μ₯ν©λλ€.
- κ²°μ μ²λ¦¬: Stripe λλ PayPalκ³Ό κ°μ κ²°μ κ²μ΄νΈμ¨μ΄μ ν΅ν©ν©λλ€.
- μ¬μ©μ μΈμ¦: μ¬μ©μ μΈμ λ° κΆνμ κ΄λ¦¬ν©λλ€.
- λ°μ΄ν° μ²λ¦¬: ν΄λΌμ΄μΈνΈλ‘ λ°μ΄ν°λ₯Ό 보λ΄κΈ° μ μ λ°μ΄ν°λ₯Ό λ³ννκ±°λ νν°λ§ν©λλ€.
- μΉν : νμ¬ μλΉμ€μ μ΄λ²€νΈμ μλ΅ν©λλ€.
μ μΈκ³μ μΌλ‘ μ곡μνμ νλ§€νλ μκ·λͺ¨ μ μμκ±°λ μ¬μ΄νΈλ₯Ό μμν΄ λ³΄μμμ€. μλ²λ¦¬μ€ ν¨μλ μμ μ£ΌμΈμ μν μ μ© λ°±μλ μλ² μμ΄λ κ³ κ°μ κ²°μ μ 보λ₯Ό μμ νκ² μ²λ¦¬νκ³ , νμ§ ν΅νλ‘ κ²°μ κ²μ΄νΈμ¨μ΄μ μνΈ μμ©νλ©°, μ¬κ³ λ₯Ό μ λ°μ΄νΈν μ μμ΅λλ€.
2. νμ¬ API λ° κ΄λ¦¬ν μλΉμ€
JAMstack μνκ³λ ꡬμ±(composition)μ ν΅ν΄ λ²μ±ν©λλ€. κ°λ°μλ λͺ¨λ κΈ°λ₯μ μ²μλΆν° ꡬμΆνλ λμ , μ λ¬Ένλ νμ¬ μλΉμ€λ₯Ό APIλ₯Ό ν΅ν΄ ν΅ν©ν©λλ€. μ΄λ¬ν "API μ°μ " μ κ·Ό λ°©μμ λμ κΈ°λ₯μ λΉ λ₯΄κ³ ν¨μ¨μ μΌλ‘ ꡬννλ λ° κΈ°λ³Έμ΄ λ©λλ€.
- ν€λλ¦¬μ€ μ½ν
μΈ κ΄λ¦¬ μμ€ν
(CMS):
- μμ: Contentful, Strapi, Sanity, DatoCMS, Prismic.
- μν : μ½ν μΈ (ν μ€νΈ, μ΄λ―Έμ§, λΉλμ€)λ₯Ό κ΄λ¦¬νκ³ APIλ₯Ό ν΅ν΄ λ ΈμΆν©λλ€. κ·Έλ¬λ©΄ νλ‘ νΈμλκ° μ΄ μ½ν μΈ λ₯Ό κ°μ Έμ λ λλ§ν©λλ€. μ΄λ₯Ό ν΅ν΄ μ½ν μΈ μ μμλ κ°λ°μμ κ°μ μμ΄ μ¬μ΄νΈ μ½ν μΈ λ₯Ό μ λ°μ΄νΈν μ μμ΅λλ€.
- λμ μ½ν μΈ μ λ°μ΄νΈ: μλ‘μ΄ λΈλ‘κ·Έ κ²μλ¬Ό, μ ν μ€λͺ λλ μΊ νμΈ λ°°λλ₯Ό CMSλ₯Ό ν΅ν΄ κ²μνκ³ μ μ μ¬μ΄νΈμ λ°μν μ μμΌλ©°, μ΄λ μ’ μ’ λ¦¬λΉλ λλ μ€μκ° λ°μ΄ν° κ°μ Έμ€κΈ°λ₯Ό νΈλ¦¬κ±°ν©λλ€.
- μΈμ¦ μλΉμ€:
- μμ: Auth0, Clerk, Firebase Authentication, Supabase Auth.
- μν : μ¬μ©μ λ±λ‘, λ‘κ·ΈμΈ, μΈμ κ΄λ¦¬ λ° κΆν λΆμ¬λ₯Ό μμ νκ² μ²λ¦¬ν©λλ€.
- λμ μ¬μ©μ κ²½ν: κ°μΈνλ λμ보λ, νμ μ μ© μ½ν μΈ λλ μ¬μ©μλ³ μ€μ μ μ 곡ν©λλ€.
- μ μμκ±°λ νλ«νΌ:
- μμ: Stripe (κ²°μ ), Shopify Storefront API, Snipcart, Commerce.js.
- μν : μ ν μΉ΄νλ‘κ·Έ, μ₯λ°κ΅¬λ, κ²°μ νλ‘μΈμ€ λ° μ£Όλ¬Έ μ²λ¦¬λ₯Ό κ΄λ¦¬ν©λλ€.
- λμ μΌν: μ€μκ° μ¬κ³ μ λ°μ΄νΈ, κ°μΈνλ μΆμ², μμ ν κ²°μ νλ¦.
- κ²μ μλΉμ€:
- μμ: Algolia, ElasticSearch, Meilisearch.
- μν : λκ·λͺ¨ λ°μ΄ν° μΈνΈμ λν΄ λΉ λ₯΄κ³ κ΄λ ¨μ± λμ κ²μ κΈ°λ₯μ μ 곡ν©λλ€.
- λμ κ²μ: μ¦κ°μ μΈ κ²μ κ²°κ³Ό, ν¨μ― κ²μ, μλ μμ± μ μ.
- μλΉμ€ν λ°μ΄ν°λ² μ΄μ€ (DBaaS) & μλ²λ¦¬μ€ λ°μ΄ν°λ² μ΄μ€:
- μμ: FaunaDB, PlanetScale, Supabase, Firebase Firestore/Realtime Database.
- μν : ꡬ쑰νλκ±°λ λΉκ΅¬μ‘°νλ λ°μ΄ν°λ₯Ό μ μ₯νκ³ κ²μνλ©°, μ’ μ’ κΈλ‘λ² λ°°ν¬ λ° μ€μκ° μ λ°μ΄νΈμ μ΅μ νλμ΄ μμ΅λλ€.
- λμ λ°μ΄ν° μμμ±: μ¬μ©μ κΈ°λ³Έ μ€μ , λκΈ, κ²μ μ μ λλ λͺ¨λ μ ν리μΌμ΄μ λ³ λ°μ΄ν°λ₯Ό μ μ₯ν©λλ€.
- κΈ°ν μλΉμ€: μ΄λ©μΌ λ§μΌν (Mailgun, SendGrid), λΆμ (Google Analytics, Fathom), μ΄λ―Έμ§ μ΅μ ν (Cloudinary, Imgix), λκΈ (Disqus, Hyvor Talk).
κΈλ‘λ² λ΄μ€ ν¬νΈμ ν€λλ¦¬μ€ CMSλ₯Ό μ¬μ©νμ¬ μ μΈκ³ κΈ°μλ€μ κΈ°μ¬λ₯Ό κ΄λ¦¬νκ³ μ μ μ¬μ΄νΈμ νμν μ μμ΅λλ€. μ¬μ©μ λκΈμ νμ¬ μλΉμ€λ‘ μ²λ¦¬ν μ μμΌλ©°, κ°μΈνλ λ΄μ€ νΌλλ μΈμ¦ APIμ μλ²λ¦¬μ€ λ°μ΄ν°λ² μ΄μ€λ₯Ό κ²°ν©νμ¬ κ΅¬λν μ μμ΅λλ€.
3. ν΄λΌμ΄μΈνΈμ¬μ΄λ JavaScript νλ μμν¬ λ° λΌμ΄λΈλ¬λ¦¬
μ΅μ JavaScript νλ μμν¬λ JAMstack μ ν리μΌμ΄μ μ μνΈμμ© κ³μΈ΅μ ꡬμΆνλ λ° νμμ μ λλ€. λ°μ΄ν° κ°μ Έμ€κΈ°, μν κ΄λ¦¬, UI λ λλ§, μ¬μ©μ μνΈμμ©μ μ²λ¦¬νμ¬ μ μ λ§ν¬μ μ "λμ " μμλ₯Ό λΆμ΄λ£μ΅λλ€.
- μμ: React, Vue, Angular, Svelte.
- μ΄λ₯Ό κΈ°λ°μΌλ‘ ꡬμΆλ μ μ μ¬μ΄νΈ μμ±κΈ° (SSG): Next.js, Nuxt.js, Gatsby, SvelteKit, Astro. μ΄λ¬ν SSGλ ν΄λΌμ΄μΈνΈμ¬μ΄λ νλ μμν¬μ κ°λ ₯ν¨κ³Ό λΉλ νμ μ¬μ λ λλ§μ κ²°ν©νμ¬ JAMstackμ μ΄μμ μ λλ€.
- μν :
- λ°μ΄ν° κ°μ Έμ€κΈ°: APIμ λΉλκΈ° μμ²μ 보λ λλ€.
- UI μ λ°μ΄νΈ: κ°μ Έμ¨ λ°μ΄ν°λ μ¬μ©μ μ λ ₯μ λ°λΌ νμ΄μ§μ μΌλΆλ₯Ό λμ μΌλ‘ λ λλ§νκ±°λ μ λ°μ΄νΈν©λλ€.
- λΌμ°ν : λΆλλ¬μ΄ SPAμ κ°μ νμ κ²½νμ μ 곡ν©λλ€.
- μν κ΄λ¦¬: 볡μ‘ν μνΈμμ©μ μν μ ν리μΌμ΄μ μνλ₯Ό κ΄λ¦¬ν©λλ€.
μ¬ν μμ½ μ¬μ΄νΈλ₯Ό μμν΄ λ³΄μμμ€. μ΄κΈ° λͺ©μ μ§ νμ΄μ§λ μλλ₯Ό μν΄ μ¬μ λ λλ§λ©λλ€. μ¬μ©μκ° λ μ§λ₯Ό μ ννλ©΄ ν΄λΌμ΄μΈνΈμ¬μ΄λ JavaScriptκ° APIμμ μ€μκ° κ°μ©μ±κ³Ό κ°κ²©μ κ°μ Έμ μ 체 νμ΄μ§ μλ‘κ³ μΉ¨ μμ΄ μμ½ μμμ λμ μΌλ‘ μ λ°μ΄νΈν©λλ€.
JAMstackμ μ μ -λμ νΌν©μ μ΄μ
μ΄ μν€ν μ²λ₯Ό μ±ννλ©΄ κ°λ°μμ μ΅μ’ μ¬μ©μ λͺ¨λμκ², νΉν κΈλ‘λ² μ¬μ©μλ₯Ό λμμΌλ‘ ꡬμΆν λ λ§€λ ₯μ μΈ μ΄μ μ μ 곡ν©λλ€:
1. νμν μ±λ₯ λ° SEO
- λλΆμκ² λΉ λ₯Έ λ‘λ© μλ: CDNμμ μ 곡λλ μ¬μ λ λλ§λ HTMLμ μ½ν μΈ κ° μ μΈκ³ μ¬μ©μμκ² λ¬Όλ¦¬μ μΌλ‘ λ κ°κΉλ€λ κ²μ μλ―Ένλ©°, μ§μ° μκ°μ μ€μ λλ€. μ΄λ νΉν λ€μν μΈν°λ· μλλ₯Ό κ°μ§ μ§μμμ μ¬μ©μ μ°Έμ¬λμ μ νμ¨μ λ§€μ° μ€μν©λλ€.
- μ½μ΄ μΉ λ°μ΄ν κ°μ : Googleμ μ½μ΄ μΉ λ°μ΄νκ³Ό μμ°μ€λ½κ² μΌμΉνμ¬ λ λμ κ²μ μμ§ μμλ₯Ό κ°μ Έμ΅λλ€.
- κΈλ‘λ² λλ¬ λ²μ: CDNμ μ¬μ©μκ° λμΏ, λ² λ₯Όλ¦°, μνμΈλ£¨ μ΄λμ μλ μΌκ΄λ μ±λ₯μ 보μ₯ν©λλ€.
2. ν₯μλ 보μ
- 곡격 νλ©΄ κ°μ: λλΆλΆμ μμ μμ κ΄λ¦¬ν μ§μ μ μΈ λ°μ΄ν°λ² μ΄μ€ μ°κ²°μ΄λ μ ν΅μ μΈ μλ²κ° μμ΄ μ μ¬μ μΈ μ·¨μ½μ μ ν¬κ² μ νν©λλ€.
- κ΄λ¦¬ν 보μ: μΈμ¦μ΄λ κ²°μ μ²λ¦¬μ κ°μ 볡μ‘ν μμ μ μ λ¬Έμ μ΄κ³ μμ ν νμ¬ μλΉμ€μ μ€νλ‘λνμ¬ κ°λ°μμ λΆλ΄μ μ€μ λλ€.
- μ μ νμΌμ λ©΄μ: CDNμμ μ§μ μ 곡λλ HTML νμΌμ μ ν΅μ μΈ μλ―Έμμ ν΄νΉλ μ μμ΅λλ€.
3. μ°μν νμ₯μ± λ° μ λ’°μ±
- μμ¬μ΄ νμ₯: CDNμ λ³Έμ§μ μΌλ‘ λκ·λͺ¨ νΈλν½ κΈμ¦μ μν΄ μ€κ³λμμΌλ©°, μλ²λ¦¬μ€ ν¨μλ μμμ λ°λΌ μλμΌλ‘ νμ₯λ©λλ€. μ΄λ μμΈ‘ν μ μλ κΈλ‘λ² νΈλν½μ κ²½ννλ μ ν리μΌμ΄μ μ νμμ μ λλ€.
- κ³ κ°μ©μ±: μ½ν μΈ κ° μ μΈκ³ μ¬λ¬ μλ²μ 볡μ λμ΄ μΌλΆ μλ²μ λ¬Έμ κ° λ°μνλλΌλ μ¬μ΄νΈμ κ³μ μ‘μΈμ€ν μ μμ΅λλ€.
- λΉμ© ν¨μ¨μ±: μλ²λ¦¬μ€ ν¨μ λ° CDN μ¬μ©μ λν μ’ λμ λͺ¨λΈμ μλΉν λ§νΌλ§ λΉμ©μ μ§λΆνλ€λ κ²μ μλ―Ένλ―λ‘ νΈλν½ ν¨ν΄μ κ΄κ³μμ΄ λͺ¨λ κ·λͺ¨μ λΉμ¦λμ€μ λ§€μ° ν¨μ¨μ μ λλ€.
4. λ¨μνλ κ°λ°μ κ²½ν
- μ΅μ λꡬ νμ©: μ΅μν νλ‘ νΈμλ λꡬ λ° μν¬νλ‘μ°(Git, μ΅μ JavaScript νλ μμν¬)λ₯Ό νμ©ν©λλ€.
- λ λΉ λ₯Έ κ°λ° μ£ΌκΈ°: λ컀νλ§μ ν΅ν΄ νλ‘ νΈμλμ λ°±μλ νμ΄ λ 립μ μΌλ‘ μμ ν μ μμ΄ κΈ°λ₯ μ 곡 μλλ₯Ό λμ λλ€.
- μ΄μ μ€λ²ν€λ κ°μ: μλ² κ΄λ¦¬κ° μ€μ΄λ€μ΄ κ°λ°μλ μΈνλΌλ³΄λ€ κΈ°λ₯ ꡬμΆμ λ μ§μ€ν μ μμ΅λλ€.
μ€μ©μ μΈ μμ: λμ JAMstack ꡬννκΈ°
μ΄λ¬ν κ°λ μ΄ λ€μν λΆλ¬Έμμ μ€μ μ ν리μΌμ΄μ μΌλ‘ μ΄λ»κ² λ³νλλμ§ μ€λͺ ν΄ λ³΄κ² μ΅λλ€:
1. μ μμκ±°λ λ° μ ν μΉ΄νλ‘κ·Έ
- μλ리μ€: λΆλ―Έ, μ λ½, μμμ μ μμ κ³ κ°μκ² λ νΉν μ₯μΈ μ νμ νλ§€νλ μ¨λΌμΈ λΆν°ν¬.
- JAMstack ꡬν:
- μ μ μ¬μ΄νΈ: μ ν νμ΄μ§ λ° μΉ΄ν κ³ λ¦¬ λͺ©λ‘μ ν€λλ¦¬μ€ CMS(μ: Contentful, Shopify Storefront API)μμ μ¬μ λ λλ§λ©λλ€.
- λμ κΈ°λ₯:
- μ€μκ° μ¬κ³ : ν΄λΌμ΄μΈνΈμ¬μ΄λ JavaScriptκ° μλ²λ¦¬μ€ ν¨μ(λ§μ΄ν¬λ‘μλΉμ€ λλ λ°μ΄ν°λ² μ΄μ€ 쿼리)μμ μ€μκ° μ¬κ³ μμ€μ κ°μ Έμ "μ¬κ³ μμ" λ©μμ§λ₯Ό μ λ°μ΄νΈνκ³ κ³Όλ§€λ₯Ό λ°©μ§ν©λλ€.
- κ°μΈνλ μΆμ²: μ¬μ©μ λΈλΌμ°μ§ κΈ°λ‘(λ‘컬 μ€ν λ¦¬μ§ λλ μλ²λ¦¬μ€ λ°μ΄ν°λ² μ΄μ€μ μ μ₯)μ κΈ°λ°μΌλ‘ μλ²λ¦¬μ€ ν¨μκ° CMS APIμμ κ΄λ ¨ μ νμ μ μν©λλ€.
- μμ ν κ²°μ : ν΄λΌμ΄μΈνΈμ¬μ΄λ JavaScript λ° μμ ν μλ²λ¦¬μ€ ν¨μλ₯Ό ν΅ν΄ Stripeκ³Ό κ°μ κ²°μ κ²μ΄νΈμ¨μ΄μ ν΅ν©νμ¬ κ²°μ λ₯Ό μ²λ¦¬νκ³ , ν΅ν λ³νμ μ²λ¦¬νλ©°, μ£Όλ¬Έ μνλ₯Ό μ λ°μ΄νΈν©λλ€.
- μ¬μ©μ κ³μ : μ¬μ©μ λ‘κ·ΈμΈμ μν Auth0 λλ Firebase Authλ₯Ό μ¬μ©νμ¬ κ³ κ°μ΄ κ³Όκ±° μ£Όλ¬Έμ λ³΄κ³ , μ£Όμλ₯Ό κ΄λ¦¬νλ©°, μ¦κ²¨μ°ΎκΈ°λ₯Ό μ μ₯ν μ μλλ‘ ν©λλ€.
2. μΈν°λν°λΈ ν¬νΈν΄λ¦¬μ€ λ° λ―Έλμ΄ μ¬μ΄νΈ
- μλ리μ€: κ³ ν΄μλ μ΄λ―Έμ§μ λΉλμ€λ₯Ό μ μνκ³ , λ¬Έμ μμκ³Ό λμ κ°€λ¬λ¦¬λ₯Ό κ°μΆ μ¬μ§ μκ°.
- JAMstack ꡬν:
- μ μ μ¬μ΄νΈ: λͺ¨λ μ΄λ―Έμ§ κ°€λ¬λ¦¬, νλ‘μ νΈ νμ΄μ§, λΈλ‘κ·Έ κ²μλ¬Όμ΄ μ΅μ νλκ³ μ¬μ λ λλ§λ©λλ€.
- λμ κΈ°λ₯:
- λ¬Έμ μμ: Netlify Forms, Formspree λλ λ§μΆ€ν μλ²λ¦¬μ€ ν¨μ μλν¬μΈνΈλ₯Ό μ¬μ©νμ¬ λ©μμ§λ₯Ό μμ νκ³ , μ λ ₯μ κ²μ¦νλ©°, μλ¦Όμ 보λ λλ€.
- λμ μ΄λ―Έμ§ λ‘λ©: κ³ ν΄μλ μ΄λ―Έμ§μ μ§μ° λ‘λ©, ν΄λΌμ΄μΈνΈμ¬μ΄λ JavaScriptκ° μ₯μΉ λ° λ€νΈμν¬ μ‘°κ±΄μ λ°λΌ λ€λ₯Έ ν΄μλλ₯Ό κ°μ Έμ΅λλ€(μ: Cloudinary API μ¬μ©).
- μ¬μ©μ λκΈ: Disqus, Hyvor Talk λλ λ§μΆ€ν μλ²λ¦¬μ€ λκΈ μμ€ν (μ μ₯μ μν΄ FaunaDB μ¬μ©)κ³Ό ν΅ν©.
- μμ λ―Έλμ΄ νΌλ: Instagram, Twitter λλ YouTube APIμμ μ΅μ κ²μλ¬Όμ ν΄λΌμ΄μΈνΈ μ¬μ΄λμμ κ°μ Έμ λμ μΌλ‘ ν¬ν¨μν΅λλ€.
3. μ΄λ²€νΈ λ±λ‘ λ° ν°μΌν νλ«νΌ
- μλ리μ€: λ€μν λμμμ κ°μ΅λλ μ΄λ²€νΈμ λ±λ‘μ κ΄λ¦¬νλ κΈλ‘λ² μ»¨νΌλ°μ€ μ£Όμ΅μ.
- JAMstack ꡬν:
- μ μ μ¬μ΄νΈ: μ΄λ²€νΈ μΌμ , μ°μ¬ μκ°, μ₯μ μ λ³΄κ° μ¬μ λ λλ§λ©λλ€.
- λμ κΈ°λ₯:
- μ€μκ° μ’μ κ°μ©μ±: ν΄λΌμ΄μΈνΈμ¬μ΄λ JavaScriptκ° μΈλΆ ν°μΌν API λλ λ°μ΄ν°λ² μ΄μ€λ₯Ό 쿼리νλ μλ²λ¦¬μ€ ν¨μλ₯Ό νΈμΆνμ¬ λ¨μ ν°μΌ μλ₯Ό νμν©λλ€.
- λ±λ‘ λ° κ²°μ : κ²°μ κ²μ΄νΈμ¨μ΄(μ: PayPal, Stripe)μ ν΅ν©λκ³ μμ ν λ°μ΄ν°λ² μ΄μ€μμ μ°Έμμ λͺ©λ‘μ μ λ°μ΄νΈνλ μλ²λ¦¬μ€ ν¨μμ μμμ μ μΆν©λλ€.
- κ°μΈνλ λμ보λ: μΈμ¦λ μ¬μ©μ(Auth0/Clerkλ₯Ό ν΅ν΄)λ ν°μΌμ λ³΄κ³ , μΌμ μ κ΄λ¦¬νλ©°, μ΄λ²€νΈ μλ£μ μ‘μΈμ€ν μ μμ΅λλ€.
- μ€μκ° μ λ°μ΄νΈ: μλ²λ¦¬μ€ ν¨μλ μΌμ λ³κ²½μ΄λ κ³΅μ§ μ¬νμ λν μ€μκ° μλ¦Όμ νΈμν μ μμ΅λλ€.
4. κ΅μ‘ νλ«νΌ λ° ν΄μ¦
- μλ리μ€: μΈν°λν°λΈ κ°μ’μ ν΄μ¦λ₯Ό μ 곡νλ μ¨λΌμΈ νμ΅ νλ«νΌ.
- JAMstack ꡬν:
- μ μ μ¬μ΄νΈ: κ°μ’ κ°μ, μμ λ΄μ©, μκ° νμ΄μ§κ° μ¬μ λ λλ§λ©λλ€.
- λμ κΈ°λ₯:
- μΈν°λν°λΈ ν΄μ¦: ν΄λΌμ΄μΈνΈμ¬μ΄λ JavaScriptκ° μ§λ¬Έμ λ λλ§νκ³ , μ¬μ©μ λ΅λ³μ μμ§νμ¬ μ±μ λ° μμμ±μ μν΄ μλ²λ¦¬μ€ ν¨μ(μ: Supabase λλ Firebase)λ‘ λ³΄λ λλ€.
- μ§ν μν© μΆμ : μ¬μ©μ μ§ν μν©, μλ£λ μμ , ν΄μ¦ μ μλ₯Ό Auth0μ μλ²λ¦¬μ€ λ°μ΄ν°λ² μ΄μ€λ₯Ό ν΅ν΄ μμ νκ² μ μ₯νκ³ μ¬μ©μ λμ보λμ λμ μΌλ‘ νμν©λλ€.
- κ°μ’ λ±λ‘: μλ²λ¦¬μ€ ν¨μκ° λ±λ‘ λ‘μ§μ μ²λ¦¬νκ³ κ²°μ μμ€ν κ³Ό ν΅ν©λ©λλ€.
λμ JAMstack ꡬν: μ£Όμ κ³ λ € μ¬ν
λμ JAMstack μ ν리μΌμ΄μ μ μ±κ³΅μ μΌλ‘ ꡬμΆνλ €λ©΄ λ€μκ³Ό κ°μ μ λ΅μ μ¬νμ κ³ λ €νμμμ€:
1. μ¬λ°λ₯Έ μ μ μ¬μ΄νΈ μμ±κΈ°(SSG) μ ν
SSG μ νμ κ°λ° κ²½νκ³Ό μλμ ν° μν₯μ λ―ΈμΉ©λλ€:
- Next.js & Nuxt.js: κ°κ° React/Vue κ°λ°μμκ² νμνλ©°, μλ²μ¬μ΄λ λ λλ§(SSR), μ μ μ¬μ΄νΈ μμ±(SSG), API λΌμ°νΈ(λ΄μ₯ μλ²λ¦¬μ€ ν¨μ)μ κ°μ κ°λ ₯ν κΈ°λ₯μ μ 곡ν©λλ€. μ μ λ° λμ λ λλ§ μ λ΅μ΄ λͺ¨λ νμν 볡μ‘ν μ ν리μΌμ΄μ μ μ΄μμ μ λλ€.
- Gatsby: λ°μ΄ν° μμ€μ ꡬμ λ°μ§ μλ κ²μ μ€μ μ λ React κΈ°λ° SSGλ‘, λΉλ μ κ±°μ λͺ¨λ κ³³(API, νμΌ, λ°μ΄ν°λ² μ΄μ€)μμ λ°μ΄ν°λ₯Ό κ°μ Έμ¬ μ μμ΅λλ€. μ½ν μΈ κ° λ§μ μ¬μ΄νΈμ μ ν©ν©λλ€.
- Hugo & Eleventy: μ μ μ°μ μ¬μ΄νΈλ₯Ό μν λ κ°λ¨νκ³ λΉ λ₯Έ SSGλ‘, 볡μ‘ν λμ κΈ°λ₯μ λν΄μλ μλ ν΅ν©μ΄ λ νμνμ§λ§ μμ²λ μ±λ₯μ μ 곡ν©λλ€.
- Astro & SvelteKit: UI νλ μμν¬μ μ μ°μ±κ³Ό κ°λ ₯ν μ±λ₯μ μ 곡νλ νλμ μΈ μ νμ§μ λλ€.
νμ κΈ°μ‘΄ κΈ°μ , λμ μꡬμ 볡μ‘μ±, λΉλ μλμ μ€μμ±μ κ³ λ €νμμμ€.
2. ν€λλ¦¬μ€ CMS μ ν
μ½ν μΈ μ€μ¬μ λμ μ¬μ΄νΈμλ ν€λλ¦¬μ€ CMSκ° λ§€μ° μ€μν©λλ€:
- κ΄λ¦¬ν μλΉμ€ (SaaS): Contentful, Prismic, DatoCMS, Sanity.io. κ°λ ₯ν API, μμ°μ μν κΈλ‘λ² CDN, μ’ μ’ λλν λ¬΄λ£ λ±κΈμ μ 곡ν©λλ€. λΉ λ₯Έ μ€μ κ³Ό μ΅μνμ μ μ§ κ΄λ¦¬μ κ°μ₯ μ ν©ν©λλ€.
- μ체 νΈμ€ν (μ€ν μμ€): Strapi, Ghost. λ°μ΄ν° λ° μΈνλΌμ λν μμ ν μ μ΄λ₯Ό μ 곡νλ©°, νΉμ κ·μ μ€μ λλ μ¬μ©μ μ μ μꡬ μ¬νμ΄ μλ νμ μ ν©ν©λλ€.
- Git κΈ°λ° CMS: Netlify CMS, Forestry.io. Git μ μ₯μμ μ½ν μΈ λ₯Ό μ μ₯νλ―λ‘ Git μν¬νλ‘μ°μ μ΅μν κ°λ°μμκ² λ§€λ ₯μ μ λλ€.
μΉν (μ½ν μΈ λ³κ²½ μ μ¬μ΄νΈ 리λΉλ νΈλ¦¬κ±°), μμ° κ΄λ¦¬, κ°λ ₯ν APIμ κ°μ κΈ°λ₯μ μ°Ύμ보μμμ€.
3. μλ²λ¦¬μ€ ν¨μμ μ λ΅μ μ¬μ©
- μΈλΆν: μκ³ λ¨μΌ λͺ©μ μ ν¨μλ₯Ό μ€κ³νμμμ€. μ΄λ μ μ§ κ΄λ¦¬μ±κ³Ό νμ₯μ±μ ν₯μμν΅λλ€.
- 보μ: λ―Όκ°ν API ν€λ μ격 μ¦λͺ μ ν΄λΌμ΄μΈνΈμ¬μ΄λ μ½λμ μ§μ λ ΈμΆνμ§ λ§μμμ€. μλ²λ¦¬μ€ ν¨μλ₯Ό νμ¬ APIμ μνΈ μμ©νλ μμ ν νλ‘μλ‘ μ¬μ©νμμμ€.
- μ€λ₯ μ²λ¦¬: ν¨μ λ΄μ κ²¬κ³ ν μ€λ₯ μ²λ¦¬ λ° λ‘κΉ μ ꡬννμμμ€.
- μ½λ μ€ννΈ: μ μ¬μ μΈ "μ½λ μ€ννΈ" μ§μ°(μ ν΄ μνμ ν¨μκ° μ²μ νΈμΆλ λ λ μ€λ 걸릴 μ μμ)μ μ μνμμμ€. μ€μν μ¬μ©μ κ²½λ‘μ κ²½μ° μ΅μ ννκ±°λ "μμ " μ λ΅μ μ¬μ©νλ κ²μ κ³ λ €νμμμ€.
- μ£μ§ ν¨μ: κ°μΈν, A/B ν μ€νΈ λλ μ§μλ³ μ½ν μΈ λΌμ°ν μ μ΄μμ μΈ, μ μΈκ³ μ¬μ©μμκ² λ κ°κΉμ΄ μ΄μ μ§μ° μ€νμ μν΄ μ£μ§ ν¨μ(μ: Cloudflare Workers, Vercel Edge Functions)λ₯Ό νμ©νμμμ€.
4. ν΄λΌμ΄μΈνΈμ¬μ΄λ λ°μ΄ν° κ΄λ¦¬ λ° μν
μνΈμμ©μ΄ λ§μ λμ κΈ°λ₯μ κ²½μ° ν¨μ¨μ μΈ ν΄λΌμ΄μΈνΈμ¬μ΄λ λ°μ΄ν° κ΄λ¦¬κ° μ€μν©λλ€:
- λ°μ΄ν° κ°μ Έμ€κΈ° λΌμ΄λΈλ¬λ¦¬: React Query, SWR, Apollo Client (GraphQLμ©)λ λ°μ΄ν° κ°μ Έμ€κΈ°, μΊμ±, μ¬κ²μ¦μ λ¨μνν©λλ€.
- μν κ΄λ¦¬: Redux, Zustand, Vuex, Pinia λλ Reactμ Context APIλ λμ μνΈμμ©μΌλ‘ μΈν΄ λ°μνλ 볡μ‘ν μ ν리μΌμ΄μ μνλ₯Ό κ΄λ¦¬νλ λ° λμμ΄ λ©λλ€.
- λ‘λ© μν λ° μ€λ₯ μ²λ¦¬: λ°μ΄ν° κ°μ Έμ€κΈ° μ€ λ° μ€λ₯ λ°μ μ μ¬μ©μμκ² λͺ νν μκ°μ νΌλλ°±μ μ 곡νμμμ€.
κΈλ‘λ² κ΅¬νμ μν κ³Όμ λ° κ³ λ € μ¬ν
JAMstackμ μμ²λ μ΄μ μ μ 곡νμ§λ§, κΈλ‘λ² κ΅¬νμλ λ€μκ³Ό κ°μ νΉμ κ³ λ € μ¬νλ λ°λ¦ λλ€:
- λ°μ΄ν° μμ£Ό λ° κ·μ μ€μ: μ¬μ©μ λ°μ΄ν°λ₯Ό μ μ₯νλ κ²½μ° GDPR(μ λ½), CCPA(μΊλ¦¬ν¬λμ) λλ μ μ¬ν νμ§ λ²λ₯ κ³Ό κ°μ κ·μ μ μ λ νμμμ€. μ§μλ³ λ°°ν¬ μ΅μ μ΄ μλ μλ²λ¦¬μ€ ν¨μ λ° λ°μ΄ν°λ² μ΄μ€λ₯Ό μ ννμμμ€.
- κ΅μ ν(i18n) λ° νμ§ν(l10n): μ¬λ¬ μΈμ΄λ₯Ό μ§μνλ ν€λλ¦¬μ€ CMSλ₯Ό ν΅ν΄ μ½ν μΈ λ₯Ό λμ μΌλ‘ κ΄λ¦¬ν μ μμ§λ§, ν΄λΌμ΄μΈνΈμ¬μ΄λ λμ λ¬Έμμ΄ λ° λ μ§/ν΅ν νμλ μ μ€νκ² μ²λ¦¬ν΄μΌ ν©λλ€. SSGμλ μ’ μ’ i18n νλ¬κ·ΈμΈμ΄ μμ΅λλ€.
- λ§€μ° ν° μ¬μ΄νΈμ λΉλ μκ°: μμλ§ λλ μλ°±λ§ νμ΄μ§κ° μλ μ¬μ΄νΈμ κ²½μ° λΉλ μκ°μ΄ μλΉν κΈΈμ΄μ§ μ μμ΅λλ€. Next.jsμ κ°μ νλ μμν¬μμ μ 곡νλ μ μ§μ μ μ μ¬μμ±(ISR) λλ λΆμ° μꡬ λ λλ§(DPR)μ λ³κ²½λ νμ΄μ§λ§ λλ νμ μ λΉλ/리λΉλνμ¬ μ΄λ₯Ό μνν μ μμ΅λλ€.
- λ²€λ μ’ μμ±: νΉμ νμ¬ API λλ μλ²λ¦¬μ€ μ 곡μ 체μ ν¬κ² μμ‘΄νλ©΄ μ’ μμ±μ΄ μκΈΈ μ μμ΅λλ€. ν₯ν μ μ°μ±μ μν΄ μν€ν μ²λ₯Ό κ°λ₯ν ν λΆλ¦¬λλλ‘ μ€κ³νμμμ€.
- API μλ μ ν: νμ¬ APIμμ λΆκ³Όνλ μλ μ νμ μ μνμμμ€. μΊμ± μ λ΅μ ꡬννκ³ μλ²λ¦¬μ€ ν¨μμμ μμ²μ λΆμ°νλ κ²μ κ³ λ €νμμμ€.
- μ€νλΌμΈ κΈ°λ₯: λͺ¨λ°μΌ μ°μ κΈλ‘λ² μ¬μ©μλ₯Ό μν΄ μλΉμ€ μ컀λ₯Ό μΆκ°νμ¬ μ¬μ΄νΈμ μ€μν λΆλΆμ μ€νλΌμΈ μ‘μΈμ€λ₯Ό μ 곡νκ³ νλ‘κ·Έλ μλΈ μΉ μ±(PWA)μΌλ‘ λ§λλ κ²μ κ³ λ €νμμμ€.
λ―Έλλ κ΅¬μ± κ°λ₯νκ³ λμ μ λλ€
μ μ μ λ¬μ λμ κΈ°λ₯μ λν JAMstack μ κ·Ό λ°©μμ μΉ κ΅¬μΆ λ°©μμ κ·Όλ³Έμ μΈ λ³νλ₯Ό λνλ λλ€. μ£μ§ μ»΄ν¨ν μ΄ μ±μν΄μ Έ μ°μ°μ μ¬μ©μμ λμ± κ°κΉκ² λ§λ€κ³ , μλ²λ¦¬μ€ ν¨μκ° λμ± κ°λ ₯νκ³ λ³΄νΈνλ¨μ λ°λΌ "μ μ "κ³Ό "λμ "μ ꡬλΆμ κ³μν΄μ λͺ¨νΈν΄μ§ κ²μ λλ€.
μ°λ¦¬λ κ°λ°μκ° μ΅κ³ μ μλΉμ€λ₯Ό μ‘°μ¨νμ¬ λ―Ώμ μ μμ λ§νΌ νλΆνκ³ κ°μΈνλλ©° μ±λ₯μ΄ λ°μ΄λ κ²½νμ μ 곡νλ κ΅¬μ± κ°λ₯ν μΉμΌλ‘ λμκ°κ³ μμ΅λλ€. μ μΈκ³ νλ‘ νΈμλ κ°λ°μμκ² μ μ μ¬μ΄νΈλ₯Ό λμ κΈ°λ₯μΌλ‘ ν₯μμν€λ κΈ°μ μ λ§μ€ν°νλ κ²μ λ¨μν νΈλ λκ° μλλΌ, μ°¨μΈλ 볡μλ ₯ μκ³ νμ₯ κ°λ₯νλ©° μ¬μ©μ μ€μ¬μ μΈ μΉ μ ν리μΌμ΄μ μ ꡬμΆνκΈ° μν νμ κΈ°μ μ λλ€.
λ€μ νλ‘μ νΈλ₯Ό μν μ€ν κ°λ₯ν μΈμ¬μ΄νΈ
- κ°λ¨νκ² μμνκΈ°: μν¬νλ‘μ°λ₯Ό νμ νκΈ° μν΄ Netlify Functions λλ Formspreeλ₯Ό μ¬μ©ν λ¬Έμ μμκ³Ό κ°μ κΈ°λ³Έμ μΈ λμ κΈ°λ₯μ ν΅ν©νλ κ²λΆν° μμνμμμ€.
- ν€λλ¦¬μ€ CMS νμ©: νλ‘μ νΈμ μ½ν μΈ κ° ν¬ν¨λ κ²½μ°, λμ μ½ν μΈ λ₯Ό ν¨κ³Όμ μΌλ‘ κ΄λ¦¬νκΈ° μν΄ ν€λλ¦¬μ€ CMS μ΅μ μ νμνμμμ€.
- μλ²λ¦¬μ€ μ€ν: κ°λ¨ν μλ²λ¦¬μ€ ν¨μ(μ: λμ λ°μ΄ν°λ₯Ό λ°ννλ API μλν¬μΈνΈ)λ₯Ό λ°°ν¬νμ¬ κ·Έ κ°λ ₯ν¨κ³Ό ν΅ν©μ μ΄ν΄νμμμ€.
- SSGλ₯Ό νλͺ νκ² μ ννκΈ°: νμ μ λ¬Έ μ§μκ³Ό νλ‘μ νΈμ μ₯κΈ°μ μΈ λμ μꡬ μ¬νμ λ§λ μ μ μ¬μ΄νΈ μμ±κΈ°λ₯Ό μ ννμμμ€.
- μ±λ₯ μ°μ μ: νΉν λμ μμλ₯Ό λμ ν λ νμ μΈ‘μ νκ³ μ΅μ ννμμμ€. Lighthouseμ κ°μ λκ΅¬κ° λμμ΄ λ μ μμ΅λλ€.
- 보μ μ°μ : νμ API ν€μ λ―Όκ°ν λ°μ΄ν°λ₯Ό κ·Ήλμ μ£Όμλ₯Ό κΈ°μΈμ¬ λ€λ£¨κ³ , νκ²½ λ³μμ μλ²λ¦¬μ€ ν¨μλ₯Ό μμ ν νλ‘μλ‘ μ¬μ©νμμμ€.
JAMstackμ λμ ν₯μ κΈ°λ₯μ νμ λ°μλ€μ¬, μ±λ₯μ΄ λ°μ΄λκ³ μμ ν λΏλ§ μλλΌ λͺ¨λ μ¬μ©μμκ² μ΄λμλ λλλλ‘ λ€μ¬λ€λ₯νκ³ λ§€λ ₯μ μΈ μΉ κ²½νμ ꡬμΆνμμμ€.