분류 Reactjs

Gatsby 시작하기 : 첫 번째 정적 사이트 구축

컨텐츠 정보

  • 조회 384 (작성일 )

본문

Jamstack 악 대차에 올라갈 생각이신가요? 대답이 '예'라면 가장 인기 있는 Jamstack 정적 사이트 생성기 중 하나 인 Gatsby가 바로 여러분이 찾고 있는 것일 수 있습니다. 다음은 Gatsby를 시작하기 위한 가이드입니다.


https://www.sitepoint.com/gatsby-guide/


JAM은 JavaScript, API 및 마크 업을 나타냅니다. 즉, 요청/응답주기 동안 사이트 또는 앱의 동적 부분은 클라이언트에서 JavaScript에 의해 처리되지만 모든 서버 측 프로세스는 JavaScript로 HTTPS를 통해 액세스 되는 API를 사용하여 수행되며 템플릿 마크 업은 종종 정적 사이트 생성기를 사용하여 배포 시간. 이것이 바로 Jamstack입니다. 성능이 뛰어나고 확장 비용이 저렴하며 더 나은 보안과 원활한 개발자 환경을 제공합니다.


정적 사이트를 사용하는 이유 


정적 사이트 모델은 모든 종류의 프로젝트에 적합하지는 않지만 적용되는 경우 많은 이점이 있습니다. 여기에 몇 가지가 있습니다.


속도 


웹 사이트가 처음으로 요청 될 때 브라우저에 로드 되는 데 걸리는 시간은 사용자 경험에 중요한 요소입니다. 사용자는 매우 빨리 참을성이 없고 느린 연결에서만 상황이 악화 될 수 있습니다. 데이터베이스 호출이 없고 콘텐츠가 미리 생성되어 정적 사이트가 정말 빠르게 로드 됩니다.

정적 사이트는 콘텐츠 전송 네트워크 (CDN)를 사용하여 전 세계에서 쉽게 제공 될 수 있는 정적 파일로 구성됩니다. 이를 통해 요청이 이루어지는 위치에 더 가까운 데이터 센터를 활용할 수 있습니다.


단순화 된 호스팅 


정적 사이트에 대한 호스팅을 즉시 설정할 수 있습니다. 지원할 데이터베이스나 서버 측 코드, 특수 언어 또는 프레임 워크가 없기 때문에 호스팅은 정적 파일을 제공하기 만하면 됩니다.


더 나은 보안 


서버측 코드나 데이터베이스가 없으면 해커가 해킹 할 수 있는 것이 없습니다. 보안 수정 및 패치를 통해 서버를 최신 상태로 유지하는 번거로움이 없습니다. 이 모든 것은 웹 사이트의 보안과 관련하여 훨씬 더 안심할 수 있음을 의미합니다.


더 나은 개발자 경험 


Netlify 또는 Vercel과 같은 호스팅 회사에서 정적 웹 사이트를 설정하는 것은 간단하며 지속적인 배포를 통해 변경 사항을 선택한 코드 저장소로 푸시 하기만 하면 라이브 버전에 즉시 반영됩니다.


개츠비란? 


Gatsby는 오늘날 웹 사이트 구축에 가장 많이 사용되는 도구 중 하나입니다. 정적 사이트 생성기 그 이상입니다. 사실 이것은 "웹 사이트와 앱을 만들기 위한 React 기반의 오픈 소스 프레임 워크"입니다. Gatsby는 React를 기반으로 구축 되었기 때문에 모든 React의 장점이 손끝에 있으며,이 강력한 라이브러리를 활용하여 정적 웹 사이트에 바로 대화 형 구성 요소를 구축 할 수 있습니다. Gatsby는 또한 GraphQL로 구축되었으므로 원하는 방식으로 데이터를 쿼리하고 웹 사이트에 표시 할 수 있습니다.


Gatsby 설치 및 프로젝트 생성 


Gatsby는 webpack을 사용하여 구성되지만 복잡한 설정 조작에 대해 걱정할 필요가 없습니다. Gatsby CLI가 모든 것을 처리합니다.


