개츠비 개술

어이, 나는 이미 게이츠비와 몇 주 동안 놀았다.이 노트는 깊이 있는 해석이 아니라, 단지 우리가 게이츠비에서 시작해야 할 것이다.
우리는 무엇을 조사할 것인가

초기 설정

초보자, 테마 및 플러그인

폴더 구조

플러그인 및 옵션 추가

그래픽 및 페이지 조회

그리고 게이츠비에 대한 개술.js 파일!

우리가 시작하기 전에, 우리는 몇 가지 일을 보아야 한다.

게이츠비는 무엇입니까?
게이츠비는 React와GraphQL을 사용하는 정적 사이트 생성기(SSG)다.그것은 최신 웹 표준을 따르고 고성능을 얻기 위해 최적화되었다.게이츠비에 대한 자세한 내용은 Official Website를 참조하십시오.

SSG 소개
SSG는 정적 사이트 빌더를 나타냅니다.SSG는 템플릿, 구성 요소 및 데이터를 수신하고 정적 HTML 페이지를 제공합니다.정적 사이트 생성기는 데이터베이스가 구동하는 내용 관리의 대체 방안이다.

1. 초기 설정
게이츠비를 설치하기 전에, 우리는 약간의 선결 조건을 설치해야 한다.

노드js

Nodejs는 자바스크립트가 실행될 때 V8 엔진에서 실행되고 웹 브라우저 밖에서 자바스크립트 코드를 실행합니다.
Windows 사용자 설치 노드https://nodejs.org/en/에서 온 js.
ubuntu 기반 시스템 설치 노드를 사용하는 Linux 사용자다음을 통해

   sudo apt install nodejs

Arch 기반 시스템 설치 노드를 사용하는 Linux 사용자다음을 통해

   sudo pacman -S nodejs

게이츠비cli

Gatsby CLI 도구를 사용하면 명령줄에서 Gatsby 명령을 실행할 수 있습니다.이것은 npm 패키지입니다. 설치해야 합니다.

   npm install -g gatsby-cli

Google 시스템에gatsby cli를 전체적으로 설치합니다.

Windows users need to run the following command to properly use gatsby-cli / any other globally installed npm package.

   Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted

2. 초보자, 주제 및 플러그인

무엇이 게이츠비 입문 사이트입니까?
게이츠를 배우기 시작하는 가장 간단한 방법은 Gatsby Starter Library 중의 초보자 템플릿을 사용하는 것이다.
이것들은 모두 미리 설정된 게이츠비 프로젝트로 모든 것이 배치되어 있어 사용할 수 있다.
Hello World starter는 기본 사전 구성 기능을 갖춘 기본 이니시에이터입니다.
그래서 이제 우리는 처음부터 새로운 게이츠비 사이트를 만들어야 한다.

    gatsby new [YOUR-PROJECT-NAME] https://github.com/gatsbyjs/gatsby-starter-hello-world

프로젝트 폴더에 cd를 넣습니다.

    cd [YOUR-PROJECT-NAME]

다음과 같은 방법으로 개발 서버를 실행합니다.

gatsby develop

또는

npm start

게이츠비 프로젝트에는 응답 이미지 플러그인, 구글 글꼴 주입 플러그인, 스타일 플러그인 등 사용할 수 있는 플러그인이 많다.
주제는 미리 구성된 기능, 데이터 소스 또는 미리 설계된 UI를 포함하는 플러그인입니다.

3. 폴더 구조
템플릿에서 새 게이츠비 사이트를 만들 때, 페이지 폴더를 포함하는 src 폴더를 볼 수 있습니다.이 폴더는 게이츠비 사이트의 루트를 책임진다.
이 폴더에서 만든 각 구성 요소는 URL 라우팅/(구성 요소 이름)을 생성합니다.
만약 우리가 구성 요소가 하나 있다면, 대략.js는 페이지 폴더에 있습니다.

import React from "react"

const About = () => {
  return <h1>The about page</h1>
}
export default NotFound

이것은 통과할 수 있다
404를 만들면js 파일, 요청한 경로를 찾지 못하면 서비스를 제공합니다.

4. 플러그인 및 옵션 추가
플러그인은 보통 npm 패키지 관리자로 설치됩니다.

npm install [PLUGIN-NAME]

게이츠비 설정에 설정합니다.js 파일

module.exports = {
  plugins: [
    //plugins are added here with the options they need
  ],
}

구글 글꼴 플러그인을 설치하고 싶다면

npm install gatsby-plugin-google-fonts

게이츠비 설정 중입니다.js 파일

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [
          `limelight`,
          `source sans pro\:300,400,400i,700`, // you can also specify font weights and styles
        ],
        display: "swap",
      },
    },
  ],
}

5.Graphql 및 페이지 쿼리
GraphQL는 페이스북이 개발한 검색 언어다.API와 상호 작용합니다.조회를 통해 우리는 요청에 필요한 모든 정보를 얻을 수 있다.
게이츠비는 Graphql을 사용하여 로컬 파일과 상호작용을 합니다.이것은 우리가 데이터 세션을 다시 사용할 수 있도록 허용한다.
우리는 게이츠비에서 두 가지 종류의 조회, 정적 조회, 페이지 조회를 사용할 수 있다.
정적 조회
useStaticQuery라는 react 갈고리를 사용하여 정적 검색을 할 수 있습니다.이것은 구축할 때 Graphql을 사용하여 데이터를 조회할 것입니다.
React hooks 클래스를 작성하지 않고state와 다른React 기능을 사용합니다.
갈고리에 대해 더 알고 싶어요React Hooks

const ComponentName = () => {
  const data = useStaticQuery(graphql`
    query {
      logo: file(relativePath: { eq: "logo.svg" }) {
        publicURL
      }
    }
  `)
  return <div><img src={data.logo.publicURL} alt="logo goes here"></div>
}

페이지 질의

export const PageQuery = graphql`
  query MyQuery {
    logo: file(relativePath: { eq: "logo.svg" }) {
      publicURL
    }
  }
`

const ComponentName=({data})=>{
  return <div><img src={data.logo.publicURL} alt="logo goes here"></div>

}

6. 개츠비 파일 개술

게이츠비 노드.js는 저희 사이트를 구축하는 과정에서 한 번 실행됩니다.
우리는 그것을 사용하여 페이지를 동적으로 만들고Graphql 노드를 추가할 수 있다

게이츠비 구성.js는 사이트의 모든 플러그인과 설정을 포함하고 사이트의 메타데이터를 포함합니다.

게이츠비 브라우저.js는 브라우저 이벤트에 응답하고 웹 사이트를 추가 구성 요소로 포장하는 데 사용됩니다.

게이츠비스.js는 서버 쪽 렌더링과 관련이 있습니다.이 파일을 사용하면 서버에서 정적 HTML 파일을 렌더링할 때 컨텐트를 변경할 수 있습니다.

자, 이것은 총결산입니다, 점원들!독서를 좋아하셨으면 좋겠어요!