정적 사이트 생성자란?

정적 사이트 생성자란?

정적 사이트 생성기는 원시 데이터와 템플릿 세트를 기반으로 완전한 정적 HTML 웹 사이트를 생성하는 도구입니다. 기본적으로 정적 사이트 생성기는 개별 HTML 페이지를 코딩하는 작업을 자동화하고 해당 페이지를 사용자에게 미리 제공할 수 있도록 준비합니다. 이러한 HTML 페이지는 미리 빌드되어 있으므로 사용자의 브라우저에서 매우 빠르게 로드될 수 있습니다.

정적 사이트 생성기는 웹 콘텐츠 관리, 웹 페이지 생성, 템플릿 구현을 위한 또 다른 유형의 도구인 콘텐츠 관리 시스템(CMS)의 대안입니다. (템플릿은 웹 콘텐츠에 재사용 가능한 형식이며, 개발자는 동일한 형식을 반복해서 작성하지 않으려고 템플릿을 사용합니다.) 정적 사이트 생성기는 일반적으로 JAMstack 웹 개발 접근 방식의 일부입니다.

정적 웹 사이트란?

정적 웹 사이트는 매번 같은 방식으로 로드되는 하나 이상의 HTML 웹 페이지로 구성됩니다. 정적 웹 사이트는 사용자의 위치, 하루 중 시간, 사용자 작업 등 변화하는 데이터 입력에 따라 다르게 로드되는 동적 웹 사이트와 대조됩니다. 정적 웹 페이지는 빠르게 로드할 수 있는 간단한 HTML 파일이지만, 동적 웹 페이지는 브라우저 내에서 JavaScript 코드를 실행해야 렌더링할 수 있습니다.

정적 사이트 생성기와 CMS의 차이점은?

인터넷 초창기에는 모든 웹 페이지가 미리 배치되고 하드 코딩된 정적 HTML 사이트로 웹 사이트가 저장되었습니다. 이는 개발자가 각 웹 페이지를 수동으로 코딩해야 했으므로 비효율적이었습니다.

개발자가 수동으로 설정하는 번거로움을 피할 수 있는 방법으로 콘텐츠 관리 시스템(CMS)이 등장했습니다. 페이지를 미리 코딩하는 대신 콘텐츠가 CMS 데이터베이스에 저장되며, 사용자가 페이지를 요청하면 서버에서 다음을 수행합니다.

1. 데이터베이스에 적합한 콘텐츠를 쿼리
2. 콘텐츠가 들어갈 템플릿을 식별
3. 페이지를 생성
4. 사용자에게 페이지 제공

CMS의 콘텐츠는 CMS 데이터베이스에서 제공하는 필드 중 하나에 맞아야 하지만, 그 필드에 맞으면 매번 웹 사이트의 적절한 위치에 표시되어야 합니다.

정적 사이트 생성기는 이 두 가지 접근 방식을 절충한 것입니다. CMS와 마찬가지로 개발자가 템플릿을 사용할 수 있고 웹 페이지를 자동으로 생성할 수 있지만, 웹 페이지 생성을 사용자의 요청에 응답해서 수행하지 않고 미리 수행합니다. 따라서 웹 페이지가 최종 사용자에게 즉시 전달될 준비가 되므로 웹 사이트 성능이 더 빨라집니다. 또한 CMS에서 제공하는 데이터베이스 필드에 제한을 받지 않으므로 개발자에게 더 많은 사용자 지정 기능이 제공니다.

정적 사이트 생성기 사용의 장단점은?

장점

• 성능: 정적 사이트 생성기는 온디맨드가 아니라 미리 웹 페이지를 생성하므로(CMS와 마찬가지로) 사용자 브라우저에서 웹 페이지가 약간 더 빨리 로드됩니다.
• 사용자 지정: 개발자는 원하는 템플릿을 어떤 것이라도 만들 수 있습니다.CMS에서 제공하는 필드나 CMS의 기본 제공 템플릿으로 제한되지 않습니다.
• 더 가벼운 백엔드: 정적 웹 사이트는 가볍고 서버 측에서 실행하는 데 많은 코드가 필요하지 않지만, CMS 기반 웹 사이트는 지속해서 서버 측에 콘텐츠를 쿼리합니다.