이 자습서에서는 Node.js가 로컬에 설치되어 있다고 가정합니다. 그렇지 않은 경우 노드 홈 페이지로 이동하여 시스템에 맞는 바이너리를 다운로드하십시오. 또는 버전 관리자를 사용하여 Node.js를 설치할 수도 있습니다. 여기에 버전 분석기 사용에 대한 자습서가 있습니다.


Node는 Node 패키지 관리자 인 npm과 함께 제공되며, 우리가 사용할 라이브러리 중 일부를 설치하는 데 사용할 것입니다. 여기에서 npm 사용에 대해 자세히 알아볼 수 있습니다.


명령 줄에서 다음 명령을 실행하여 둘 다 올바르게 설치되었는지 확인할 수 있습니다.


node -v
> 12.18.4

npm -v
> 6.14.8

가장 먼저 해야 할 일은 Gatsby CLI를 설치하는 것입니다. 이것은 몇 초 안에 Gatsby 사이트를 만들 수 있는 npm 패키지입니다. 터미널에 다음을 작성하십시오.


npm install -g gatsby-cli

컴퓨터에 Gasby CLI가 설치되어 있으면 웹 사이트를 만들 수 있습니다. 나는 그것을 sitepoint-demo라고 부를 것입니다. 그러나 당신이 원하는 대로 부르는 것은 자유롭습니다. 터미널에 다음을 입력하십시오.


gatsby new sitepoint-demo

Gatsby CLI가 필요한 모든 파일을 설치하고 적절하게 구성하면 사용자 정의하고 구축 할 수 있는 완전한 기능의 Gatsby 웹 사이트가 준비됩니다. 액세스하려면 sitepoint-demo 폴더로 이동하십시오.


cd sitepoint-demo

로컬 서버를 시작하십시오.


gatsby develop

마지막으로 http : // localhost : 8000에서 창을 열면 다음과 같은 멋진 Gatsby 사이트를 찾을 수 있습니다.


Gatsby default template 


웹 사이트를 빠르게 시작하고 실행하기 위해 Gatsby는 여러 공식 스타터 상용구와 그 주변의 강력한 커뮤니티에서 제공하는 스타터를 활용합니다. 방금 만든 사이트는 Gatsby 기본 스타터를 사용하지만 Gatsby 웹 사이트에서 더 많은 것을 찾을 수 있습니다.


기본 스타터와 다른 스타터를 사용하려면 다음 패턴에 따라 명령 줄에 URL을 지정해야 합니다.


gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]

예를 들어 사이트의 머티리얼 디자인 모양과 느낌을 원한다고 가정 해 보겠습니다. 생성하는 가장 빠른 방법은 터미널에 다음 명령을 입력하여 Gatsby Material Starter를 사용하는 것입니다.


gatsby new sitepoint-demo https://github.com/Vagr9K/gatsby-material-starter

이제 새로운 Gatsby 프로젝트의 파일을 살펴 보겠습니다.


Gatsby 사이트 내부 둘러보기 


시작하기 좋은 곳은 /src/ 디렉토리입니다. 여기에서 찾을 수 있습니다.


pages 디렉토리 


/src/pages/ 디렉토리에는 사이트 페이지가 포함됩니다. 각 페이지는 React 컴포넌트입니다. 예를 들어 사이트의 홈페이지 코드는 /pages/index.js에 있으며 다음과 같습니다.


import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const IndexPage = () => (
<Layout>
  <SEO title="Home" />
  <h1>Hi people</h1>
  <p>Welcome to your new Gatsby site.</p>
  <p>Now go build something great.</p>
  <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
    <Image />
  </div>
  <Link to="/page-2/">Go to page 2</Link>
  <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
</Layout>
)

export default IndexPage

이것이 React 컴포넌트의 일반적인 코드입니다.


