Gatsby 설치 및 사용 방법

Gatsby 설치 및 사용 방법에 대해 알아보겠습니다.

Gatsby(개츠비) 란

개츠비는 리액트 기반의 프레임워크입니다. 리액트를 이용하면서도 리액트에 새로운 규칙 몇 가지를 추가해 주면서 아주 약간의 복잡함을 더해주고 있습니다.

주로 서버사이드 렌더링을 위해 사용하는 Next.js 와는 달리 개츠비는 서버 없이, 오로지 정적 웹사이트 생성을 위해 사용하는 오픈소스 프레임워크입니다.

정적 웹 페이지, 플랫 페이지는 저장된 그대로 사용자에게 전달되는 웹 페이지로서, 이는 웹 애플리케이션에 의해 생성되는 동적 웹 페이지와 반대되는 용어이다.
즉, 정적 웹 페이지는 모든 상황에서 모든 사용자에게 동일한 정보를 표시하며, 콘텐츠 타입이나 문서 언어의 협상(negotiate)을 위해 웹 서버의 현대적 기능에 종속된다.
위키백과

 

서비스 및 블로그, 포트폴리오 등에서 많이 사용됩니다.

설치

Gatsby를 사용하기 위해 gatsby-cli를 설치합니다.

$ npm install -g gatsby-cli

Gatsby requires Node.js 18.0.0 or higher (you have v14.17.5).
Upgrade Node to the latest stable release: https://gatsby.dev/upgrading-node-js

개츠비를 사용하려면 Node.js 18 이상 버전이 필요합니다. 버전이 낮다면 위와 같은 에러가 발생합니다.

프로젝트 생성

Gatsby CLI를 사용하여 프로젝트를 만듭니다.

$ npm init gatsby

또는

$ gatsby new

위의 명령어를 실행하면 프로젝트 생성을 위한 여러 가지 입력하는 부분이 있습니다. 순서대로 입력하면 프로젝트가 생성됩니다.

1. 프로젝트 명을 입력합니다.
2. 디렉터리를 확인합니다.
3. JavaScript 쓸 건지 TypeScript 쓸 건지 선택합니다.
4. 사용할 CMS를 선택합니다. 사용하지 않을 경우 No를 선택합니다.
5. 사용할 styling system(Sass, Emotion, styled-components 등..)을 선택합니다.
6. 구글 애널리틱스, 반응형 이미지나 사이트맵 등을 추가할 것인지 묻습니다. 없다면 Done을 선택합니다.

CMS는 비개발자인 사람들이 콘텐츠를 계속 올리는 웹사이트 혹은 앱입니다.

실행

다음 명령어를 실행합니다.

$ cd my-gatsby-site/
$ npm run develop

완료가 되면 사이트를 접속해서 확인합니다.

...
You can now view dev-stickers in the browser.

  http://localhost:8000/

빌드

빌드를 진행하면 축소된 파일, 변환된 이미지, 페이지별 정보와 데이터가 있는 JSON 파일, 페이지별 정적 HTML 등이 모두 포함됩니다.

최적화가 잘되어 있어 빠르게 로드되는 정적 웹사이트를 배포할 수 있습니다.

$ npm run build

결론

개츠비 설치와 기본적인 사용 방법에 대해서 정리하였습니다. 나만의 블로그를 만들고 싶을 때 사용하면 좋을 것 같습니다.

Gatsby Plugin Library

Gatsby 사이트나 앱을 커스텀할 수 있는 기능을 제공하는 라이브러리들입니다.

• https://www.gatsbyjs.com/plugins

참고

• Documentation
• Tutorials
• Guides