Gatsby 페이지에서 React Helmet을 사용하여 로컬 JavaScript를 포함하는 방법 | Gatsby SEO 문제 해결

Gatsby 페이지에 로컬 JavaScript 포함하는 방법

Gatsby 개발자이며 React를 사용하고 있다면, Gatsby 페이지에 로컬 JavaScript 파일을 포함해야 하는 상황에 직면할 수 있습니다. 이 블로그 포스트에서는 이를 구현하기 위한 다른 방법을 탐색하고 발생할 수 있는 문제를 해결해보겠습니다.

방법 1: Static 폴더 사용

Gatsby는 번들된 코드 외부에서 외부 리소스나 스크립트를 포함할 수 있는 static 폴더를 제공합니다. 다음 단계를 따라 해보세요:

1. Gatsby 프로젝트의 루트에 static 폴더를 생성합니다.
2. JavaScript 파일(예: script.js)을 static 폴더 안에 넣습니다.
3. Gatsby 페이지 파일에서 필요한 종속성을 가져옵니다:

import React from "react";
import Helmet from "react-helmet";
import { withPrefix, Link } from "gatsby";

import Layout from "../components/layout";
import Image from "../components/image";
import SEO from "../components/seo";

4. react-helmet을 사용하여 React DOM에 스크립트를 추가합니다:

<Helmet>
    <script src={withPrefix('script.js')} type="text/javascript" />
</Helmet>

방법 2: Script Component 사용

더 유연한 접근 방식을 선호하는 경우, 상태 없는 ScriptComponent를 만들고 src 폴더에 배치할 수 있습니다:

import React, { useEffect } from 'react';

const ScriptComponent = ({ src, onScriptLoad = () => {}, appendToHead = false, timeoutDuration = 10, defer = false, isExternal = false }) => {

  useEffect(() => {
    setTimeout(() => {
      if (isExternal) {
        const script = document.createElement('script');
        script.src = src;
        script.onload = onScriptLoad;

        if (defer) {
          script.defer = true;
        } else {
          script.async = true;
        }

        if (appendToHead) {
          document.head.appendChild(script);
        } else {
          document.body.appendChild(script);
        }
      } else {
        // 내부 스크립트인 경우
        const myScript = require(src);
      }
    }, timeoutDuration);
  }, []);

  return null;
};

특정 페이지에서 ScriptComponent를 사용하려면, 해당 페이지의 컴포넌트에 추가하면 됩니다:

<ScriptComponent />

방법 3: Gatsby SSR 파일 사용

모든 컴포넌트나 페이지에 전역으로 스크립트를 포함하려면 Gatsby SSR 파일을 사용할 수 있습니다. 루트 폴더에 gatsby-ssr.js 파일을 생성하세요:

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script key="script1" src="script1.js" />,
    <script key="script2" src="script2.js" />,
  ]);
};

결론

static 폴더, 사용자 정의 스크립트 컴포넌트 또는 Gatsby SSR 파일을 활용하여 Gatsby 페이지에 로컬 JavaScript 파일을 포함할 수 있습니다. 이러한 방법은 유연성을 제공하며 외부 스크립트를 통합하거나 Gatsby 프로젝트 내에서 사용자 정의 스크립트를 원활하게 실행할 수 있게 해줍니다.

이 가이드가 로컬 JavaScript를 사용할 때 마주칠 수 있는 문제를 해결하고 극복하는 데 도움이 되었기를 바랍니다.

프로젝트와 개발 요건에 가장 적합한 방법을 선택하여 즐거운 코딩하세요!

참고 자료 : 

reactjs