JAMstack은 주로 JavaScript, API, 마크업(HTML/CSS)을 사용하여 빠르고 가벼운 웹 애플리케이션을 구축하는 방법입니다.
이 글을 읽은 후에 다음을 할 수 있습니다:
관련 콘텐츠
인터넷에서 가장 인기 있는 인사이트를 한 달에 한 번 정리하는 Cloudflare의 월간 요 약본 theNET를 구독하세요!
글 링크 복사
JAMstack은 프런트엔드 웹 개발(사용자가 상호 작용하는 콘텐츠 및 인터페이스의 구성)에 대한 접근 방식입니다. 개발자는 이를 통해 정적 웹 사이트를 빠르게 제작하고 사용자에게 효율적으로 제공할 수 있습니다.
JAMstack 웹 애플리케이션에서는 가능한 한 많은 HTML이 미리 구축되어 콘텐츠 전송 네트워크(CDN)에 저장됩니다.동적 콘텐츠를 생성하기 위해 서버 측에서 모놀리식 백엔드 애플리케이션을 실행하는 대신, 애플리케이션의 동적 구성 요소는 API를 기반으로 합니다.이에 따라 이상적으로는 사용자 경험이 훨씬 더 빨라지고 개발자 경험이 훨씬 더 단순해집니다.
JAM은 JavaScript, API, Markup을 나타냅니다.
Stack은 개발자가 애플리케이션과 웹 사이트를 구축할 수 있도록 이 모든 것을 결합한 것을 말합니다.
JAMstack 웹 사이트 또는 애플리케이션은 이 세 가지 요소만을 사용하여 구성됩니다. 사용자에게 표시되는 정적 웹 사이트는 HTML 및 CSS 마크업 코드로 구축됩니다. JavaScript는 필요한 동적 기능 및 API 호출에 사용됩니다. API는 애플리케이션의 백엔드를 제공합니다.
Bob이 유럽 축구 경기 결과를 업데이트하는 웹 애플리케이션을 구축한다고 가정해 보겠습니다. Bob은 자신이 운영하는 서버에서 실행되는 백엔드 애플리케이션을 만들어 최신 경기의 점수를 지속적으로 확인합니다. 사용자가 웹 애플리케이션을 열면 Bob의 서버는 해당 점수를 표시하는 HTML 페이지를 생성한 다음 사용자에게 해당 페이지를 전송합니다. 그러나 Bob의 웹 애플리케이션은 다소 느리므로 사용자가 해당 페이지를 보기 전에 백엔드 애플리케이션이 실행되고 HTML이 생성되어 장치에 도달할 때까지 기다려야 합니다.
이제 Bob이 JAMstack 접근 방식을 사용하여 웹 애플리케이션을 다시 구축한다고 가정해 보겠습니다. 그는 백엔드 애플리케이션 전체를 작성하는 대신 일련의 가벼운 HTML 페이지를 만들어 CDN에 저장합니다. 사용자가 애플리케이션을 열면 CDN은 Bob의 서버보다 사용자와 훨씬 더 가까운 곳에 있으므로 해당 HTML 페이지를 사용자에게 즉시 전송합니다. 또한 애플리케이션은 API 호출을 수행하여 해당 페이지에 실시간 축구 경기 점수를 입력합니다. 이제 Bob의 웹 애플리케이션은 사용자에게 매우 빠르게 로드되며, Bob의 입장에서는 점수를 업데이트하는 백엔드 서버 측 작업을 처리하기 위한 코드를 작성할 필요가 훨씬 줄어듭니다.
정적 웹 사이트는 누가 파일을 로드하든 브라우저에서 동일한 방식으로 로드되는 HTML 파일인 하나 이상의 정적 웹 페이지로 구성됩니다. 정적 웹 페이지는 브라우저에서 실행해야 하는 추가 코드 없이 HTML로만 구성되므로 매우 빠르게 로드할 수 있습니다. (HTML 코드가 어떤 모습으로 보이는지 확인하려면 Chrome 브라우저에서 웹 페이지를 마우스 오른쪽 버튼을 클릭하고 "페이지 원본 보기" 를 클릭하세요.)
반면 동적 웹 페이지는 로드될 때마다 달라집니다. 보다 인터랙티브하고 개인화된 사용자 경험을 제공하기 위해 동적 웹 페이지는 페이지를 여는 사용자, 페이지 로드 위치, 하루 중 시간 등 여러 가지 변화하는 데이터 입력에 따라 변경됩니다. 동적 웹 페이지가 로드되면 웹 페이지를 호스팅하는 웹 서버 또는 사용자 브라우저 내에서 코드가 실행되어야 합니다. 이처럼 실행되는 코드에 의존하면 사용자 환경이 느려질 수 있습니다.
동적 웹 페이지가 현대화된 사용자 경험을 만드는 유일한 방법은 아닙니다. 대부분 정적인 JAMstack 웹 사이트는 때때로 새로운 정적 콘텐츠를 생성하거나 API를 호출하여 업데이트된 콘텐츠를 작성함으로써 사용자에게 동적이고 개인화된 경험을 제공할 수 있습니다.
애플리케이션 개발에서 백엔드는 백그라운드의 서버에서 실행되는 코드입니다. 일반적으로 사용자는 웹 사이트나 애플리케이션을 사용하는 동안 백엔드에서 어떤 일이 일어나고 있는지 알지 못합니다. JavaScript와 마크업은 JAMstack 애플리케이션이 사용자에게 표시되는 방식을 결정하지만, 애플리케이션이 작동하려면 여전히 백엔드 기능이 필요합니다. JAMstack은 JavaScript를 사용하여 API를 호출해서 이를 처리합니다.
API를 사용하면 JAMstack 개발자가 자체 백엔드 애플리케이션을 구축할 필요가 없습니다. 이미 존재하는 API를 기반으로 웹 사이트와 앱을 구축할 수 있습니다.
개발자가 애플리케이션에 대한 자체 기능을 구축하고자 하는 경우 새 API를 만들 수 있습니다. API는 다양한 맥락에서 재사용할 수 있으므로 개발자가 백엔드용 자체 API를 구축할 때 해당 기능을 한 번만 구성하면 향후 애플리케이션에서 사용할 수 있습니다.
JAMstack 개발자는 API를 사용하면 백엔드에 대한 마이크로서비스 접근 방식을 선택할 수 있습니다. 마이크로서비스 아키텍처에서는 애플리케이션의 백엔드가 명령에 따라 실행되는 작은 조각으로 세분화되는데, 이는 JAMstack 애플리케이션이 필요할 때는 다양한 API를 호출하지만, 그렇지 않은 경우에는 백엔드 지원이 필요하지 않은 것과 마찬가지입니다.
또한 부분적으로 또는 전체적으로 서버리스 백엔드를 사용하는 JAMstack 애플리케이션을 구성할 수도 있습니다. 서버리스 기능은 필요에 따라 실행되는 재사용 가능한 작은 코드 조각입니다. 그러나 서버리스 아키텍처에서는 개발자가 API를 호출하는 대신 백엔드 애플리케이션을 직접 구축하므로(서버 프로비저닝에 대해 우려할 필요는 없지만) 개발자가 백엔드에 대해 보다 실무적인 접근 방식을 필요로 하는 경우가 많습니다.
개발자는 Cloudflare를 통해 Cloudflare 글로벌 CDN에서 직접 호스팅되는 애플리케이션을 구축할 수 있습니다.정적 웹 사이트 구축을 위한 당사의 플랫폼인 Cloudflare 페이지에 대해 자세히 알아보세요.또한 Gatsby 사이트, Hugo 사이트, React 애플리케이션 등을 Cloudflare Pages로 배포하는 방법에 대해 자세히 알아볼 수 있으며, 분석 회사 Redmonk의 Cloudflare Pages에 대한 동영상 개요를 시청할 수 있습니다.