구성 요소를 사용하면 UI를 독립적이고 재사용 가능한 부분으로 분할하고 각 부분을 개별적으로 생각할 수 있습니다. … 개념적으로 구성 요소는 JavaScript 함수와 같습니다. 임의의 입력 ( "props"라고 함)을 받아들이고 화면에 표시되어야 하는 내용을 설명하는 React 요소를 반환합니다. — React 문서. 


components 디렉토리 


/src/components/ 디렉토리는 웹 사이트의 일반 구성 요소를 찾을 수 있는 곳입니다. 기본 스타터는 헤더 (header.js), 이미지 (image.js), 레이아웃 (layout.js) 및 SEO (seo.js) 구성 요소와 함께 제공됩니다. 이러한 구성 요소를 자유롭게 맞춤 설정하고 동일한 디렉토리에 직접 추가 할 수 있습니다.


이제 새 사이트를 변경하고 취향에 맞게 사용자 지정할 준비가 되었습니다.


Gatsby 사이트를 변경하는 방법 


홈 페이지에 표시되는 메시지를 수정 해 보겠습니다. 코드 편집기에서 pages/index.js를 열고 <h1> 태그 아래의 두 단락을 다음 단락으로 바꿉니다.


<p>Welcome to my SitePoint Demo Site!</p>

물론 <p> 태그 사이에 원하는 텍스트를 추가 할 수 있습니다.


저장을 누르면 Gatsby의 핫 리로딩 개발 환경 덕분에 변경 사항이 브라우저에 표시됩니다. 즉, Gatsby 사이트를 개발할 때 페이지가 백그라운드에서 감시되므로 작업을 저장할 때 페이지 새로 고침이나 브라우저를 다시 시작할 필요 없이 변경 사항이 즉시 표시됩니다.


Gatsby를 사용하면 새 페이지를 쉽게 추가 할 수 있습니다. 예를 들어 /pages/ 디렉토리에 새 파일 about.js를 만들어 About 페이지를 추가하고 다음 내용을 입력 해 보겠습니다.


import React from "react"

const AboutPage = () => <h1>About Me</h1>

export default AboutPage

위의 코드는 일부 텍스트를 표시하는 React 기능 구성 요소입니다.


작업 내용을 저장하고 http://localhost:8000/about으로 이동하면 화면에 About Me <h1> 제목이 표시됩니다.


Gatsby Link 구성 요소를 사용하여 홈페이지에서 새 정보 페이지에 빠르게 연결할 수 있습니다. 작동 방식을 확인하려면 코드 편집기에서 index.js를 열고 </ Layout> 닫는 태그 바로 앞에 다음 코드를 찾으십시오.


<Link to="/page-2/">Go to page 2</Link>

다음으로 to 속성의 값을 /about/으로 바꾸고 Go to page 2 텍스트를 About으로 바꿉니다.


<Link to="/about/">About</Link>

작업을 저장하면 화면에 새 링크가 표시됩니다. 정보 링크를 클릭하면 정보 페이지로 이동합니다.


Gatsby는 내부 링크에 Link 구성 요소를 사용합니다. 외부 링크의 경우 일반 바닐라 HTML 웹 사이트에서와 같이 오래된 <a> 태그를 사용해야 합니다.


이제 몇 가지 스타일을 변경하여 Gatsby 사이트의 모양과 느낌을 실험 해 보겠습니다.


Gatsby 사이트 스타일링 


Gatsby는 웹 사이트에 스타일 규칙을 적용하기 위한 다양한 옵션을 제공합니다.


글로벌 스타일 시트 


익숙한 선택은 전체 웹 사이트에 적용되는 규칙이 포함 된 전역 .css 파일을 사용하는 것입니다. 시작하려면 /src/ 디렉토리에 /styles/ 디렉토리를 추가하고 여기에 global.css 파일을 추가하십시오 : /src/styles/global.css. 디렉토리와 스타일 시트 파일 모두에 대해 원하는 이름을 자유롭게 선택할 수 있습니다. global.css 안에 전체 웹 사이트에 적용될 다음 CSS 선언을 추가합니다.


body {
  background-color: yellow;
}

