Gatsby
는 빠르고 안전하며 강력한 웹사이트 빌드를 돕는 리액트 베이스의 프레임워크이다.
- 정적 사이트를 만드는데 유리하다.
- 빌드하는 시점에 콘첸츠를 불러와 이미 포함된 웹사이트를 만든다.
- 기존
React.js
앱은 유저가 브라우저에 접속했을 때 JS
를 다운로드 받아 화면에 뿌린다.
- 인터넷 속도가 느리거나
JS
를 중지했을 때, 유저는 빈 화면만 보게 된다.
Gatsby
를 빌드하면 JS
로 작성한 html
코드를 정적 파일로 만든다.
React.js
로드 전에 화면을 먼저 보여주고, 이후에 상호작용할 수 있다.
install
npm i -g gatsby-cli
를 먼저 설치해 gatsby cli
를 사용할 수 있도록 환경을 구성한다.
gatsby new
로 새 프로젝트를 생성하고, 필요한 옵션을 설정한다.
gatsby v5
기준으로 Node.js v18
이상을 필요로 한다.
New Pages
pages
폴더 안에 생성한 파일명을 경로로 사용한다.
New Project/
└─ src/
└─ components/
└─ pages/
├─ 404.jsx
├─ about.jsx
└─ index.jsx
- 페이지 이동은
gatsby
의 Link
를 이용한다.
import { Link } from "gatsby";
import React from "react";
export default function Navigation(){
return (
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
)
}
Head 설정
- 각 페이지에
title
태그를 리턴하는 Head
함수를 export
한다.
import React from "react";
export default function IndexPage() {
return (
<div>Hello Gatsby!</div>
);
};
export function Head() {
return <title>반갑 개츠비!</title>;
}
참고
노마드코더 - 리액트JS 마스터 클래스
Gatsby Docs