GatsbyJS 사이트에 사용자 정의 JavaScript를 추가하는 방법

GatsbyJS는 React 프레임워크이지만 Gatsby 프로젝트에 사용자 정의 JavaScript를 추가하는 방법을 아는 것이 유용할 수 있습니다. 아마도 당신은 방금 이전 웹사이트를 Gatsby로 옮겼고 지금 당장 ReactJS 구문으로 변환하는 것을 좋아하지 않는 많은 사용자 정의 바닐라 JavaScript를 가지고 있을 것입니다.

다행스럽게도 일반 JavaScript를 Gatsby에 추가하는 것은 전혀 어렵지 않습니다†. 간단한 파일 html.js만 노출하면 됩니다. , 기본적으로 Gatsby 프로젝트에는 표시되지 않습니다.

html.js를 노출(사용 가능하게)하려면 파일을 열고 터미널을 열고 Gatsby 프로젝트 폴더의 루트로 이동하여 다음을 입력합니다.

cp .cache/default-html.js src/html.js

이제 html.js src에서 사용할 수 있습니다. Gatsby 프로젝트의 폴더

html.js 내부 파일에는 아마 여러분이 인식할 수 있는 HTML 구문이 많이 있습니다. 기존 코드를 건드리지 말고 dangerouslySetInnerHTML이 있는 div 요소에 주의하세요. 기인하다. <script>와 함께 동일한 속성을 사용해야 합니다. 요소.

다음 스니펫을 위 바로 복사하여 붙여넣으세요. html.js 파일의 닫는 본문 태그 </body> :

<script
  dangerouslySetInnerHTML={{
    __html: `
    console.log('Plain JavaScript inside Gatsby!');
`
  }}
/>

변경 사항을 저장하고 Gatsby 서버를 시작하거나 Gatsby가 이미 실행 중인 경우 브라우저 탭을 새로 고칩니다. 올바르게 수행했다면 크롬 콘솔에 다음 메시지가 표시되어야 합니다.

Plain JavaScript inside Gatsby!

스크립트 요소 내부에 경고 메시지가 있는 클릭 이벤트를 추가해 보십시오.

document.body.addEventListener('click', function() {
  alert('JavaScript!')
})

이제 페이지의 아무 곳이나 클릭하면 "JavaScript!"라는 경고 메시지가 팝업되어야 합니다.

리소스:

(사용자 정의 JavaScript 추가)[https://www.gatsbyjs.org/docs/custom-html/#adding-custom-javascript]