{"componentChunkName":"component---src-templates-blog-post-js","path":"/etc/jamstack-이란/","result":{"data":{"site":{"siteMetadata":{"title":"Bottlehs Tech Blog","description":"웹·앱·AI 개발자 전병훈(bottlehs)의 기술 블로그. AI·LLM, JavaScript·Vue, Spring Boot, 알고리즘, 블록체인 실무 가이드를 다룹니다","siteUrl":"https://www.bottlehs.dev","author":{"name":"Jeon Byung Hun","summary":"개발을 즐기는 bottlehs - Engineer, MS, AI, FE, BE, OS, IOT, Blockchain, 설계, 테스트"},"social":{"github":"bottlehs","codepen":"bottlehs"}}},"markdownRemark":{"id":"15fd0a8e-1cf8-5353-b392-507d300bef78","excerpt":"JAMStack 이란 JAMStack Jamstack은 Javascript, API 및 Markup의 약자이며 2015 년 Netlify의 CEO 인 Mathias Biilmann…","html":"

\"JAMStack

\n

JAMStack

\n

Jamstack은 Javascript, API 및 Markup의 약자이며 2015 년 Netlify의 CEO 인 Mathias Biilmann이 처음 만들어졌습니다.

\n

웹 개발 구조

\n

전통적인 웹

\n

아래는 전통적인 웹 구조 이다.

\n

\"전통적인

\n

브라우저에서 데이터를 요청하면 DB 서버에 접근하여 요청한 데이터를 가져와 화면에 보여준다. 웹 개발 시 데이터 저장 및 출력을 어떻게 할지도 전부 설계를 하여 개발을 진행해야 하고, 관리도 필요하다.

\n

Serverless 웹

\n

아래는 서버리스 웹 구조 이다.

\n

\"Serverless

\n

\"Serverless

\n

브라우저에서 데이터를 요청하면 DB 서버에 접근하여 요청한 데이터를 가져와 화면에 보여준다는 건 동일하다. 하지만 다른 부분은 데이터베이스 서비스 API를 사용한다는 것이다.\n즉 웹 개발 시 DB, API 구조에 대해서는 전혀 고려하지 않고 원하는 데이터를 데이터베이스 서비스에 저장하고 필요에 따라 가져다 사용하면 된다. 서버 구성에 대해 신경 쓸 필요가 없고 관리도 필요 없다.

\n

JAMStack이란

\n\n

서버 없이 배포 운영되는 모던 웹 개발 구조

\n

\"JAMStack이란\"

\n

J(JavaScript)

\n\n

A(API)

\n\n

M(Markup)

\n\n

JAMStack의 장점

\n\n

높은 안정성

\n

API들은 마이크로 서비스로 추상화되어 외부의 공격영역이 줄어들어 안정성이 높다.

\n

\"높은

\n

빠른 성능

\n

배포타임에 생성해도 되는 페이지들을 요청시마다 생성할 필요가 없고, CDN 에서 받은 것 만큼 시간을 절약 할수 있다.

\n

\"빠른

\n

확장성 및 낮은 비용

\n

배포해야할 양이 많고 세계 어디서든 서비스를 해야한다고 하면 스케일링 신경을 써야 한다. JSAMStack 은 CDN을 사용하여 데이터를 받아 올수 있기 때문에 요금제에 따라 효율적으로 CDN 서버를 구축하면 비용을 줄일수 있다.

\n

\"확장성

\n

쉬운 자동화

\n

Netlify, AWS Lambda 등을 활용하면 배포를 자동화 할수 있다.

\n

\"쉬운

\n

데이터베이스 서비스

\n

FaunaDB

\n

FaunaDB는 GraphQL을 사용하는 트랜잭션 데이터베이스서비스

\n

DynamoDB

\n

DynamoDB는 키-값 및 문서 데이터 구조를 지원하는 완전 관리 형 독점 NoSQL 데이터베이스 서비스

\n

Static Site Generator

\n

JAMStack 웹 개발에 사용되는 정적 사이트 생성기(Static Site Generator) 의 대표적인 프레임워크는 아래와 같다.

\n

Next

\n

\"Next\"

\n

https://nextjs.org/

\n

Next.js는 서버 측 렌더링 및 React 기반 웹 애플리케이션을위한 정적 웹 사이트 생성과 같은 기능을 지원하는 오픈 소스 React 프런트 엔드 개발 웹 프레임워크

\n\n

Gatsby

\n

\"Gatsby\"

\n

https://www.gatsbyjs.com/

\n

Gatsby.js란? Gatsbyjs는 React 기반의 정적 페이지 생성 프레임워크

\n\n

Nuxt

\n

\"Nuxt\"

\n

https://nuxtjs.org/

\n

Nuxt.js는 Vue.js, Node.js, Webpack 및 Babel.js를 기반으로하는 무료 오픈 소스 웹 애플리케이션 프레임워크

\n\n

JAMStack 생태계

\n

CMS, Function, Hosting

\n

CMS

\n

정적 콘텐츠 관리

\n\n

Function

\n

자동 빌드 및 배포

\n\n

Hosting

\n

웹 사이트 호스팅

\n\n

동적 콘텐츠

\n

JAMStack 은 정정페이지를 생성하여 호스팅 하는 구조이기 때문에 동적인 콘텐츠 노출,생성에 문제점이 있다. 이러한 부분을 보완 할수 있는 다양한 서드파티 API 들이 존재하며, 필요에 따라 활용이 가능 하다.

\n\n

Third party APIs

\n

검색, 쇼핑, 결제 등 다양한 Third party APIs

\n

Algolia

\n

https://www.algolia.com/

\n\n

DISQUS

\n

https://disqus.com/

\n\n

Stripe

\n

https://stripe.com/

\n\n

JAMStack 현재와 한계점 및 Gatsby Cloud

\n

현재

\n\n

JAMStack의 한계점

\n\n

Gatsby Cloud

\n

JAMStack 구조상 정적인 페이지가 많아질수록 빌드속도가 오래 걸린다는 단점이 있다. 이러한 부분을 해결하기 위해 “점진적 Build” 시스템을 도입 중이며 성과는 아래와 같다.

\n

\"점진적

\n

JAMStack 기반으로 만들어진 웹 사이트는 대표적으로 아래와 같다.

\n\n

JAMStack 기반 블로그 개설

\n

bottlehs 기술 블로그는 Gatsby + Netlify 로 개발 되었으며 Netlify CMS 를 활용하여 콘텐츠 관리를 쉽게 할수 있도록 되어 있다.\n아래 Github 페이지에 방문하여 Deploy to Netlify 버튼을 클릭하거나 아래에 있는 Deploy to Netlify 를 클릭 하면 Netlify 로 호스팅된 JAMStack 기반 블로그를 개설 할수 있으니 관심 있으신 분들한 한번 해보기 바란다.

\n

Demo

\n

\"Deploy

\n

💡 if you want to deploy github pages, add following script to package.json

\n
\"scripts\": {\n    \"deploy\": \"gatsby build && gh-pages -d public -b master -r 'git@github.com:${your github id}/${github page name}.github.io.git'\"\n}
\n

Github : https://github.com/bottlehs/gatsby-starter-flat-blog/

\n

참고

\n","tableOfContents":"","wordCount":{"words":748},"fields":{"slug":"/etc/jamstack-이란/","image":"/assets/jamstack-cover.png","faq":[]},"frontmatter":{"title":"JAMStack 이란","date":"2021년 4월 18일","dateISO":"2021-04-18T22:11:34.709Z","updatedISO":null,"category":"etc","description":"Jamstack은 Javascript, API 및 Markup의 약자이며 2015 년 Netlify의 CEO 인 Mathias Biilmann이 처음 만들어졌습니다. 서버 없이 배포 운영되는 모던 웹 개발 구조 이며, 장점으로는 높은 안정성, 빠른 성능, 확장성 및 낮은 비용, 쉬운 자동화 등이 있습니다.","tags":["JAMStack","Gatsby","Nuxt.js","Next.js","Netlify"]}}},"pageContext":{"slug":"/etc/jamstack-이란/","previous":{"fields":{"slug":"/etc/프로젝트-킥오프-가이드/"},"frontmatter":{"title":"프로젝트 킥오프 가이드","tags":["킥오프미팅","프로젝트","애자일"]}},"next":{"fields":{"slug":"/etc/애자일-스크럼/"},"frontmatter":{"title":"애자일 스크럼","tags":["스크럼","프로젝트","애자일"]}}}},"staticQueryHashes":["213619243","3262363727"]}