개츠비는 무엇입니까?

최근에 나는 Gatsby에 대해 깊은 흥미를 가지게 되었는데, 이것은 더욱 유행하는'정적 사이트 생성기'이다.이것은 Active Server Pages에서 태어난 사람이다. 그는 Cold Fusion에서 열심히 연구하고 PHP를 섭렵하며 ASP로 수많은 기업 응용 프로그램을 구축했다.순액
이 모든 웹 기술의 공통점은 동적 특성이다.그들은 데이터베이스를 직접 조회하여 사용자로부터 정보를 수집하고 동적 디스플레이 데이터를 제공하며 사람을 황홀하게 하는 애니메이션 사용자 체험을 제공한다.그렇다면 왜 나는 정적 사이트를 쓰는 근원으로 돌아가야 하는가?

<P><FONT FACE="Comic Sans" COLOR="Red"><B>Rob's Backstreet Boys Fanpage</B></FONT></P>
<P><IMG SRC="Nick_Carter.jpeg"></IMG></p>

정적 사이트는 90년대 것이기 때문이죠?Jekyll은 마케팅 페이지와 블로그에만 적용됩니다.정당하다

말할 것도 없이'정적 사이트'의 의미에 대한 선입견 위주의 개념은 하나의 방식, 하나의 방식, 하나의 방식이다.

게이츠비는 동적 정적 사이트 생성기이다😅

Gatsby는 정적 사이트 생성기(마성이공대학 허가)를 오픈하여 React, GraphQL과 다른 전방 친선 도구(예를 들어 웹팩과 React router)를 바탕으로 성능이 좋은 사이트를 구축할 수 있도록 합니다.
예, 정적 사이트 생성기입니다.그러나 이것은 우리가 이 유행이 지난 용어를 사용한 마지막이다.인터넷에서 정적이니까!변하지 않다.이것은 내가 배워야 할 첫 번째 과목이다.

나에게 있어서 개츠비를 모색하는 것은 관건적인 능력과 장점을 이해하는 것을 의미한다.

🏎️ 빠른 응용 프로그램.게이츠비는 코드 분할, 축소, 기타 최적화를 이용했다.응용 프로그램은 PWA를 지원하고 속도를 위해 구축됩니다.

⚒️ 놀라운 DX.게츠비는 도구 구성을 단순화하고 최소한의 템플릿 파일을 가지고 있다.열을 다시 불러오는 것은 작용만 한다™.

🔌 다양한 플러그인 옵션구글 분석 지원을 추가해야 합니까?하나plugin for that가 있다.

🥇 React는 성숙한 기술 위에 세워져 객관적으로 가장 유행하는 전단 구조이다.GraphQL은 쿼리 API의 표준입니다.

Gatsby empowers developers to build blazing fast web apps with a somewhat-opinionated way of using React and GraphQL. It has an unparalleled developer experience to boot.

내가 너에게 증명할 수 있는지 없는지를 봐라.

가장 간단한 개츠비 사이트

우리가 시작하기 전에, 게이츠비 응용 프로그램이 여전히 React 응용 프로그램임을 알아야 한다.너는 React로 어떤 일을 하든지 할 수 있고, 너는 여전히 게이츠비로 할 수 있다.
설치:

$ npm install -g gatsby-cli

템플릿 개츠비 응용 프로그램을 만들려면 다음과 같이 하십시오.

$ gatsby new my-first-gatsby-app

새로 만든 디렉터리에 들어가려면 다음과 같이 하십시오.

$ cd my-first-gatsby-app

마지막으로 개발 서버를 시작합니다.

$ gatsby develop

이것은 응용 프로그램의 개발 구축을 실행하고 로컬http://localhost:8000에서 제공할 것이다.

NOTE: The other link you see in your terminal is this: http://localhost:8000/___graphql. GraphiQL provides a web interface to test your GraphQL queries, which are critical to Gatsby apps.

your favorite editor에서 생성된 프로젝트 디렉터리를 열고 src 디렉터리를 확장하면 다음과 같은 내용을 볼 수 있습니다.

React에 대한 가장 기본적인 경험이 있는 사람은 누구나 이해할 수 있습니다 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>
  </Layout>
)

export default IndexPage

나는 혐오스러운 점수 결여를 제외하고는 그것의 외관을 좋아한다.😀

개츠비의 페이지

pages 디렉토리에서 404.js, index.js 및 page-2.js 을 볼 수 있습니다.네, 이것들은 반응 성분입니다.그러나 게이츠비는 자동으로 이 구성 요소를 실제 URL이 있는 실제 웹 페이지로 변환합니다.
따라서 page-2 의 내용을 수동으로 보려면 index 의 링크를 클릭하지 말고 브라우저에 http://localhost:8000/page-2 를 입력하십시오.

게이츠비 링크 구성 요소

