Jamstack : 웹 개발을 뒤집는 정적 웹 사이트 혁명

Jamstack은 웹 개발 프로세스와 웹 페이지 다운로드 시간을 모두 단축하는 것을 목표로하는 점점 인기있는 웹 개발 철학입니다. DevOps 운동과 많은 조직에서 표준이되고있는 CI / CD (지속적 통합 / 지속적 전달) 기술을 바탕으로 Jamstack은 대화 형 웹 페이지를 구축하기위한 오랜 기술을 뒤집어로드 타임 코드 실행을 웹 서버 및 API (응용 프로그래밍 인터페이스)를 통해 액세스되는 브라우저 내 JavaScript 및 외부 서비스로.

Jamstack이 무엇인가요? Jamstack, 정의

Jamstack은 JavaScript, API마크 업 이라는 이름에 이니셜을 제공하는 세 가지 기둥을 기반으로하는 웹 애플리케이션 모델 입니다. Jamstack 사이트의 웹 페이지는 표준 마크 업 언어로 구성되어 있으므로 앱 서버 또는 Node.js와 같은 서버 측 기술에 의존하지 않고 어디서나 빌드하고 테스트 할 수 있습니다. 모든 대화 형 기능은 브라우저에서 실행되는 표준 JavaScript 코드에 의해 제공되며, HTTPS를 통해 재사용 가능한 API를 호출하여 외부 데이터 또는 웹 페이지 자체에 구축 할 수없는 기타 기능에 액세스합니다.

Jamstack 철학이 혁신적인 이유를 이해하려면 지난 15 년 동안 대부분의 개발자가 웹 개발에 대해 생각한 방식을 보여주는 LAMP 스택을 고려해보십시오. LAMP는 Linux (대부분의 웹 서버를 구동하는 OS), Apache (해당 Linux 시스템에서 실행되는 서버 소프트웨어), MySQL (웹 애플리케이션에 필요한 정보가 저장되는 데이터베이스) 및 PHP / Perl / Python ( 서버 측 코드가 작성되었습니다). 브라우저에서 LAMP 기반 웹 사이트를 가리키면 웹 서버는 웹 페이지를 즉시 생성하는 서버 측 코드를 실행하여 MySQL 데이터베이스에서 필요한 데이터를 그립니다.

LAMP 아키텍처를 사용하면 동적 및 대화 형 웹 사이트를 만들 수 있지만 강력한 웹 서버도 필요합니다. 사이트 트래픽이 많을수록 서버 측에서 더 많은 컴퓨팅 성능이 필요합니다. 모든 기능을 갖춘 서버를 사용하더라도 동적 웹 페이지를 빌드하고로드하는 데 오랜 시간이 걸릴 수 있습니다. 휴대 전화로 웹을 탐색하는 데 집중하는 시간이 짧은 사람들의 세상에서 이러한 지연은 점점 더 용납 될 수 없게되었습니다.

Jamstack은 2010 년대 중반에 웹 사이트의 작동 방식에 대한이 전통적인 모델에 대한 반응으로 발생한 "정적 웹"운동의 일환으로 탄생했습니다. Jamstack을 이해하려면 정적 웹 사이트 뒤에있는 오늘날의 기술을 이해해야합니다  .

정적 사이트, 정적 사이트 생성기 및 Jamstack

완전한 초보자에게 웹이 어떻게 작동하는지 설명해야한다면 다음과 같을 수 있습니다. 웹 서버의 파일 시스템 어딘가에 웹 브라우저가 다운로드 한 다음 해석하여 웹 페이지를 생성하는 HTTP 주소로 액세스 할 수있는 HTML 파일이 있습니다. . 그러나  이것은 정적 사이트에 대한 설명입니다 . 웹 브라우저가 파일을 찾을 때 HTML 파일이 이미 존재한다고 가정합니다. 이미 살펴본 바와 같이, 지난 10 년 동안 웹의 대부분은 동적 사이트에 의해 지배되어 왔으며, 대신 웹 요청에 대한 응답으로 즉석에서 HTML 파일을 생성하며, 양식 또는 URL 자체.