이제 작업을 저장하십시오. 죄송합니다. 아무 일도 일어나지 않았습니다! 어쨌든 아직. 작동하려면 추가 단계를 거쳐야 합니다. 코드 편집기에서 gatsby-browser.js를 열고 방금 만든 스타일 시트를 가져옵니다.


import "./src/styles/global.css"

브라우저로 돌아 가면 웹 사이트의 배경색이 밝은 노란색으로 바뀐 것을 볼 수 있습니다. 색상 선택으로는 이상적이지 않지만 작동합니다!


공유 레이아웃 구성 요소가 있는 전역 스타일 


전역 스타일 시트를 추가하고 gatsby-browser.js로 가져 오는 것은 잘 작동하지만 Gatsby 웹 사이트에 전역 스타일을 추가하는 권장 방법은 공유 레이아웃 구성 요소를 사용하는 것입니다. Gatsby Default Starter는 이 구성 요소 및 관련 스타일 시트와 함께 제공됩니다.


작동 방식을 확인하기 위해 gatsby-browser.js에서 위의 import 문을 삭제하고 파일을 저장해 보겠습니다. 웹 사이트의 배경이 흰색으로 되돌아 가야 합니다. 그런 다음 코드 편집기에서 layout.js 및 layout.css를 엽니 다 (두 파일 모두 components / 디렉토리에 있음).


layout.js의 맨 위에는 layout.css에 포함 된 CSS 규칙을 공유 레이아웃 구성 요소와 전체 웹 사이트에서 사용할 수 있도록 하는 import 문이 있습니다.


import "./layout.css"

layout.css에서 body 요소에 대한 CSS 선언을 찾습니다. 8 행 주위에 있어야 합니다. 다음과 같이 표시됩니다.


body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: hsla(0, 0%, 0%, 0.8);
  font-family: georgia, serif;
  font-weight: normal;
  word-wrap: break-word;
  font-kerning: normal;
  -moz-font-feature-settings: "kern", "liga", "clig", "calt";
  -ms-font-feature-settings: "kern", "liga", "clig", "calt";
  -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
  font-feature-settings: "kern", "liga", "clig", "calt";
}

이제 다음과 같이 배경색에 대한 규칙을 추가하십시오.


background-color: yellow;

작업을 저장하면 웹 사이트의 배경색이 다시 한 번 노란색으로 변하는 것을 볼 수 있습니다.


구성 요소 범위 스타일 : CSS 모듈 


CSS 모듈은 기본적으로 모든 클래스 이름과 애니메이션 이름이 로컬로 범위가 지정되는 CSS 파일입니다. 


CSS 모듈을 사용하면 스타일이 특정 구성 요소에만 적용되므로 구성 요소가 독립적으로 유지되므로 유지 관리 및 재사용이 쉽습니다.


CSS 모듈은 Gatsby와 함께 번들로 제공되며 문서는 일반적으로 Gatsby 구성 요소 및 React 구성 요소에 스타일을 추가하는 이러한 방법을 권장합니다.


정보 페이지에 멋진 단락 구성 요소를 추가하려면 다음 단계를 따르십시오.


멋진 단락 구성 요소 만들기 


Gatsby Default Starter 기반 프로젝트의 /components/ 디렉토리 내에 파일을 만들고 fancy-paragraph.js라고 이름을 지정합니다.


코드 편집기에서 fancy-paragraph.js를 열고 다음 코드를 입력합니다.


import React from "react"
import fancyParagraphStyles from "./fancy-paragraph.module.css"

const FancyParagraph = (props) => <p className={fancyParagraphStyles.fancy}>{props.paragraphText}</p>

export default FancyParagraph

이것은 간단한 React 기능 구성 요소입니다. 아직 생성하지 않은 멋진 단락 CSS 모듈을 가져 오는 문을 제외하고는 새로운 것이 없습니다.


구성 요소는 fancy-paragraph 모듈에 포함 된 스타일을 className 속성 내의 값으로 사용합니다. 보시다시피 이 값은 fancyParagraphStyles 객체의 속성으로 클래스 이름 인 .fancy를 사용하는 일반 JavaScript 객체와 매우 유사합니다. CSS 모듈에서 이 클래스의 스타일을 작성합니다.


