JAMstack Jamstack 사례 ~ 스위스 연방 정부 기관의 라디오 프로그램 분석 앱의 경우 ~ 이번에도 전회에 계속해서 Bejamas사가 임한 Jamstack의 사례에 대해 소개하고 싶습니다 Bejamas는 기본적으로 Jamstack을 중심으로 웹 개발을 수행하지만, 어떤 경우에는 익숙한 작업 범위를 뛰어 넘어 스위스 연방 기관을 위해 만든 라디오 프로그램 분석 앱과 같은 흥미로운 프로젝트에 종사할 수도 있습니다. 저자: Gracjan Opiela 2020년 11월 3일 원문: 웹 개... static_site_generatorJAMstackWordPresscdn자바스크립트 【JAMstack】Next.js × Firebase로 JAMstack인 블로그 사이트를 만드는 ③［Hooks］ 이 기사는 의 계속이 되고 있습니다. 이 기사에서는 Firebase Functinos를 사용하여 Firebase Storage 기사에 변경 사항이있을 때 Vercel에 배포 요청을 보내는 Hook 함수를 만듭니다. 이를 통해 Vercel에서 재구성이 실행되고 그 때 변경된 상태의 Firebase Storage 기사를 얻을 수 있으므로 블로그 사이트도 업데이트되는 치수입니다. Firebase ... JAMstackFirebaseReactTypeScriptnext.js 【JAMstack】Next.js × Firebase 로 JAMstack인 블로그 사이트를 만드는 ②[블로그 사이트] 이 기사에서는 Firebase Storage에서 블로그 사이트 기사를 검색하는 프로세스를 구현합니다. 또한 Next.js를 개발하는 Vercel의 Hosting 사이트(Vercel)에 배포합니다. 문서는 모두 영어입니다만, 일본어로 해설해 주시고 있는 동영상이 있습니다. ※ 동영상의 시리즈의 번외편으로서, 마지막으로 GitHub에 업로드하고 있는 Markdown 파일을 취득하는 처리를 추가하... JAMstackFirebaseReactTypeScriptnext.js 【JAMstack】Next.js × Firebase로 JAMstack인 블로그 사이트를 만드는 ①[개요] Next.js 공부를 시작하고 공식 튜토리얼에서 블로그 사이트를 만들었습니다. 그 과정에서, JAMstack과 같은 아키텍처를 알고, 최근 공부하고 있던 Firebase와 조합하면 스스로도 만들 수 있을 것 같았기 때문에, 노력해 만들어 보았습니다. 목표는 블로그 기사를 게시/삭제하면 자동으로 블로그 사이트에 반영되도록 합니다. 또한 블로그 사이트는 정적 사이트 생성(SSG)에 의해 SEO에... JAMstackFirebaseReactTypeScriptnext.js Azure Static Web Apps를 hugo로 사용해 보았습니다. 올해의 5월에 Microsoft로부터 발표가 있었던 Azure Static Web Apps. 미리보기 버전이 출시된 것을 잊었기 때문에 시험에 사용해 보았습니다. hugo를 사용해 여러가지 작성하고 있었으므로 이번은 hugo로 올려 보았습니다. 사양 포함된 대역폭 초과 대역폭 사용 불가 Azure 구독당 앱 수 앱 크기 프로덕션 전 환경 수 초대되고 역할을 할당할 수 있는 최대 25명의 최종... JAMstackAzureStaticWebAppsHugoAzureMicrosoft GatsbyJS + Netlify에서 예약 게시물 같은 것을하십시오 Netlify 빌드 후크 (Webhook) 발행 IFTTT로 매시간 Build hooks를 두드려 빌드를 달리기 라는 고마운 플러그인으로 frontmatter 의 시각과 현재 시각을 비교해 빌드를 제어할 수 있습니다. npm 또는 yarn으로 패키지를 설치하고 gatsby-config.js 및 gatsby-node.js 에 설정을 추가합니다. gatsby-config.js gatsby-nod... JAMstackNetlifyiftttgatsby WordPress(headlessCMS)+Gatsby의 절충안적인 블로그를 만들려고 하는 이야기 WordPress를 headlessCMS로 사용하고 프런트를 Gatsby로 만드는 구성에 매력을 느꼈기 때문에 만들어 보기로 했습니다. 이 기사에서는 기존의 WordPress 블로그에 있는 기사를 로컬로 Gatsby로 표시하는 곳까지 합니다(더 이상은 공부중이므로 또 추후) 비IT 인재에게 블로그 갱신을 하고 싶은 경우, contentfull, microCMS 등에서는 어려울 것이라고 판단했... SSGJAMstackWordPressgatsby microCMS 미리보기 기능을 Gatsby.js에서 사용 Gatsby.js는 말하지 않고 알려진 React제의 정적 사이트 제너레이터입니다만, 빌드시에 페이지를 생성한다고 하는 성질 때문에, microCMS의 프리뷰 기능을 사용하려면 한마디 궁리 필요했기 때문에 공유하고 싶습니다. 이 기능을 아시는 분은 코드 부분에서 봐 주세요. microCMS의 미리보기 기능에 대해 조금 설명하면 기사 작성 화면에서 공개 버튼의 왼쪽에 있는 화면 미리보기를 눌렀... JAMstackReactmicroCMS자바스크립트gatsby [Sapper] export로 완전 정적 사이트 만들기 [Svelte] Sapper에서는 sapper export가 그에 해당한다. 위와 같은 svelte 를 sapper export 해, 톱 페이지에 액세스 후 이 svelte 에 대응하는 페이지 (/example )에 a 태그 천이 해 보면, 클라이언트측으로부터 API 서버에의 fetch 가 발생해 버린다. ※ Sapper 에서는 a 태그는 디폴트로 History API 를 사용한 천이가 된다 API 서버가 ... JAMstack사퍼프런트 엔드자바스크립트Svelte Jamstack Docker + Nuxt + Contentful + Vuetify + Netfliy로 포트폴리오 작성 ② 전회의 계속입니다. Nuxt로 프론트 만들기 Docker로 환경 구축 Contentful에서 포트폴리오 정보 얻기 Vuetify에서 외형 성형 Netfliy에서 공개 Contentful에서 SpaceID와 토큰 확인 설정 - API kyes 추가 API 키를 클릭하십시오 Space ID 및 Content Delivery API - access token 확인 환경 파일은 git 저장하지 않도... JAMstackVuetifynuxt.jscontentfulNetflix Jamstack Docker + Nuxt + Contentful + Vuetify + Netfliy로 포트폴리오 작성 ① Nuxt로 프론트 만들기 Docker로 환경 구축 Contentful에서 포트폴리오 정보 얻기 Vuetify에서 외형 성형 Netfliy에서 공개 · Nuxt 환경 참고: · Docker 환경 참고: 그럼 가보자! 이번에는 node12로 설정 네. 이제 이제 환경 완성! Content Model Category Tags Tasks Works Nuxt와 Contentful의 협력 부분 Vuet... JAMstackVuetifynuxt.jscontentfulNetflix Gatsby.js + Netlify + Github을 사용하여 JAM Stack 블로그 만들기 및 게시 Gatsby.js라는 정적 사이트 생성기로 기술 블로그를 만들고 Netlify라는 호스팅 서비스에서 호스팅하는 흐름을 설명합니다. Gatsby.js란? 정적 사이트를 고속으로 구축할 수 있는 React제의 정적 사이트 제너레이터. 세세한 내용에 관해서는 공식 문서나, 이하의 기사가 참고가 됩니다. Github와 협력하여 협력 소스를 호스팅하는 정적 웹 호스팅 서비스 1.Netlify에 Gat... JAMstackReactGitHubNetlifygatsby Netlify라면 git의 브랜치 분리만으로 Split 테스트를 할 수 있어 이전 에서 사용해 이후 에 주목하고 있습니다만, 요 전날 가 릴리스 되었으므로 간단하게 소개해 보겠습니다. 지금까지의 플랜은 레거시 플랜이라고 불리며 사용할 수 없게 되었으므로, 플랜을 변경합니다. 아직 과도기이기 때문인지 잘 모릅니다만, 취소한 뒤 다른 유료 플랜으로 변경하지 않아도 전회 소개한 Prerendering을 사용할 수 있었습니다. 그리고 이번 메인인 Split Testing도 ... JAMstackNetlifyABtesting SSR없이 React 앱을 OGP에 대응 (Netlify) 이번은 원래 prerendering 이외의 방법을 쓰려고 하고 있었습니다만, 하지만 몹시 간단하게 prerendering 할 수 있는 것 같았으므로 시험해 보고 싶어져 버렸습니다. 은 프런트 엔드의 소스 코드를 GitHub 등의 git 리포지토리에 push 하는 것만으로 빌드·배포·CDN 첨부 전달해 주는 서비스입니다. 이전과 마찬가지로 create-react-app로 만듭니다. 전회와 거의... JAMstackNetlifyReactPrerender Jamstack (2021년 1월 현재) Using Git workflows and modern build tools, pre-rendered content is served to a CDN and made dynamic through APIs and serverless functions. Technologies in the stack include JavaScript frameworks, Static Site Generators,... JAMstackJavaScriptDecouplingPre-rendering Code Splitting을 사용하여 React 애플리케이션의 초기 다운로드 시간을 줄여 보십시오. 이 글에서 말하는 코드 스플릿팅 은dynamic import을 사용한 코드 스플릿팅이다.react-router를 사용할 때, 모든route에 따라 js 파일을 구분합니다. 초기에 불러올 때 큰 묶음 js 파일을 읽는 것이 아니라, 모든route가 읽는 데 필요한 최소한의 js 파일을 읽어서 초기 불러오는 시간을 낮추는 것을 목적으로 합니다.(Route는 이번 시위의 예이며, 당연히 Route... JAMstackReactJavaScript SSR 없이 OGP 등과 대응하는 React 어플리케이션(자체 prerendering 편) 는 2017/6/3- 를 썼다. 2017/6/9-CSR의 또 다른 문제로서 초기 로드가 느린 문제에 대응하기 위해 를 썼다. 는 2017/23- 를 썼다. 이름처럼 Preerender는 미리 정적 파일로 렌더링해야 합니다.정적 파일이라면 웹 서버나 S3에 올려 보낼 수 있어 CDN의 은혜를 받을 수도 있고 OGP의 대응도 가능하다.Proerender는 같은 서비스를 사용하는 것이 더 좋을 것... JAMstackReactPrerender 사내 LT 발표 내용 요약 "JAMstack은~CMS 진화의 역사~" WordPressnuxt.jsNetlifynext.jsJAMstack
Jamstack 사례 ~ 스위스 연방 정부 기관의 라디오 프로그램 분석 앱의 경우 ~ 이번에도 전회에 계속해서 Bejamas사가 임한 Jamstack의 사례에 대해 소개하고 싶습니다 Bejamas는 기본적으로 Jamstack을 중심으로 웹 개발을 수행하지만, 어떤 경우에는 익숙한 작업 범위를 뛰어 넘어 스위스 연방 기관을 위해 만든 라디오 프로그램 분석 앱과 같은 흥미로운 프로젝트에 종사할 수도 있습니다. 저자: Gracjan Opiela 2020년 11월 3일 원문: 웹 개... static_site_generatorJAMstackWordPresscdn자바스크립트 【JAMstack】Next.js × Firebase로 JAMstack인 블로그 사이트를 만드는 ③［Hooks］ 이 기사는 의 계속이 되고 있습니다. 이 기사에서는 Firebase Functinos를 사용하여 Firebase Storage 기사에 변경 사항이있을 때 Vercel에 배포 요청을 보내는 Hook 함수를 만듭니다. 이를 통해 Vercel에서 재구성이 실행되고 그 때 변경된 상태의 Firebase Storage 기사를 얻을 수 있으므로 블로그 사이트도 업데이트되는 치수입니다. Firebase ... JAMstackFirebaseReactTypeScriptnext.js 【JAMstack】Next.js × Firebase 로 JAMstack인 블로그 사이트를 만드는 ②[블로그 사이트] 이 기사에서는 Firebase Storage에서 블로그 사이트 기사를 검색하는 프로세스를 구현합니다. 또한 Next.js를 개발하는 Vercel의 Hosting 사이트(Vercel)에 배포합니다. 문서는 모두 영어입니다만, 일본어로 해설해 주시고 있는 동영상이 있습니다. ※ 동영상의 시리즈의 번외편으로서, 마지막으로 GitHub에 업로드하고 있는 Markdown 파일을 취득하는 처리를 추가하... JAMstackFirebaseReactTypeScriptnext.js 【JAMstack】Next.js × Firebase로 JAMstack인 블로그 사이트를 만드는 ①[개요] Next.js 공부를 시작하고 공식 튜토리얼에서 블로그 사이트를 만들었습니다. 그 과정에서, JAMstack과 같은 아키텍처를 알고, 최근 공부하고 있던 Firebase와 조합하면 스스로도 만들 수 있을 것 같았기 때문에, 노력해 만들어 보았습니다. 목표는 블로그 기사를 게시/삭제하면 자동으로 블로그 사이트에 반영되도록 합니다. 또한 블로그 사이트는 정적 사이트 생성(SSG)에 의해 SEO에... JAMstackFirebaseReactTypeScriptnext.js Azure Static Web Apps를 hugo로 사용해 보았습니다. 올해의 5월에 Microsoft로부터 발표가 있었던 Azure Static Web Apps. 미리보기 버전이 출시된 것을 잊었기 때문에 시험에 사용해 보았습니다. hugo를 사용해 여러가지 작성하고 있었으므로 이번은 hugo로 올려 보았습니다. 사양 포함된 대역폭 초과 대역폭 사용 불가 Azure 구독당 앱 수 앱 크기 프로덕션 전 환경 수 초대되고 역할을 할당할 수 있는 최대 25명의 최종... JAMstackAzureStaticWebAppsHugoAzureMicrosoft GatsbyJS + Netlify에서 예약 게시물 같은 것을하십시오 Netlify 빌드 후크 (Webhook) 발행 IFTTT로 매시간 Build hooks를 두드려 빌드를 달리기 라는 고마운 플러그인으로 frontmatter 의 시각과 현재 시각을 비교해 빌드를 제어할 수 있습니다. npm 또는 yarn으로 패키지를 설치하고 gatsby-config.js 및 gatsby-node.js 에 설정을 추가합니다. gatsby-config.js gatsby-nod... JAMstackNetlifyiftttgatsby WordPress(headlessCMS)+Gatsby의 절충안적인 블로그를 만들려고 하는 이야기 WordPress를 headlessCMS로 사용하고 프런트를 Gatsby로 만드는 구성에 매력을 느꼈기 때문에 만들어 보기로 했습니다. 이 기사에서는 기존의 WordPress 블로그에 있는 기사를 로컬로 Gatsby로 표시하는 곳까지 합니다(더 이상은 공부중이므로 또 추후) 비IT 인재에게 블로그 갱신을 하고 싶은 경우, contentfull, microCMS 등에서는 어려울 것이라고 판단했... SSGJAMstackWordPressgatsby microCMS 미리보기 기능을 Gatsby.js에서 사용 Gatsby.js는 말하지 않고 알려진 React제의 정적 사이트 제너레이터입니다만, 빌드시에 페이지를 생성한다고 하는 성질 때문에, microCMS의 프리뷰 기능을 사용하려면 한마디 궁리 필요했기 때문에 공유하고 싶습니다. 이 기능을 아시는 분은 코드 부분에서 봐 주세요. microCMS의 미리보기 기능에 대해 조금 설명하면 기사 작성 화면에서 공개 버튼의 왼쪽에 있는 화면 미리보기를 눌렀... JAMstackReactmicroCMS자바스크립트gatsby [Sapper] export로 완전 정적 사이트 만들기 [Svelte] Sapper에서는 sapper export가 그에 해당한다. 위와 같은 svelte 를 sapper export 해, 톱 페이지에 액세스 후 이 svelte 에 대응하는 페이지 (/example )에 a 태그 천이 해 보면, 클라이언트측으로부터 API 서버에의 fetch 가 발생해 버린다. ※ Sapper 에서는 a 태그는 디폴트로 History API 를 사용한 천이가 된다 API 서버가 ... JAMstack사퍼프런트 엔드자바스크립트Svelte Jamstack Docker + Nuxt + Contentful + Vuetify + Netfliy로 포트폴리오 작성 ② 전회의 계속입니다. Nuxt로 프론트 만들기 Docker로 환경 구축 Contentful에서 포트폴리오 정보 얻기 Vuetify에서 외형 성형 Netfliy에서 공개 Contentful에서 SpaceID와 토큰 확인 설정 - API kyes 추가 API 키를 클릭하십시오 Space ID 및 Content Delivery API - access token 확인 환경 파일은 git 저장하지 않도... JAMstackVuetifynuxt.jscontentfulNetflix Jamstack Docker + Nuxt + Contentful + Vuetify + Netfliy로 포트폴리오 작성 ① Nuxt로 프론트 만들기 Docker로 환경 구축 Contentful에서 포트폴리오 정보 얻기 Vuetify에서 외형 성형 Netfliy에서 공개 · Nuxt 환경 참고: · Docker 환경 참고: 그럼 가보자! 이번에는 node12로 설정 네. 이제 이제 환경 완성! Content Model Category Tags Tasks Works Nuxt와 Contentful의 협력 부분 Vuet... JAMstackVuetifynuxt.jscontentfulNetflix Gatsby.js + Netlify + Github을 사용하여 JAM Stack 블로그 만들기 및 게시 Gatsby.js라는 정적 사이트 생성기로 기술 블로그를 만들고 Netlify라는 호스팅 서비스에서 호스팅하는 흐름을 설명합니다. Gatsby.js란? 정적 사이트를 고속으로 구축할 수 있는 React제의 정적 사이트 제너레이터. 세세한 내용에 관해서는 공식 문서나, 이하의 기사가 참고가 됩니다. Github와 협력하여 협력 소스를 호스팅하는 정적 웹 호스팅 서비스 1.Netlify에 Gat... JAMstackReactGitHubNetlifygatsby Netlify라면 git의 브랜치 분리만으로 Split 테스트를 할 수 있어 이전 에서 사용해 이후 에 주목하고 있습니다만, 요 전날 가 릴리스 되었으므로 간단하게 소개해 보겠습니다. 지금까지의 플랜은 레거시 플랜이라고 불리며 사용할 수 없게 되었으므로, 플랜을 변경합니다. 아직 과도기이기 때문인지 잘 모릅니다만, 취소한 뒤 다른 유료 플랜으로 변경하지 않아도 전회 소개한 Prerendering을 사용할 수 있었습니다. 그리고 이번 메인인 Split Testing도 ... JAMstackNetlifyABtesting SSR없이 React 앱을 OGP에 대응 (Netlify) 이번은 원래 prerendering 이외의 방법을 쓰려고 하고 있었습니다만, 하지만 몹시 간단하게 prerendering 할 수 있는 것 같았으므로 시험해 보고 싶어져 버렸습니다. 은 프런트 엔드의 소스 코드를 GitHub 등의 git 리포지토리에 push 하는 것만으로 빌드·배포·CDN 첨부 전달해 주는 서비스입니다. 이전과 마찬가지로 create-react-app로 만듭니다. 전회와 거의... JAMstackNetlifyReactPrerender Jamstack (2021년 1월 현재) Using Git workflows and modern build tools, pre-rendered content is served to a CDN and made dynamic through APIs and serverless functions. Technologies in the stack include JavaScript frameworks, Static Site Generators,... JAMstackJavaScriptDecouplingPre-rendering Code Splitting을 사용하여 React 애플리케이션의 초기 다운로드 시간을 줄여 보십시오. 이 글에서 말하는 코드 스플릿팅 은dynamic import을 사용한 코드 스플릿팅이다.react-router를 사용할 때, 모든route에 따라 js 파일을 구분합니다. 초기에 불러올 때 큰 묶음 js 파일을 읽는 것이 아니라, 모든route가 읽는 데 필요한 최소한의 js 파일을 읽어서 초기 불러오는 시간을 낮추는 것을 목적으로 합니다.(Route는 이번 시위의 예이며, 당연히 Route... JAMstackReactJavaScript SSR 없이 OGP 등과 대응하는 React 어플리케이션(자체 prerendering 편) 는 2017/6/3- 를 썼다. 2017/6/9-CSR의 또 다른 문제로서 초기 로드가 느린 문제에 대응하기 위해 를 썼다. 는 2017/23- 를 썼다. 이름처럼 Preerender는 미리 정적 파일로 렌더링해야 합니다.정적 파일이라면 웹 서버나 S3에 올려 보낼 수 있어 CDN의 은혜를 받을 수도 있고 OGP의 대응도 가능하다.Proerender는 같은 서비스를 사용하는 것이 더 좋을 것... JAMstackReactPrerender 사내 LT 발표 내용 요약 "JAMstack은~CMS 진화의 역사~" WordPressnuxt.jsNetlifynext.jsJAMstack