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), 전부 미리 생성해둠
즉,
-
- build 당시 생성된 static file은 CDN에 올리고, 브라우저의 별도 요쳥에 대해서 API 사용
- JAMstack은 주로 정적 사이트 생성기(Static Site Generator)를 이용하게 됨
- 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의 미래가 달려있다!
완벽한 기술은 아니지만, 한번 써보면 좋을 기술이다!!