Fancy Paragraph CSS 모듈 만들기 


/components/ 안에 다른 파일을 만들고 fancy-paragraph.module.css라고 합니다. 이 파일을 열고 원하는대로 .fancy 클래스의 스타일을 지정하십시오. 일반 CSS 일뿐입니다. 이것은 내 모습입니다.


.fancy {
  font-size: 1.5rem;
  text-align: center;
  line-height: 1.2;
  padding: 0.5rem;
  color: #fff;
  background-color: rebeccapurple;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
}

이제 Gatsby 사이트 어디에서나 멋진 스타일로 FancyParagraph 구성 요소를 사용할 준비가 되었습니다.


정보 페이지에 멋진 단락을 추가해 보겠습니다.


정보 페이지에 멋진 단락 구성 요소 추가 


이미 존재하는 React import 바로 아래에 있는 About 페이지에 다음 두 개의 import 문을 추가하여 시작하십시오.


import Layout from "../components/layout"
import FancyParagraph from "../components/fancy-paragraph"

위의 스니펫은 정보 페이지에서 사용할 Gatsby 레이아웃 구성 요소와 방금 만든 Fancy Paragraph 구성 요소를 정보 페이지에서 사용할 수 있도록 합니다.


다음으로 AboutPage 기능 구성 요소를 다음과 같이 수정합니다.


const AboutPage = () => (
<Layout>
 <h1>About Me</h1>
 <FancyParagraph paragraphText="Styled with CSS Modules." />
</Layout>
)

새 구성 요소는 다른 React 구성 요소처럼 작동합니다. 페이지를 표시하려는 정확한 위치에 두기 만하면 완료됩니다. 이 특정 구성 요소는 React props를 활용하여 단락 텍스트를 보다 동적으로 만듭니다.


작업 내용을 저장하고 정보 페이지로 이동하면 멋진 단락을 볼 수 있습니다. 내 모습은 다음과 같습니다.


About page styled with CSS Modules 

임무 완수!


구성 요소 범위 스타일 : 인라인 스타일 


JS 개체 형식의 인라인 CSS 스타일은 사용할 수 있는 추가 스타일 지정 옵션입니다.


Gatsby Default Starter 기반 프로젝트는 이 기술을 실제로 보여줍니다. 예를 들어, 편집기에서 index.js를 열고 IndexPage 구성 요소에서 다음 코드를 찾습니다.


<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
  <Image />
</div>

Image 구성 요소를 포함하는 <div>에 CSS 스타일이 어떻게 적용되는지 확인하십시오. 스타일은 CSS 속성 이름이 키이고 CSS 값이 해당 값인 JS 개체의 형태를 취합니다.


또한 복합 CSS 속성 이름이 대시 (-) 기호를 제거하고 대신 camelCase 규칙을 사용하는 방법을 확인하십시오. 예를 들어 CSS margin-bottom이 아닌 marginBottom입니다.


Gatsby 사이트에 콘텐츠 추가 


Gatsby로 구축하면 거의 모든 곳에서 데이터를 가져올 수 있다는 추가 이점이 있습니다. 결과적으로 일반적으로 Markdown에 의존하는 정적 사이트를 구축하는 데 국한되지 않고 팀이 선택한 백엔드를 사용하여 콘텐츠를 쉽게 관리 할 수 ​​있습니다.


과다한 전용 플러그인을 통해 Gatsby는 여러 소스 (예 : 파일 시스템, API, WordPress 등)에서 데이터를 가져와 웹 사이트에 제공 할 수 있는 하나의 데이터 레이어에 데이터를 결합 할 수 있습니다.