웹 페이지가 항상 정적이었던 웹 초기에는 많은 웹 개발자가 HTML 코드를 직접 작성했습니다. 웹 페이지가 더 복잡 해짐에 따라 Macromedia의 Dreamweaver와 같은 도구가 도입되어 이러한 정적 HTML 페이지를 프로그래밍 방식으로 생성 할 수 있습니다. 2010 년대 중반에 정적 웹 이동이 시작되면서 Gatsby, Hugo 및 Jeckyll을 포함한 소위 정적 사이트 생성기 의 새로운 물결이 나타나기 시작했습니다. Dreamweaver와 같은 WYSIWYG 도구와 달리 정적 사이트 생성기는 명령 줄 기반이며 CI / CD 프로세스와 통합되도록 설계되었습니다. HTML 파일은 도구에 의해 생성되며, 종종 Markdown으로 작성된 콘텐츠를 기반으로하며 GitHub와 같은 버전 관리 저장소에 자동으로 업로드됩니다. 이러한 파일이 제작 준비 완료로 표시되면 라이브 웹 사이트의 정적 페이지가 자동으로 업데이트됩니다.

명심해야 할 중요한 점 은이 컨텍스트에서 정적 인 것이 대화 형이 아닌 단순한 웹 1.0 페이지라는 것을 의미하지 않는다는 것입니다. 이러한 페이지에는 브라우저에서 실행되고 데이터베이스, 서버 측 기능 또는 호스팅 된 서버리스 기능에 대한 API 호출을 수행하는 고급 JavaScript가 포함될 수 있습니다. 그러나 이러한 실행은 웹 서버 자체에서 발생하지 않기 때문에 정적 사이트에는 데이터베이스를 갖춘 산업 기반 웹 호스트가 필요하지 않습니다. 많은 정적 사이트가 콘텐츠 전송 네트워크 또는 CDN에 배포되며 , 여기에서 콘텐츠는 어디에서나 사용자에게 신속하게 제공하기 위해 전 세계 여러 서버에 미러링됩니다.

Snipcart의 마케팅 책임자 인 Mathieu Dionne은 블로그 게시물을 통해이 새로운 정적 사이트 세계의 초기 시대를 설명하고 2015 년경에“Netlify 창립자는 ... '정적 웹'의 부정적인 의미입니다.”즉,이 섹션 전체에서 Jamstack 프로세스를 설명했습니다. 그러나 이제 우리는 Netlify와 생태계에서 Netlify의 역할에 대해 간략히 논의해야합니다.

Netlify는 무엇입니까?

Netlify는 클라우드 컴퓨팅 및 웹 호스팅 회사입니다. Netlify의 공동 설립자 Mathias Biilmann은 Jamstack이라는 용어를 만들었고 Netlify의 서비스는 Jamstack 철학을 기반으로 사이트를 구축하려는 고객에게 맞춤화되었습니다.

Netlify는 캐시 무효화 라는 정적 사이트를 방해하던 특정 문제를 해결했다고 주장합니다 . 데이터베이스 기반 동적 웹 사이트는 많은 서버 리소스를 소모 할 수 있지만 방문하는 모든 방문자에게 최신 버전의 웹 사이트를 제공 할 것이라고 확신 할 수 있습니다. Jamstack 웹 사이트는 종종 CDN의 여러 분산 서버에서 호스팅되기 때문에 업데이트가 덜 간단합니다. 각 CDN 서버에서 캐시 된 사이트 버전이 더 이상 유효하지 않다는 것을 파악하는 데 몇 분에서 몇 시간까지 걸릴 수 있습니다. Netfliy의 CDN은이 문제를 해결하기 위해 HTML 파일에 대한 즉각적인 캐시 무효화를 제공합니다.

그러나 Netlify는 Jamstack 공간에서 유일한 호스팅 제공 업체가 아니며,이 용어에 대한 어떤 종류의 상표 나 독점 제어권도 가지고 있지 않습니다. 사용 가능한 여러 Jamstack 호스팅 및 배포 솔루션이 있으며 AWS, Google Firebase 및 Microsoft Azure를 포함한 대부분의 대형 클라우드 제공 업체가 작업에 참여하고 있습니다.

Jamstack CMS

