외부 콘텐츠가 포함된 정적 웹사이트를 구축해 보겠습니다.
이 게시물에서는 GatsbyJS를 사용하여 모든 데이터 소스의 데이터를 정적 렌더링하는 방법을 보여 드리겠습니다.

개츠비JS

React를 즐기고 표준을 준수하는 고성능 웹을 원한다면 GatsbyJS를 살펴보세요.

무슨 일을 하나요?

React 코드를 정적 HTML 파일 모음으로 컴파일합니다.

왜 관심을 가져야 합니까?

1. 최대 성능 - 사용자가 웹을 볼 때 클라이언트나 서버 측에서 코드가 실행되지 않습니다!
2. 가장 빠른 이미지 - 사용자 기기에 적합한 해상도로 이미지를 점진적으로 로드합니다.
3. SEO - 정적 HTML은 Google(로봇) 친화적입니다. 느린 웹사이트는 Google 검색으로 인해 불이익을 받습니다!
4. React - 생산적인 프런트 엔드 개발.
5. Typescript - 사용자가 오류를 보기 전에 오류를 포착합니다(선택 사항이지만 강력히 권장됨)!
6. 콘텐츠 - 다양한 콘텐츠 소스를 즉시 연결하여 사용하거나 나만의 콘텐츠를 추가하세요!

개츠비 JS 콘텐츠

GatsbyJS는 콘텐츠를 노드 트리로 표현합니다. 노드는 이미지일 수도 있고 텍스트 블록일 수도 있습니다.
예를 들어 블로그 게시물은 텍스트 및 이미지 노드의 모음입니다.

gatsby-node.js 파일에서 직접 노드를 생성할 수 있습니다. 하지만 더 쉬운 방법이 있습니다.

플러그인

노드는 플러그인에 의해 생성됩니다. 필요한 플러그인은 선택한 CMS에 따라 다릅니다.
가장 간단한 옵션은 파일을 노드로 변환하는 파일 시스템 플러그인입니다.
귀하에게 적합한 플러그인을 찾으려면 여기를 살펴보세요

플러그인을 찾을 수 없습니다

기존 플러그인에서 다루지 않는 데이터 소스가 있다면 직접 만들어 보겠습니다.

과정은 상당히 간단하며, 복잡한 부분은 이미지뿐입니다.

노드 로드 중

gatsby 프로젝트 루트 폴더에 gatsby-node.ts(또는 js) 파일을 생성합니다.

시작하려면 이 코드를 추가하세요. gatsby 프로젝트가 빌드되면 sourceNodes 메소드가 자동으로 호출됩니다.

import { GatsbyNode } from "gatsby"
import { createRemoteFileNode } from "gatsby-source-filesystem"

export const sourceNodes: GatsbyNode["sourceNodes"] = async ({
    actions: { createNode },
    createNodeId,
    createContentDigest,
    store,
    cache,
}) => {
}

이제 데이터를 가져오겠습니다. 여기서는 https://inuko.net 앱 플랫폼을 사용하지만 프로세스는 모든 소스에서 유사합니다.

interface IPost {
    id: string;
    title: string;
    content: string;
    image_id: string;
}
const fetchPosts = async () => {
    const postQuery = {
        entity: {
            name: "cms_content",
            allattrs: true,
            links: [{
                name: "cms_site", from: "siteid", to: "id", alias: "cs",
                filter: { conditions: [{ attribute: "name", operator: "eq", value: "NAME_OF_MY_WEB" }] }
            }]
        }
    };
    const posts = await fetchJson("/api/fetch", postQuery) as IPost[];
    return posts;
}

그리고 필요한 이미지도 가져오겠습니다.

interface IImage {
    id: string;
    name: string; // sunset.jpg
    image_url: string; // https://sample.com/54565735235464322
}
const fetchImages = async () {
    const imageQuery = {
        entity: {
            name: "cms_image",
            allattrs: true,
            links: [{
                name: "cms_site", from: "siteid", to: "id", alias: "cs",
                filter: { conditions: [{ attribute: "name", operator: "eq", value: "NAME_OF_MY_WEB" }] }
            }]
        }
    };
    const images = await fetchJson("/api/fetch", imageQuery) as IImage[];
    return images;
}

이제 (블로그) 게시물 목록과 이미지 목록(링크)이 생겼습니다.
이 예에서는 각 게시물에 일부 텍스트 콘텐츠와 단일 이미지의 ID가 있는 간단한 구조가 있습니다.

다음 단계는 서버에서 얻은 데이터를 개츠비가 사용할 수 있는 데이터로 변환하는 것입니다.
gatsby의 데이터는 *노드*로 표현되므로, 서버 데이터를 노드로 변환하는 방법을 살펴보자.