간단한 웹 사이트의 경우 Gatsby의 데이터 영역을 우회 하고 GraphQL 또는 소스 플러그인을 사용하지 않고 사이트를 채울 수도 있습니다. 비정형 데이터 접근 방식이라고도 하는 이 접근 방식을 사용하면 데이터를 가져와 createPages API 내의 createPage 작업에서 사용할 수 있습니다. API에서 데이터를 가져 오는 것이 JavaScript 개발자에게 충분히 익숙하기 때문에 GraphQL을 사용하는 것보다 더 매력적일 수 있지만 단점은 Gatsby 데이터 레이어를 제거한다는 것은 성능과 같은 많은 이점을 제거한다는 것을 의미합니다. , 개발 중 핫 리로딩, 빠른 이미지 최적화 등.


비정형 데이터 접근 방식에 대해 자세히 알고 싶다면 이 GitHub 저장소를 확인하세요.


Gatsby 페이지에 GraphQL 쿼리를 수동으로 입력 


거의 변경되지 않는 내용이 거의 없는 페이지가 한두 개있는 경우 위의 데모에서 했던 것처럼 텍스트를 바로 Gatsby 페이지로 하드 코딩 할 수도 있습니다.


사이트 제목 및 설명과 같은 간단한 데이터를 가져와야 하는 경우 GraphQL 쿼리를 페이지에 직접 입력 할 수 있습니다. 이렇게 하려면 http : // localhost : 8000 / ___ graphql에서 액세스 할 수 있는 GraphQL 쿼리를 생성하기 위한 GraphQL IDE (통합 개발 환경) 인 GraphiQL에 익숙해지는 것이 도움이 됩니다.


페이지에 사이트 제목을 표시하고 싶다고 가정 해 보겠습니다. 먼저 제목이 이미 gatsby-config.js 안에 있는지 확인하십시오. 제 것은 다음과 같습니다. 원하는 제목을 입력하거나 기본 제목을 그대로 둘 수 있습니다.


