GatsbyJS는 React 기반 프레임워크이지만, Gatsby 프로젝트에 일반(바닐라) JavaScript를 추가하는 방법을 알아두면 생각보다 유용합니다. 예를 들어 기존 웹사이트를 Gatsby로 마이그레이션했는데, 당장 React 문법으로 변환하기 부담스러운 자체 JavaScript 코드가 많이 남아 있다면 더욱 그렇습니다.
다행히 Gatsby에 순수 JavaScript를 추가하는 것은 전혀 어렵지 않습니다. 기본적으로는 프로젝트에서 보이지 않는 html.js 파일 하나만 노출하면 됩니다.
1. html.js 파일 노출하기
html.js 파일을 사용할 수 있도록 만들려면 터미널을 열고 Gatsby 프로젝트 루트 폴더로 이동한 뒤, 다음 명령어를 입력하세요.
cp .cache/default-html.js src/html.js이제 Gatsby 프로젝트의 src 폴더 안에서 html.js 파일을 확인할 수 있습니다.
2. script 태그 추가하기
html.js 파일을 열어보면 익숙한 HTML 문법으로 구성되어 있습니다. 기존 코드는 절대 건드리지 말고, dangerouslySetInnerHTML 속성이 붙어 있는 div 요소에 주목하세요. 우리는 바로 이 속성을 <script> 요소에 동일하게 적용할 것입니다.
아래 스니펫을 복사해서 html.js 파일의 닫는 body 태그인 </body> 바로 위에 붙여넣으세요.
<script
dangerouslySetInnerHTML={{
__html: `
console.log('Plain JavaScript inside Gatsby!');
`
}}
/>3. 결과 확인하기
변경 사항을 저장한 뒤 Gatsby 개발 서버를 시작하고, 이미 서버가 실행 중이라면 브라우저 탭을 새로고침하세요. 올바르게 따라 했다면 Chrome 콘솔에 다음 메시지가 출력됩니다.
Plain JavaScript inside Gatsby!4. 클릭 이벤트로 테스트하기
이번에는 script 요소 안에 alert 메시지가 뜨는 클릭 이벤트를 추가해 보겠습니다.
document.body.addEventListener('click', function() {
alert('JavaScript!')
})이제 페이지 어디를 클릭하든 "JavaScript!"라는 alert 창이 나타나는 것을 확인할 수 있습니다.
참고 자료
더 자세한 내용은 GatsbyJS 공식 문서의 커스텀 JavaScript 추가 가이드를 참고하세요.