JAMstack이란? [NHN FORWARD 2020] Welcome to JAMstack 를 보고!

출처: TOAST 채널의 [NHN FORWARD 2020] Welcome to JAMstack 강의를 듣고 나름대로 정리를 해보려고 한다. 

 

해당 유튜브 영상의 소개글은  "프런트엔드 개발자가 웹 애플리케이션 구성부터 개발, 배포까지 모두 하는 것이 가능할까요? JAMstack과 함께라면 가능합니다." 이다. 대체 JAMstack이란 무엇일까?

 

 

1. JAMstack

- JAMstack이란 무엇일까? Serveless 개발구조에서 파생된 개념

• JavaScript: 
  • 동적인 요소 처리
  • Front-End 라이브러리, 프레임워크
  • API 요청
• API:
  • 서버 또는 DB에서 담당하던 역할
  • 추상화된 재사용 가능 API
  • Cloud Function, Third party APIs
• Markup: JAMstack은 웹어플리케이션의 마크업과 컨텐츠를 정적페이지로 다 생성해둠(기존 SPA나 server-side-rendering과는 다름)
  • 문서 내용의 시각적 표현
  • 빌드 시 페이지 생성(prebuild pages), 전부 미리 생성해둠

 

  즉,

https://www.youtube.com/watch?v=CTtoHa1g8I4&feature=youtu.be&ab_channel=TOAST 영상의 도식을 따라 그렸습니다!

 

• • build 당시 생성된 static file은 CDN에 올리고, 브라우저의 별도 요쳥에 대해서 API 사용
  • JAMstack은 주로 정적 사이트 생성기(Static Site Generator)를 이용하게 됨

영상 4분 26초쯤! JAMstack을 사용하면 어떻게 된다는 건지!

 

- JAMstack의 장점

• 높은 안정성
• 빠른 성능
• 확장성 및 낮은 비용
• 쉬운 자동화
• 사용 예: TOAST 랩에서 정적사이트 생성기(Gatsby)를 활용해서 JAMstack application을 만들었음.

- 정적 사이트 생성기란(Static Site Generator)? 정적 파일을 생성(JAMstack)하는 것을 도와주는 프레임워크 또는 라이브러리로 모든 정적생성기는 산출물로 빌드페이지를 만든다

ex) Gatsby(React.js), Next.js(React.js), Nuxt.js(Vuew.js), 11ty(Vanilla js), Hugo(Go), ?Jekyll(Ruby)

 

• Gatsby?
  • React.js 기반의 정적 사이트 생성기
  • 다양한 데이터 타입 지원
  • 거대한 플러그인 시스템
  • GraphQL을 통한 데이터 조회

 

2.  JAMstack 생태계

- 동적 콘텐츠: Netlify

• 검색 결과
• 쇼핑몰 장바구니
• 사용자 프로필
• 폼 빌더 

이런 동적인 애들을 어떻게 처리하면 좋을까? 예측이 어려운 동적컨텐츠는 Prebuilt하기가 어렵다. 동적 컨텐츠를 위한 API나 저장소가 필요하게 됨. 다양한 Third party APIs를 통해서 해결할 수 있다. 

 

 

 

- JAMstack의 현재와 미래

점진적 빌드가 얼마나 발전하는지에 따라, JAMstack의 미래가 달려있다!

 

 

완벽한 기술은 아니지만, 한번 써보면 좋을 기술이다!!