[Gatsby] Basic

• 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   # `http://localhost:8000/404`
       ├─ about.jsx # `http://localhost:8000/about`
       └─ index.jsx # `http://localhost:8000`

• 페이지 이동은 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