JAM Stack

JAM Stack이란 정적 페이지(블로그, 포트폴리오, 소개 페이지 등)를 개발할 때 관련 개발 스택을 찾아보면 꼭 한번은 등장하는 용어이다.
그만큼 인기있는 JAM Stack을 활용한 정적 사이트 생성기인 Gatsby를 시작하기 전에 꼭 알아야할 필수 개념에 대해 알아보자.

JAM Stack이란?

아래 글귀는 JAM Stack 공식 홈페이지에 나와있는 설명이다.

JAMStack is an architecture designed to make the web faster, more secure, and easier to scale.

공식 설명에 의하면 JAM Stack은 더 빠르고, 안전하며, 스케일링하기 쉬운 웹을 만들기 위해 디자인된 아키텍쳐라고 한다.
어떻게 이 아키텍처는 저런 이점을 가질 수 있는지 홈페이지에 있는 설명을 통해 알아보자.

우선 JAM Stack은 JavaScript, API, MarkUp Stack의 약자로, JavaScript와 API, HTML이나 CSS 등을 칭하는 MarkUp으로 이루어진 웹 구성 방법이다.

이름에 있는 그대로 저 3가지의 기술을 통해 홈페이지를 만든다는 것인데, 그럼 기존 웹 사이트와는 어떤 차이점이 있을까?

기존 웹 사이트의 방식은 대부분 서버에서 데이터베이스 또는 CMS(Content Management System)으로부터 추출한 데이터를 프론트엔드에 뿌려주는 방식이다.
위 사진에서 보이는 것과 같이 클라이언트에 데이터를 보여주기 위해서 많은 절차를 거쳐야만 하기 때문에 구조가 복잡하다.

하지만 JAM Stack을 사용한 방식은 기존 웹 사이트의 방식과 다르게 절차가 매우 간단하다.

각종 마크업 요소와 다양한 API를 통해 만든 정적 웹 사이트를 Pre-Render한 것을 CDN(Content Delivery Network)을 통해 웹 사이트를 열람할 수 있다.
여기서 조금만 깊게 파고들면 위의 과정 속에서 공식 홈페이지에서 설명하는 JAM Stack의 이점을 모두 확인할 수 있다.

1. 기존 방식에 비해 더 빠르게 웹 사이트를 제공할 수 있다.

   • 대부분의 웹 사이트는 처음 접속 시, 서버를 통해 데이터를 받아와 이를 렌더링하는 과정이 필요하다.
     하지만, JAM Stack은 렌더링할 화면들을 모두 Pre-Render하여 제공되어 그만큼 사용자에게 화면을 보여주기 위해 준비하는 시간을 단축할 수 있다.
     이에 더불어 브라우저에서 첫 응답을 받기까지 걸리는 시간인 TTFB(Time to First Byte)를 최소화하는 데, 미리 빌드된 파일을 CDN을 통해 제공하는 것보다 나은 방법이 없다고 한다.

2. 안전한 웹 사이트를 제공할 수 있다.

   • JAM Stack은 API를 통해 정적 사이트를 생성한다.
     여기서 사용되는 API는 JAM Stack을 활용한 각 프레임워크에서의 마이크로 서비스로서, 사이트 생성을 위한 프로세스가 추상화되어있기 때문에 그만큼 공격 노출 범위가 감소하게 된다.
     따라서 개발자는 웹 개발 중 발생할 수 있는 취약점에 대해 보다 덜 신경쓸 수 있다.

3. 스케일링하기 쉬운 웹 사이트를 제공할 수 있다.

   • 정적 웹 사이트에서의 스케일링은 더 많은 지역에서 홈페이지를 제공할 수 있게 하는 의미인데, 미리 빌드된 파일 제공을 담당하는 CDN이 그 역할을 충분히 수행해낼 수 있다.

• 참조