Jamstack: 장점, 단점, 역사 등
Jamstack 운동은 계속해서 진화하고 인기를 얻고 있습니다. 그리고 아직도 모든 것에 대해 확신이 서지 않는다면, 이 현대적인 웹 개발 접근 방식에 대해 알아야 할 모든 것이 여기에 있습니다.
By남디 오케케
Jamstack은 웹사이트와 앱을 구축하는 현대적인 방법입니다. 전통적인 웹사이트보다 전반적으로 더 나은 성능을 제공하기 때문입니다. 다른 장점과 비용 절감 외에도.
목표는 먼저 정적 HTM 웹사이트를 로드한 다음 사이트와 사용자 경험을 점진적으로 향상시키는 것입니다. 이를 통해 초고속 로딩 페이지가 생성되고 나중에 필요에 따라 이미지와 기타 동적 콘텐츠를 로드할 수 있습니다.
Jamstack은 사이트 소유자와 방문자 모두에게 이점을 제공하는 실용적인 웹 개발 접근 방식입니다. 하지만 놀라운 개발이기는 하지만 모든 유형의 웹사이트에 완벽하지는 않습니다.
이 게시물에서는 Jamstack 혁신의 역사와 다양한 기능을 살펴보고, 이것이 여러분과 여러분의 비즈니스에 무엇을 할 수 있는지 알아보겠습니다.
Jamstack의 간략한 역사
웹 서버는 원래 1980년대부터 정적 페이지를 제공했으나, 2000년대 초반에 서버 측 스크립팅이 인기를 얻고 동적 웹사이트가 사실상 웹 개발 표준이 되었습니다.
그러나 인터넷이 성장함에 따라 비용을 절감하고 더 많은 방문자에게 다가가기 위해 최적화가 필요해졌습니다. 이는 웹사이트 캐싱, 콘텐츠 전달 네트워크 및 미디어 최적화의 사용으로 이어졌습니다.
이 모든 것 외에도 개인용 컴퓨터는 더욱 강력해졌고, 점점 더 많은 작업 부하가 JavaScript 실행을 위해 프런트엔드로 옮겨졌습니다. 이로 인해 다음과 같은 많은 새로운 기술이 개발되었습니다. jQuery를그리고 나중에는 Angular, React JS, Vue 및 기타 JavaScript 라이브러리로 확장되었습니다.
Jamstack의 3가지 기둥
Jamstack은 세 가지 서로 다르지만 상호 보완적인 기술 덕분에 진화할 수 있었으며, 이 기술 없이는 불가능했을 것입니다. 이러한 기술은 JavaScript, Markup 및 API입니다. 이들은 3개의 이니셜을 형성합니다. JAM Jamstack에서; J JavaScript의 경우, A API의 경우 및 M 마크업을 위해.
이제 각 기술을 자세히 살펴보고 Jamstack 생태계에 어떤 이점을 가져다주는지 알아보겠습니다.
- JavaScript – JavaScript는 클라이언트 측 해석 스크립팅 언어이지만, Node.js와 같은 프레임워크는 이제 이 엔진을 서버 측 스크립팅에도 사용할 수 있게 했습니다. 클라이언트 측이라는 것은 웹사이트에 작성한 JavaScript 코드가 웹 방문자의 브라우저에 페이지가 로드된 후에 실행된다는 것을 의미합니다.
해석 언어라는 것은 코드가 웹 페이지에 '있는 그대로' 제공되며 C 및 C++와 같은 언어와 같이 미리 컴파일되지 않는다는 것을 의미합니다. 모든 인기 있는 브라우저는 JavaScript 언어를 지원하지만 과거에는 해석에 차이가 있었습니다. 이것이 모든 문제를 해결하기 위해 jQuery와 같은 프레임워크가 개발된 상황이었습니다.
오늘날 많은 현대적 프레임워크 덕분에 JavaScript로 놀라운 일을 하는 것이 훨씬 쉬워졌고, 처음에 필요했던 시간과 번거로움도 덜 들었습니다. Next.js와 Vue와 같은 일부 프레임워크에는 JavaScript로 UI 개발을 쉽게 만드는 기능이 포함되어 있습니다. 그리고 이는 Jamstack 혁명에 엄청나게 기여했습니다. - API – API 또는 애플리케이션 프로그래밍 인터페이스는 Jamstack 생태계의 이 3가지 기둥 중 가장 새로운 것입니다. 프로그래머의 삶을 더 쉽게 만들기 위해 인터넷에서 성장한 기술적 개발입니다.
API를 사용하면 해당 리소스의 웹 주소나 URL을 사용하고 지정된 프로토콜을 고수하기만 하면 다양한 웹 리소스에서 쿼리하고 정보를 얻을 수 있습니다. 기존 브라우저를 사용하지 않고도 웹사이트와 상호 작용하는 수단으로 시작되었지만 진화했습니다.
오늘날 API는 Firebase 서비스와 같은 데이터 뱅킹, 날씨 서비스, 금융 서비스, 예약, 범죄 데이터, 항공편 데이터, 텍스트 음성 변환 서비스, 환율 변환 등 다양한 서비스를 제공합니다.
이 API 개발을 통해 기존 데이터베이스 종속 웹사이트를 API 소스에서 정보를 얻을 수 있는 분리된 시스템으로 쉽게 대체할 수 있습니다. Jamstack 사이트는 정적 파일 컴파일 실행 중에 API 데이터를 로드할 수 있습니다. 또는 간단한 HTML 사이트를 로드하고 JavaScript를 사용하여 필요할 때 필요한 리소스를 로드할 수 있습니다.
또한 API는 공개 또는 외부가 아니어야 한다는 점에 유의해야 합니다. 원하는 서비스를 사용하거나 사이트에 맞는 서비스를 만들 수 있습니다. 서버리스 함수는 Jamstack 사이트의 API 소스로도 인기를 얻고 있습니다. 그리고 그럴 만한 이유가 있는데, 아래에서 보실 수 있습니다. - 마크 업 – 마크업 언어는 태그를 사용하여 문서의 요소를 정의하는 모든 컴퓨터 규칙입니다. 가장 인기 있는 마크업 언어는 HyperText Markup Language 또는 HTML로, 대부분의 웹을 실행합니다.
Jamstack에서 마크업의 목적은 웹 페이지나 앱의 레이아웃을 정의하는 것입니다. 즉, 상자, 텍스트 영역, 그림, 헤더 등을 포함하여 올바른 위치에 항목을 배치하는 것을 의미합니다. 스크립팅이 없는 이러한 페이지를 정적 사이트라고 합니다.
하지만 Jamstack 웹사이트를 HTML로 직접 코딩하거나 정적 사이트 생성기와 같은 다른 언어와 플랫폼을 사용할 수 있습니다. 이러한 정적 사이트 생성기 중 다수는 HTML과 마크다운 언어를 허용합니다.
정적 사이트 대 동적 사이트
웹사이트 로딩 속도는 좋은 사용자 경험을 위해 중요하므로 다음과 같은 사항이 포함됩니다. Google의 핵심 웹 바이탈, 검색 결과의 순위 요소입니다. Jamstack 방식은 정적 사이트를 가능한 한 빨리 로드한 다음 필요에 따라 추가 기능을 추가하는 것이며, 종종 JavaScript와 API를 사용합니다.
정적 사이트를 호스팅한다는 것은 또한 서버가 덜 일한다는 것을 의미합니다. 그리고 절약되는 부분이 너무 많아서 다음과 같은 서비스가 Netlify는 무료 정적 사이트 호스팅을 제공합니다. 정적 사이트는 동적 사이트보다 만들고 배포하기가 더 쉽습니다.
그러나 동적 웹사이트는 편집의 용이성, 더 많은 기능, 사용자 프로필 및 계정과 같은 기능과 같은 특정 이점도 있습니다. 이는 동적 사이트를 보다 복잡한 프로젝트에 더 적합하게 만듭니다. 적어도 지금은 그렇습니다.
Jamstack 사이트의 이점
Jamstack 웹사이트는 기존 웹사이트에 비해 많은 장점을 제공합니다. 그리고 이러한 장점은 점점 더 인기를 얻는 데 기여합니다. 둘째, 이러한 장점의 대부분은 현대 웹 개발 관행과 일치합니다. 그리고 이는 Jamstack을 웹사이트와 앱을 개발하는 현대적인 방법으로 만듭니다.
Jamstack 원칙을 적용하면 기대할 수 있는 이점은 다음과 같습니다.
- 빠른 로딩 속도 – 정적 웹 페이지는 동적 웹사이트보다 더 빨리 로드됩니다. 왜냐하면 서버가 해야 할 일은 정적 파일을 제공하는 것뿐이기 때문입니다. 반면 동적 사이트는 먼저 서버 측 스크립트를 구문 분석해야 합니다. 그런 다음 이를 실행하고, 레코드를 위해 데이터베이스를 호출하고, 최종 HTML 파일을 클라이언트에 전달하기 전에 다른 환경 변수를 확인해야 합니다.
- 낮은 리소스 사용량 – 정적 페이지를 한 번만 생성하여 나중에 제공할 수 있습니다. 또는 필요에 따라 매일, 매시간 또는 매분 페이지를 다시 생성할 수 있습니다. 동적 사이트보다 리소스를 덜 사용하게 됩니다. 이는 비용도 낮다는 것을 의미합니다.
- 더 나은 보안 – Jamstack 아키텍처는 동적 웹사이트보다 악의적인 행위자에게 더 작은 공격 표면을 제공합니다. 모든 API 호출이 컴파일 실행 중에 이루어지면 더욱 좋으며, 웹 방문자는 어떤 웹 서비스와 프로토콜이 사용 중인지 전혀 알 수 없습니다.
- 손쉬운 확장 성 – 정적 웹사이트는 동적 사이트보다 훨씬 적은 리소스를 사용하기 때문에 확장하기 쉽습니다. 게다가 데이터 뱅킹 및 기타 리소스 관리 문제는 거의 없거나 전혀 없습니다.
- 손쉬운 유지 관리 – 유지 관리해야 할 인프라가 없고, 데이터베이스 관리 루틴이 없고, 보안 패치가 없습니다.
- 유연성 – 리소스를 쉽게 추가하고 제거할 수 있습니다. JavaScript와 HTML을 제외하고는 특정 데이터베이스나 스크립팅 언어에 의존하지 않습니다. 한 줄만 변경하면 다른 API에 연결됩니다.
Jamstack 사이트의 단점
Jamstack 사이트에도 문제가 있는데, 그중 가장 주목할 만한 문제를 소개합니다.
- 아직 성숙한 기술은 아닙니다.
- 동적 기능이 필요한 경우 문제가 발생할 수 있습니다.
- API 종속성은 문제가 될 수 있지만 발생하는 경우는 드뭅니다.
Jamstack 및 서버리스 기능
Jamstack 사이트는 정적 웹 페이지를 사용하지만 완전히 정적인 것은 아닙니다. API와 서버리스 함수를 사용하여 사이트에 동적 데이터를 추가할 수 있기 때문입니다.
Google 클라우드 서버리스 함수, Netlify 함수, Firebase 데이터베이스 서비스와 같은 서비스를 사용하면 모든 Jamstack 사이트에 동적 데이터를 쉽게 추가할 수 있습니다.
GitHub 저장소 및 버전 제어
Netlify와 같은 Jamstack 호스트에서 정적 페이지를 직접 호스팅할 수 있습니다. 또는 GitHub와 같은 리포지토리에서 개발 파일을 호스팅하고 Netlify와 같은 호스트가 액세스하여 필요할 때마다 정적 페이지를 빌드하도록 할 수 있습니다.
소프트웨어 저장소는 코드를 호스팅할 장소를 제공하는 것 외에도 소프트웨어의 다양한 버전을 관리하기 쉽게 해줍니다. 따라서 현재 버전에서 문제가 발견되면 이전의 안정적인 버전으로 쉽게 롤백할 수 있습니다.
GitHub은 이 모든 것을 쉽게 만들어줍니다. 게다가 Netlify와 같은 선택한 Jamstack 호스트에 명시적 액세스 권한을 부여하여 업데이트를 할 때마다 새 데이터에 액세스하고 컴파일할 수 있습니다.
정적 사이트 생성기
정적 사이트 생성기 SSG는 기술에 익숙하지 않은 사람들도 동적 웹사이트를 최신 Jamstack 사이트로 전환할 수 있도록 해주는 훌륭한 도구입니다.
Eleventy나 11ty와 같은 일부 SSG는 미니멀리스트를 위해 디자인된 반면, Gatsby와 같은 다른 SSG는 원하는 모든 기능을 갖추고 있습니다. 이미지 처리, 모바일 친화적 사이트 레이아웃, 메뉴 생성기, 자동 페이징 등과 같은 기능을 제공할 수 있습니다.
인기 있는 Jamstack 사이트 생성기는 다음과 같습니다.
UI 중심 JavaScript 프레임워크
UI 중심 JavaScript 프레임워크의 진화는 Jamstack 진화에 큰 영향을 미쳤습니다. 물론 정적 사이트에서는 항상 vanilla JavaScript를 사용할 수 있지만 프레임워크를 사용하면 더 좋고 쉬워집니다.
가장 인기 있는 UI 중심 JavaScript 프레임워크는 다음과 같습니다.
Netlify & Jamstack 호스팅
모든 Jamstack 사이트에는 호스팅과 다음과 같은 서비스가 필요합니다. 네티 파이 무료로 제공합니다. Netlify는 Jamstack 운동에 오랫동안 참여해 왔으며 프리미엄 가격 모델을 제공합니다.
하지만 기존 호스팅 시나리오와 달리 무료 Jamstack 호스팅 서비스는 훌륭한 가치와 성능을 제공합니다. 예를 들어 Netlify의 무료 플랜에는 무제한 사이트, 풍부한 대시보드, CMS가 포함됩니다. 서버리스 기능, 제출된 양식 데이터를 자동으로 캡처합니다.
기타 무료 Jamstack 호스팅 서비스는 다음과 같습니다.
헤드리스 콘텐츠 관리 시스템
헤드리스 콘텐츠 관리 시스템 또는 CMS 개념은 Jamstack 생태계를 처음 접하는 사람들에게는 혼란스러울 수 있습니다. 하지만 헤드리스라는 것은 소프트웨어가 어떤 플랫폼에도 연결되어 있지 않다는 것을 의미합니다.
예를 들어 WordPress와 Drupal과 같은 플랫폼에는 플랫폼과 분리할 수 없는 콘텐츠 관리 시스템이 함께 제공됩니다. 즉, 해당 플랫폼에 게시하기 위해서만 해당 편집기를 사용할 수 있습니다.
헤드리스 시스템은 어떤 플랫폼에도 연결되지 않습니다. 오히려 API를 통해 여러 플랫폼에 연결되므로 매우 유연한 도구입니다.
Jamstack 사이트 관리자가 사용하는 가장 인기 있는 헤드리스 CMS 소프트웨어는 다음과 같습니다.
Jamstack 사이트를 구축하는 방법
Jamstack 사이트를 직접 만드는 것은 간단합니다. 방법은 다음과 같습니다.
- 1단계 – HTML과 CSS를 사용하여 웹사이트의 레이아웃을 디자인하세요.
- 2단계 – JavaScript를 사용하여 추가 기능을 추가합니다.
- 3단계 – API 기능과 요청을 추가합니다.
- 4단계 – HTML 서버에 파일을 업로드하세요.
하지만 위의 단계들은 아마도 괴짜들에게만 흥미로울 것입니다. 그래서, 다양한 개발자들이 마스터 코더가 되지 않고도 비코더가 액션에 참여할 수 있도록 돕는 다양한 도구를 내놓았습니다.
다른 더 쉬운 방법은 다음과 같습니다.
- 정적 사이트 생성기 – Gatsby와 같은 도구로, 기존 동적 웹사이트를 Jamstack 정적 사이트로 쉽게 전환할 수 있습니다. 다양한 기능이 있으며 일부는 WordPress와 같은 특정 플랫폼에 대한 특수 플러그인을 포함합니다.
- 디자인 도구 – 이들은 Stackbit 및 Builder.io와 같은 디자인 앱으로, 코딩 방법을 몰라도 최신 Jamstack 사이트를 쉽게 디자인할 수 있습니다. 간단히 디자인하고 배포하세요.
Jamstack 사이트를 구축하는 시기
Jamstack 아키텍처는 특정 유형의 웹사이트에는 적합하지 않을 수 있지만 다음 유형의 웹사이트에는 성공적으로 사용할 수 있습니다.
- 개인 사이트 – 당신이 누구인지 세상에 알리는 기본 사이트입니다.
- 회사 웹 사이트 – 주소, 제품, 서비스 등을 포함하는 기업 사이트.
- 방문 페이지 – 웹 방문자의 정보를 수집하기 위해 특별히 제작되었습니다.
- 전자상거래 상점 – 온라인으로 물건을 판매하는 다양한 유형의 사이트.
- 블로그 – 정기적인 업데이트를 위한 콘텐츠 사이트. SSG는 WordPress 사이트를 자동으로 변환합니다.
맺음말
Jamstack에 대한 이 게시물과 그것에 대해 알아야 할 모든 것을 마쳤습니다. 그리고 이제 여러분은 웹의 미래가 Jamstack 운동과 얽혀 있다는 것을 깨달았을 것입니다.
웹 개발에 익숙하지 않다면 Jamstack을 즉시 받아들여야 합니다. 그리고 노련한 구식 웹 개발자라면 뒤처지고 싶은지 스스로에게 물어보세요.
관련 기사