하지만 응용 프로그램 주변에서 사람들을 어떻게 움직이고 싶은지 봅시다.그것은 <Link> 구성 요소에서 시작됩니다.사이트의 다른 페이지를 가리키는 링크를 만들 수 있도록 하는 이유입니다.이게 맞습니다!React의 경로에 대한 나의 이해는 이것이 열혼란이기 때문에 게이츠비는 이용을 선택한다@reach/router.<Link>는 연결 구성 요소를 둘러싼 포장입니다.
사용<Link>에 관해서 내가 가장 좋아하는 부분은 기본적으로 프리페치를 사용하는 것이다.우리의 장면에서, 이것은 page-2 이 미리 불러올 것이며, 사용자가 브라우저의 링크를 클릭할 때 거의 즉시 사용할 수 있다는 것을 의미합니다!개츠비 파일:

We use an IntersectionObserver to fetch a low-priority request when the Link is in the viewport and then use an onMouseOver event to trigger a high-priority request when it is likely that a user will navigate to the requested resource.

개츠비의 이미지 최적화 (플러그인 FTW까지!)

개츠비의 대부분의 힘은 그것에서 나온다extensive collection of plugins.
Image 구성 요소 gatsby-image 플러그인에서 동력을 제공하는 것) 는 우리 starter 응용 프로그램의 일부입니다.gatsby-image 게이츠비의 핵심 이미지 최적화 기능과 일부 기이한 이미지 로드 기술을 이용하여 귀하의 사이트에 자동으로 이미지를 최적화합니다.gatsby-image 구성 요소와 일반 <img> 요소를 사용하는 이유는 무엇입니까?

게으르게 그림을 불러옵니다.

먼저 이미지의 이터레이션을 로드하고 [흐림] 효과를 전체 이미지로 로드합니다.

소비 설비를 바탕으로 가장 좋은 이미지 크기를 사용합니다.

브라우저가 지원되는 경우 WebP를 사용할 수 있습니다.

NOTE: This isn't a replacement for a service like Cloudinary, but does provide some quick zero-config optimizations of static images in your app.

개츠비 사이트를 설계하다

너는 게이츠비의 사이트가 여전히 반응 사이트일 뿐이라는 것을 알고 있니?즉, 요소의 내연 스타일을 계속 수행할 수 있습니다.

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

근데 식었어.😎
글로벌 CSS 파일을 사용하시겠습니까?src/styles/global.css 파일을 만들고 가져오기 gatsby-browser.js:

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

당신은 당신의 사이트에서 여러 페이지의 레이아웃을 사용합니까?이것은 더 흔히 볼 수 있는 장면이기 때문에 Gatsby는 CSS 파일을 Layout 구성 요소에 분배할 수 있습니다. (물론 하나의 Layout 구성 요소는 한 페이지에서 가져올 수 있습니다.)
우리의 시작 프로그램에서 layout.js 구성 요소와 layout.css 파일을 볼 수 있습니다.index.js 에서는 Layout 요소의 가져오기 및 사용을 볼 수 있습니다.

const IndexPage = () => (
  <Layout>
    ...

Layouts are a whole beast 자체지만 이것은 배워야 할 관건적인 개념이다.

핫 로드 및 개발자 경험

게이츠가 진정으로 뛰어난 점은 개발자 체험(DX)이다.내 말을 되풀이하다: 열을 다시 싣는 것은 작용만 할 뿐이다™.<Layout> 에서 index.js 을(를) <h1>Hi people</h1> 로 변경합니다.브라우저를 보십시오.😍
CLI 디스플레이도 간단명료하여 지루하지 않습니다.오류가 발생하면 디버그 메시지에 잠기지 않습니다.

마지막으로 가장 중요하지 않은 것은 아닐 것이다the docs are top-notch.너는 단지 이렇게 원시적인 문서를 자주 보지 못할 뿐이다.

GraphQL 및 개츠비

게이츠비가 어떻게 의존하는지GraphQL.농담 아니에요.GraphQL은 원격 데이터 작업뿐만 아니라 로컬 파일 자산을 조회하는 데도 사용됩니다.
전역 사이트의 제목을 고려할 때 다음 개념의 간단한 예는 이해하기 쉽다.사이트의 각 페이지에 다시 입력 <h1>Rob's Backstreet Boys Fanpage</h1> 하지 않고 파일에 저장하여 GraphQL로 조회한 다음 Rob's Backstreet Boys Fanpage 을 통해 공개할 수 있습니다.
업데이트 Layout 의 siteMetadata 노드 및 변경 gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `Rob's Backstreet Boys Fanpage`,
    description: `Kick off your next, great Gatsby project with this default starter.`,
    author: `@gatsbyjs`,
  },

NOTE: When you change certain Gatsby configs, you'll have to restart your server with $ gatsby develop to see the updates.

title 에서 미리 존재하는 GraphQL 질의를 볼 수 있습니다.

const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
`)

...layout.js 요소에 해당하는 속성이 있습니다.

<Header siteTitle={data.site.siteMetadata.title} />

경천동지?아니요. 그러나 이것은 GraphQL의 강력한 기능을 이용하여 사이트에 어떻게 지원하는지에 관한 여러 가지 예시 중 하나입니다.

요컨대 개츠비

비록 나는 게이츠비에 대해 아직 익숙하지 않지만, 나는 그것이 사이트 개발의 모범적인 변화가 될 수 있다고 믿는다.세계가 더욱 이동화되고 성능이 더욱 관건이 됨에 따라 우리는 게이츠비와 같은 프레임워크로 개발자들이 선두를 유지하도록 도와야 한다.