export const sourceNodes: GatsbyNode["sourceNodes"] = async ({
    actions: { createNode },
    createNodeId,
    createContentDigest,
    store,
    cache,
}) => {

    const posts = await fetchPosts();
    const images = await fetchImages();
    // create an object for image by id lookup
    const imageDict = images.reduce((d, c) => (d[c.id] = c, d), {} as { [name: string]: IImage });

    for (const post of posts) {
        // create a node from post
        const postNodeId = createNodeId(`XPost-${post.id}`)

        if (post.image_id && imageDict[post.image_id]) {
            const image = imageDict[post.image_id];
            const name = image.name;
            const url = image.image_url;
            const fileNode = await createRemoteFileNode({
                url: url,
                //store,
                cache,
                createNode,
                createNodeId,
                // !!! important !!!
                // If your image url does not have a valid image extension, this will tell the system what type of image we are adding
                ext: name.substring(name.lastIndexOf(".")),
            });

            post.mediaFile___NODE = fileNode.id

            post.internalId = post.id; // copy our internal post. id is replaced by gatsbyjs

            const nodeMeta = {
                id: postNodeId,
                parent: null,
                children: [],
                internal: {
                    type: `XPosts`,
                    mediaType: `text/json`,
                    content: JSON.stringify(post),
                    contentDigest: createContentDigest(post),
                },
            }
            createNode(Object.assign({}, post, nodeMeta))
        }
    }
}

모든 게시물을 반복하고 각각에 해당하는 노드를 만듭니다.
게시물에 post.image_id 이미지가 있으면 우리는 또한 remoteFileNode 노드를 생성하고
포스트 노드에 추가합니다
post.mediaFile___NODE = fileNode.id

중요 참고: gatsby는 파일 노드에서 이미지 노드를 자동으로 생성하지만 그것이 이미지인지 감지하는 방법이 필요합니다.
URL에 파일 확장자가 포함되어 있거나 서버가 이미지 콘텐츠 유형으로 응답하면 모든 준비가 완료된 것입니다.
그렇지 않은 경우 파일 노드(png, jpg)에 명시적인 확장자를 설정하여 이미지 노드 생성을 트리거할 수 있습니다.
확장자: name.substring(name.lastIndexOf("."))

이미지 노드

왜 우리가 이미지를 노드로 로딩하는 데 어려움을 겪는지 궁금하실 것입니다. 이미지 URL을 직접 사용할 수도 있습니다.
예를 들어 이미지가 인증된 서비스 뒤에 있을 수도 있습니다.
하지만 진짜 이유는 gatsby가 제공하는 환상적인 이미지 플러그인을 사용하고 싶기 때문입니다.
웹사이트를 보는 모든 장치에 가장 적합한 형식과 크기로 이미지를 자동으로 변환합니다.
이는 이미지가 더 빨리 로드되고 더 좋아 보일 것임을 의미합니다(그리고 Google에서 더 나은 점수를 얻습니다:).

페이지에서 노드 사용

이제 생성한 노드를 사용할 준비가 되었습니다.
이를 수행할 수 있는 방법은 다양합니다. 이 예에서는 몇 가지 게시물을 기능 페이지에 렌더링합니다.

먼저 관심 있는 데이터 노드를 로드해야 합니다. useStaticQuery를 사용하겠습니다.
그런 다음 로드된 모든 게시물을 렌더링하는 재사용 가능한 구성 요소인 SectionGrid에 데이터를 전달합니다.

const FeaturePage = (props:{}) => {
    const data = useStaticQuery(graphql`
        query featuresQueryEn {
            allXPosts(
                filter: {language: {eq: "en"}, pageid: {label: {eq: "features"}}}
                sort: {position: ASC}
                ) {
              edges {
                node {
                  id
                  content
                  title
                  mediaFile {
                    childImageSharp {
                      gatsbyImageData
                    }
                  }
                }
              }
            }
          }
    `);

    return Features} />
}

렌더링 시간!

import { Link } from "gatsby";
import { GatsbyImage } from "gatsby-plugin-image";
import React from "react";

export const SectionGrid = (props: {data: any, title: string}) => {
    const edges = props.data.allXPosts.edges as any[];

    return 

        

            {props.title}
        
        {edges.map(edge => {
            const node = edge.node;
            return 

                

                    
                

                    
{node.title}
                    
{node.content}
                
            
        })}
    
}

이 구성요소는 쿼리에서 얻은 모든 노드를 반복합니다. 그리고 게시물 이미지용 div와 텍스트 콘텐츠용 div 두 개를 렌더링합니다.

그건 마무리야

멋지고 성능이 뛰어난 웹사이트를 구축하는 것이 그 어느 때보다 쉬워졌습니다.
Gatsbyjs(및 해당 플러그인)와 같은 도구는 우리를 위해 대부분의 무거운 작업을 수행합니다.
따라서 우리는 콘텐츠와 디자인에 100% 시간을 할애할 수 있습니다.

이 게시물을 통해 귀하의 작업 흐름을 더욱 자동화할 수 있기를 바랍니다.
이제 제품 카탈로그, 지식 기반 또는 기타 귀중한 콘텐츠를 웹사이트로 가져올 수 있습니다.
복사 파스타가 없고 완전 자동화된 이미지 처리가 가능합니다.

즐거운 해킹되세요!