웹 사이트를 매일 처리해야하는 사람이라면 웹 사이트를 구축하고 호스팅하는 것이 시작에 불과하다는 것을 알고 있습니다. 새 콘텐츠를 만들어 사이트에 추가하는 방법도 필요합니다. 이를 수행 할 사람들은 일반적으로 프로그래머가 아니기 때문에 사용자 친화적 인 도구, 즉 콘텐츠 관리 시스템 또는 CMS가 필요합니다. WordPress와 같은 기존 CMS는 웹 사이트 콘텐츠를 입력하고 해당 콘텐츠가 저장된 데이터베이스를 관리하며 브라우저 요청에 대한 응답으로 해당 콘텐츠를 제공하는 동적 웹 페이지를 구축 할 수있는 백엔드 UI를 제공합니다.

Jamstack 사이트의 CMS는 다르게 작동하며 일반적으로 헤드리스 라고합니다 . 헤드리스 CMS는 콘텐츠를 입력하고 관리하기위한 UI와 데이터베이스 또는이를 저장하는 다른 수단을 제공하지만 브라우저가 구문 분석 할 HTML 코드를 자체적으로 생성하지는 않습니다. 대신 웹 사이트의 정적 HTML 페이지는 JavaScript를 사용하여 CMS의 API를 호출하고 CMS는 JavaScript가 웹 페이지로 변환 할 수있는 형식으로 콘텐츠를 반환합니다.

이 시스템은 콘텐츠와 프레젠테이션을 완전히 분리하며, 이는 물론 프로그래밍의 오랜 이상입니다. CMS에는 액세스 가능한 API가 있기 때문에 여러 웹 페이지에서 쉽게 액세스 할 수 있습니다. 예를 들어 웹 사이트의 모바일, 데스크톱 및 스마트 워치 버전을 별도로 구축 한 경우 이러한 모든 버전은 CMS에 저장된 동일한 콘텐츠에 액세스 할 수 있습니다.

예상대로 Netlify는이 공간에 NetlifyCMS라는 자체 오퍼링을 가지고 있지만 다른 여러 오퍼링을 사용할 수 있습니다. 개발자 Nebojsa Radakovic이 블로그 게시물에서이를 분석합니다. 그 목록에는 많은 유망한 사람들과 매우 친숙한 이름이 있습니다. 기존 CMS의 예로 WordPress를 사용했지만 WordPress를 헤드리스 CMS로 실행하여 Jamstack 사이트를 지원할 수도 있습니다.

Jamstack 컨퍼런스

Netlify는 또한 Jamstack 커뮤니티를 만들고 Jamstack 컨퍼런스를 후원합니다. 이 회사는 2019 년에 뉴욕, 런던, 샌프란시스코에서 이벤트를 개최했으며 2020 년 5 월에 가상 이벤트를 개최했습니다.이 글을 쓰는 시점에서는 2020 년 10 월 6-7 일로 예정된 샌프란시스코 이벤트에 등록 할 수 있습니다. 코로나 바이러스 전염병은 여전히 ​​가을 회의 계획을 공중에 뜨고 있습니다. 

업데이트를 원하시면 트위터에서 컨퍼런스를 팔로우 할 수 있습니다. Jamstack Conf YouTube 채널에서 지난 강연을 확인할 수도 있습니다.

[추가 정보 : 6 개의 최고의 JavaScript IDE | 최고의 자바 스크립트 편집기 10 가지]

Jamstack 튜토리얼

더 자세히 알고 싶으십니까? Jamstack 사이트 구축에 대한 실무 경험을 제공하는 다음 Jamstack 튜토리얼을 확인하세요.

  • 개발자 David Neal은 Jamstack 사이트 구축에 대한 좋은 입문 튜토리얼을 가지고 있습니다. 아주 간단하게 시작해서 점점 더 복잡해집니다. 
  • LogRocket 블로그에서 소프트웨어 엔지니어 Ogundipe Samuel은 Jamstack 원칙에 따라 전자 상거래 사이트를 구축하는 방법을 단계별로 심층적으로 살펴 봅니다. 
  • Netlify는 기본부터 고급 주제에 이르기까지 다양한 영역을 다루는 3 시간 이상의 비디오 자습서를 제공합니다. 

여기에 설명 된 기본 개념을 숙지하고 나면 직업 생활에서 Jamstack 개발 작업을 시작할 준비가 된 것입니다. 즐거운 학습 되세요!