잼스택(JAMSTACK)

jeong dain·2023년 1월 12일

잼스택이란?

자바스크립트, API, 마크업을 주축으로 하는 웹 애플리케이션 아키텍처

표준 마크업 언어로 구성하여 애플리케이션 서버 또는 nodeJS와 같은 서버 사이드 기술에 의존하지 않고 어디서나 빌드하고 테스트가 가능하다

LAMP는 리눅스, 아파치, MySQL, PHP/Perl/Python 로 구성된 서버사이드 개발 방식
1. 유저가 웹 서버에 방문하는 순간 서버 사이드 코드가 실행
2. 이 코드가 필요한 데이터를 MySQL에서 가져와 즉시 웹 페이지를 생성
LAMP 아키텍처는 동적이고 인터랙티브한 웹사이트를 생성할 수 있지만 트래픽을 감당할 수 있는 서버와 높은 컴퓨팅 성능이 필요하다.
동적으로 웹페이지를 빌드하고 로드하므로 트랙픽이나 데이터량이 많아질 경우 서버 리소스를많이 소비하게되고 사용자에게 보여지는데까지의 시간이 오래걸릴 수 있다

동적 사이트보다 더 빠른 속도로 로드된다.
속도가 느린 사이트는 이미 빠른 응답에 익숙해진 고객이 떠나갈 확률이 높아지며, 구글의 경우 속도가 느린 사이트는 검색 순위를 낮춰서 불이익을 준다.
잼스택은 영역을 명확하게 구분하는 사이트 스택을 만들어 개발자가 자신의 전문 영역에만 집중 할 수 있게 한다.(데브옵스 기법)
1. 디자이너/프론트엔드 개발자 : 서버 사이드 언어와 관계없이 사이트 구축 가능
2. 백엔드 개발자 : API에 집중 가능
다양하고 유연한 호스팅 방식
1. 정적 사이트는 전통적인 웹서버, CDN, 정적 사이트 전문 서비스 중 하나를 선택해 호스팅 할 수 있고, 동시에 사용하는 것도 가능하기 때문에 필요에 따라 유연한 방식으로 호스팅하는 것이 가능하다.
2. CMS는 API를통해 프론트엔드와 상호작용하므로 동일한 콘텐츠를 공유하는 여러 플랫폼용 사이트를 쉽게 구축할 수 있다.

잼스택은 개발자에 대한 의존도가 높기 때문에 전담 개발팀이 있는 경우가 아니라면 개발자 친화적이라는 장점이 단점으로 적용할 수 있다.

잼스택 생태계에서 큰 담당하고 있는 클라우드 컴퓨팅/웹 호스팅 업체
넷틀리파이의 공동 창업자 중 한 명인 마티아스 빌만이 잼스택이라는 용어를 처음 사용
*’정적 웹’ 이라는 부정적인 어감을 피하기 위해 ‘잼스택’ 용어 고안
‘캐시 무효화(cache invalidation)’ 관련 기술로 성장 중
잼스택 웹사이트는 CDN을 통해 분산된 여러 서버에서 호스팅하는 경우가 많아 업데이트가 실시간으로 이루어지지않는다
*CDN 서버가 캐시된 사이트 버전이 더 이상 유효하지 않은 것을 인식하는데 시간이 걸림
CDN에서 HTML 파일에 대한 즉석 캐시 무효화 기능을 통해 업데이트 문제를 해결한다
넷틀리파이는 실제 서버 없이 로컬 캐시를 통해 배포를 진행한다
동적 사이트보다 10배 빠른 속도로 빌드 및 로드를 진행한다

잼스택 사이트의 CMS 동작 방식
웹사이트를 만든 뒤 새 콘텐츠를 업로드하는 것은 보통 프로그래머가 아니기 때문에 콘텐츠 관리 시스템(CMS)가 필요하다
전통적인 CMS
- 워드프레스 : 백엔드 사용자를 위한 인터페이스를 동적으로 제공한다
- 콘텐츠 입력 → DB 저장 → 브라우저 요청 → DB 호출 → 콘텐츠 제공
잼스택 CMS
- 콘텐츠 입력 및 관리를 위한 UI 와 데이터베이스 제공
- 브라우저가 파싱한 HTML 코드 생성X
- 자바스크립트를 이용해서 CMS의 API를 호출 → CMS는 자바스크립트가 웹페이지로 변환할 수 있는 형식의 콘텐츠 발행
- 콘텐츠를 프레젠테이션 계층에서 분리한다
- 다양한 기기 버전에서 웹 사이트를 제작할 경우에도 모든 버전이 CMS에 저장된 동일한 콘텐츠에 접근할 수 있다

참고 : https://www.samsungsds.com/kr/insights/nc-lc-tech.html

Web Frontend Developer #TypeScript #React #NextJS🤸‍♀️