module.exports = {
  siteMetadata: {
    title: `SitePoint Demo Gatsby Site`,
    ...
  },
  ...

다음으로 GraphiQL의 도움으로 GraphQL 쿼리를 작성합니다. 마지막으로 시작 페이지 2 페이지 (src / pages / page-2.js)를 다음과 같이 변경합니다.


const SecondPage = ({data}) => (
  <Layout>
    <SEO title="Page two" />
    <h1>Welcome to {data.site.siteMetadata.title}</h1>
    <p>I have used a GraphQL query</p>
    <Link to="/">Go back to the homepage</Link>
  </Layout>
)

export const query = graphql`
  query testQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
`
export default SecondPage

GraphQL 쿼리의 결과를 포함하는 구성 요소에 데이터 소품을 전달하고 있습니다.


서버를 다시 시작하면 2 페이지 (http : // localhost : 8000 / page-2 /)에 표시된 사이트 제목을 볼 수 있습니다.


Site title data using GraphQL 

그러나 이 방법은 콘텐츠를 관리하는 사람이 코딩에 익숙한 경우에만 의미가 있습니다. 또한 언젠가 텍스트를 변경하기로 결정한 경우 프로젝트 디렉토리에서 페이지를 검색하여 수동으로 콘텐츠를 교체해야 합니다.


이 접근 방식에 대한 모든 세부 정보는 Gatsby 문서에서 읽을 수 있습니다.


파일 시스템에서 데이터 가져 오기 


gatsby-source-filesystem 플러그인을 사용하여 로컬 파일 시스템에서 Gatsby 애플리케이션으로 데이터를 가져올 수 있습니다. 이 접근 방식은 Jekyll 또는 Hugo와 같은 정적 사이트 생성기로 작업 한 사람들에게 친숙 할 수 있습니다.


코드 편집기에서 gatsby-config.js를 열어 쉽게 확인할 수 있으므로 Gatsby 기본 스타터에는 이 플러그인이 이미 설치되어 있습니다.


plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    }, ...

데이터를 소싱 한 후 파일 노드를 사이트에서 사용할 수 있는 다양한 데이터 유형으로 변환하는 데 도움이 되는 변환기 플러그인이 필요합니다. 예를 들어 JSON 데이터의 경우 gatsby-transformer-json, Markdown의 경우 gatsby-transformer-remark 파일 등.


Gatsby 문서의 이 섹션에서 모든 세부 사항을 찾으십시오.


Markdown 파일을 Gatsby 사이트의 데이터 소스로 선택한 경우 사이트에 MDX 지원을 추가하는 Gatsby 플러그인 인 gatsby-plugin-mdx를 사용하여 JSX 재사용 가능 구성 요소를 텍스트에 삽입 할 수 있는 옵션이 제공됩니다. 이점은 다음과 같습니다.


이는 플러그인을 구성 할 필요 없이 차트 또는 경고와 같은 구성 요소를 도입 할 수 있는 기능을 원하는 콘텐츠 기반 사이트에서 유용합니다. 구성보다 구성을 강조하고 대화 형 블로그 게시물, 문서화 디자인 시스템 또는 몰입 형 또는 동적 상호 작용이 있는 긴 형식의 기사에서 정말 빛납니다. — Gatsby 문서. 


헤드리스 CMS 


CMS는 콘텐츠 관리 시스템을 의미합니다. 기존 CMS는 백엔드 및 프런트 엔드 기능을 모두 제공합니다. 헤드리스 또는 분리 된 CMS는 자체적으로 백엔드로만 제한되므로 모든 프런트 엔드 문제는 개발자의 선호에 맡겨집니다. 이 배열은 개발자가 Gatsby, React 및 GraphQL 사용의 이점을 최대한 활용하는 동안 콘텐츠 팀 구성원이 좋아하는 관리 인터페이스를 계속 사용할 수 있도록 하므로 Gatsby와 같은 사이트 생성기에 이상적입니다.


WordPress, Drupal, Contentful, Sanity 등과 같은 인기 있는 CMS 플랫폼은 헤드리스 지원을 제공하며 Gatsby 에코 시스템은 통합에 도움이 되는 적절한 플러그인 및 가이드를 제공합니다.


선택한 CMS에서 데이터를 가져 오는 방법에 대해 자세히 알아 보려면 Gatsby 문서에서 이 문서를 확인하세요.


Gatsby 사이트 배포 


정적 웹 사이트를 매우 빠르고 편리하게 호스팅 하는 회사가 있습니다. 가장 인기 있는 것은 다음과 같습니다.


Netlify에 Gatsby 웹 사이트 배포 


Netlify를 사용하여 새로운 Gatsby 웹 사이트를 시작하겠습니다. Netlify는 "글로벌 배포, 지속적인 통합 및 자동 HTTPS를 결합한 올인원 워크 플로"를 제공합니다.


정적 웹 사이트 호스팅에 적합합니다.


먼저 Gatsby 프로젝트의 프로덕션 빌드를 만들어야 합니다. 이렇게 하려면 터미널에 다음 명령을 입력하십시오.


gatsby build

이제 웹 사이트가 브라우저에서 실행하는 데 필요한 모든 정적 파일을 포함하는 public이라는 폴더가 있습니다.


다음 단계는 Gatsby 프로젝트를 GitHub와 같은 저장소로 가져 오는 것입니다. Netlify는 GitHub, GitLab 또는 Bitbucket을 지원합니다. 코드에 변경 사항을 푸시 할 때마다 Netlify는 선택한 도구로 빌드를 실행하고 결과를 빠르게 로드 되는 CDN에 배포합니다.


시작하려면 Netlify에 로그인하고 Git에서 새 사이트를 선택하고 저장소를 선택하고 빌드 명령과 공용 폴더 이름을 입력 한 다음 사이트 배포를 클릭하십시오.


Gatsby 문서 웹 사이트의 이 기사에서 배포 프로세스를 자세히 검토 할 수 있습니다.


축하합니다. Gatsby 웹 사이트가 활성화되었습니다!


빌드 프로세스에 대해 조금 더 


배포하기 전에 빌드 명령을 실행하면 고성능 및 훌륭한 사용자 경험에 필요한 모든 최적화를 갖춘 Gatsby 기반 웹 사이트의 프로덕션 버전이 생성됩니다. 이 과정에서 Gatsby가 생성하는 정적 HTML 페이지는 차례로 React 애플리케이션으로 재수화됩니다. 즉, Gatsby 페이지가 웹 브라우저로 실행되면 JavaScript 코드가 다운로드되어 DOM 조작 등이 가능합니다. 즉, 사이트가 본격적인 React 앱이 됩니다.


Gatsby 문서에서 세부 사항을 읽을 수 있습니다.


개츠비 클라우드 


2019 년 Gatsby의 설립자인 Kyle Mathews는 Gatsby Cloud의 출시를 발표했습니다. 그의 말에 따르면 Gatsby Cloud는


웹 제작자가 더 나은 웹 사이트를 구축 할 수 있도록 하는 안정적이고 신뢰할 수 있는 도구의 상용 플랫폼입니다. Gatsby Cloud는 상호 운용 가능한 즉시 사용 가능한 솔루션으로 콘텐츠 메시 플랫폼을 강화하여 웹 사이트를 더 빠르게 시작하고 비즈니스 성공을 촉진합니다. — Gatsby Cloud 발표 


즉, Gatsby Cloud는 Gatsby 웹 사이트를 생성, 업데이트 및 배포 할 때 수많은 이점을 제공하는 클라우드 기반 인프라입니다. 기능은 다음과 같습니다.


  • Cloud Quickstart, 비전문 사용자가 CMS, 일부 더미 콘텐츠 및 Gatsby 스타터를 사용하여 몇 분 안에 프로젝트를 만들 수 있습니다.
  • Real-time Preview, 실시간으로 상황에 따라 변경 사항을 미리 볼 수 있으므로 웹 사이트에서 작업하는 팀 구성원 간의 의사 소통 및 공동 작업을 촉진 할 수 있습니다.
  • CMS Integrations, 수백 개의 콘텐츠 관리 시스템 및 API에 사용할 수 있는 플러그인을 활용하여 빠르고 간편합니다.
  • Incremental Builds, 2020 년 4 월에 도입 된 Gatsby Cloud 기능입니다. 선택한 CMS에서 데이터가 변경되면 증분 빌드는 필요한 것만 다시 빌드하여 결과적으로 상당한 성능 향상을 가져옵니다.

그리고 더 많은 것들이 ...


Gatsby 플러그인 


Gatsby의 많은 초강력은 플러그인에서 파생됩니다. Gatsby 플러그인은 npm을 사용하여 프로젝트에 설치할 수 있는 Node.js 패키지입니다. Gatsby 생태계는 거의 모든 것을 할 수 있는 수많은 플러그인을 제공합니다. 여러 소스에서 데이터를 가져와 Gatsby 웹 사이트에서 사용할 수 있도록 준비하는 플러그인의 역할에 대해 이미 다루었지만, 테마와 함께 사전 패키지 된 기능을 추가하고 Google Analytics와 같은 타사 서비스를 자동으로 통합하는 플러그인도 있습니다. React 구성 요소에서 페이지 생성, SCSS / Sass 파일 처리 등.


자바 스크립트가 당신의 빵과 버터라면, 당신 만의 플러그인을 만들어 볼 수도 있습니다. 자세한 내용은 Gatsby 플러그인 작성 페이지를 확인하십시오.


다음 단계 및 리소스 


실제로 Gatsby를 마스터하려면 웹 사이트로 이동하여 공식 자습서문서를 확인하십시오. 나는 그들이 최고 수준이라고 생각합니다.


또한 Gatsby를 최대한 활용하려면 GraphQL을 사용하여 데이터를 능숙하게 조작하는 것이 좋습니다. GraphQL 웹 사이트에서 멋진 튜토리얼을 활용하십시오.


마지막으로 Jamstack Foundations 컬렉션을 확인하세요. 여기에서 Jamstack에 대한 가이드와 Gatsby와 같은 Jamstack 도구가 학습에 가장 도움이 되도록 선별되어 있습니다.