JAM Stack

JAM Stack 이란?

Javascript, Api, Markup 으로 구성되어 서버 없이 풀스택을 구현할 수 있게 도와주는 아키텍처이다.

 

Javascript: 서버사이드 렌더링이 가능한 Next.js, Gastby등

Api: Headless CMS를 이용해서 구현. CMS란 서버에 대한 지식이 없어도 간편하게 데이터베이스도 생성해주고 다양한 것들을 지원해 주는 시스템이다.

Markup: HTML 이다.

 

JAM Stack 을 사용하는 이유

전통적인 웹 사이트는 실제로 웹 서버에서 항상 실행되어야하는 프로그램인데 이러한 방식으로 사이트를 실행하면 불필요하게 속도가 느려지고 공격 기회가 너무 많으며 확장 비용이 많이 들게 된다. 하지만 잼스택을 사용하게 되면

첫번째. 사전 렌더링(pre-rendering)으로 더 빠르게 사이트를 최적화할 수 있다.

두번째. 설계 상 Jamstack 아키텍처는 더 적은 수의 공격 지점을 갖게된다.

세번째. CDN을 통해 확장이 되고 별도의 서버 관리가 필요하지 않기 때문에 개발자는 보다 개발과 문제 해결에 집중할 수 있다.

 

JAM Stack 사용해보기

JAM Stack 을 가장 쉽게 따라해볼 수 있는 방법은 gatsbyjs 와 netlify 를 이용해 웹사이트를 구축하는 것이다.

pks2974.medium.com/gatsby-%EB%A1%9C-blog-%EB%A7%8C%EB%93%A4%EA%B8%B0-ac3eed48e068

Gatsby 로 Blog 만들기

gatsbyjs 는 React 와 GraphQL 를 이용한 정적 사이트 생성기 이다.

netlify 는 Javascript 코드를 빌드 하고 배포 하고 운영할 수 있게 도와주는 플랫폼이다.

1. Github 으로 프로젝트를 관리한다.
2. Gatsbyjs (SSG) 로 정적 사이트 생성기를 구축한다.
3. Netlify 에 배포 환경을 구성한다.
4. GitHub 에 코드가 변경되면, Netlify 에서 빌드를 시작한다.
5. Netlify 로 Gatsbyjs 으로 빌드하고, 사이트을 배포한다.

한번 배포된 Package 는 더 이상 빌드를 위한 웹서버의 자원은 필요하지 않게되고, 모든 처리는 Javascript 와 API 에서 이루어지게 된다.

JAM Stack 은 하나의 개념이기 때문에, 특정 라이브러리나 플랫폼을 이용하지 않고, 본인이 직접 빌드툴 혹은 프레임워크을 만들거나, 호스팅 서버나 CDN 을 운영해도 전혀 문제가 없다.

 

시간날 때 한번 해봐야겠다. 그래야 개념을 더 잘 이해할 수 있을듯.

 

참고

pks2974.medium.com/jam-stack-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-17dd5c34edf7

www.netlify.com/jamstack/

jamstack.org/