단점

• 미리 빌드된 템플릿이 거의 없거나 전혀 없음: 제약이 없는 사용자 지정의 단점은 시작하는 데 시간이 오래 걸릴 수 있다는 것입니다.많은 정적 사이트 생성기에는 템플릿이 제공되지 않으므로 개발자는 초기에 템플릿을 처음부터 구축하는 데 많은 시간을 투자해야 합니다.
• 사용자 친화적인 인터페이스가 없음: 개발자가 아닌 사용자는 정적 사이트 생성기를 사용하여 콘텐츠를 게시하기가 더 어렵습니다.CMS 인터페이스가 없으므로 포맷되지 않은 원시 데이터로 작업하는 것이 사용자에게 부담스러울 수 있습니다.또한 웹 사이트를 업데이트하려면 개발자 지원이 필요한 경우가 많습니다.

JAMstack은 정적 사이트 생성기와 어떤 관련이 있을까요?

JAMstack(JAM은 "JavaScript, API, Markup"의 약자임)은 가볍고 빠른 성능의 웹 애플리케이션을 효율적으로 제작하기 위한 방법입니다. JAMstack 애플리케이션은 모든 백엔드 기능에 API를 사용하는 정적 애플리케이션입니다. 정적 사이트 생성기를 사용하면 개발자가 JAMstack 애플리케이션 프런트엔드를 빠르게 구축할 수 있습니다.

정적 사이트 생성기와 프런트엔드 프레임워크는 어떻게 사용될까요?

프런트엔드 프레임워크는 웹 사이트의 디자인 및 서식 설정에 도움이 되는 미리 빌드된 코드의 파일 및 폴더 모음입니다. 일반적인 프런트엔드 프레임워크에는 Bootstrap, React, Vue.js 등이 있지만, 그 외에도 여러 가지가 있습니다.

프런트엔드 프레임워크는 개발자가 처음 웹 사이트를 구축할 때 매우 유용합니다. 그러나 개발자가 추가 도구를 사용하지 않는 한, 프런트엔드 프레임워크 자체에서는 HTML 웹 페이지가 생성되지 않습니다. 정적 사이트 생성기는 개발자가 프레임워크와 함께 사용하여 완전히 디자인된 웹 사이트 또는 애플리케이션을 빠르게 사용할 수 있도록 준비할 수 있습니다. 대부분의 정적 사이트 생성기는 개발자가 원하는 프레임워크를 사용할 수 있도록 허용합니다.

마크다운이란?

마크다운은 텍스트 서식을 설정하는 데 널리 사용되는 간단한 마크업 언어입니다. 오늘날 많은 개발자가 콘텐츠를 코딩할 때 기존 HTML보다 마크다운을 선호하며, 많은 정적 사이트 생성기에서 마크다운이 지원됩니다.

일반적으로 사용되는 정적 사이트 생성기에는 어떤 것이 있을까요?

현재 많은 정적 사이트 생성기를 사용할 수 있습니다. 알아야 할 몇 가지 중요한 사항은 다음과 같습니다.

• Jekyll
• Gatsby
• Hugo
• Next.js
• Eleventy

Cloudflare Pages는 인터넷에 연결된 전 세계의 99%에서 100ms 이내에 있는 Cloudflare 전역 네트워크에서 호스팅되어 최종 사용자에게 거의 즉각적인 콘텐츠 전송이 가능합니다.Cloudflare Pages는 Cloudflare Workers 서버리스 기능을 기반으로 구축되며 개발자가 가볍고 확장 가능한 웹 애플리케이션을 구축할 수 있도록 지원합니다.

Jekyll 사이트, Gatsby 사이트, Hugo 사이트 등을 Cloudflare Pages를 사용하여 배포하는 방법을 알아보세요.