Gatsby 설치 및 사용 방법에 대해 알아보겠습니다.
Gatsby(개츠비) 란
개츠비는 리액트 기반의 프레임워크입니다. 리액트를 이용하면서도 리액트에 새로운 규칙 몇 가지를 추가해 주면서 아주 약간의 복잡함을 더해주고 있습니다.
주로 서버사이드 렌더링을 위해 사용하는 Next.js 와는 달리 개츠비는 서버 없이, 오로지 정적 웹사이트 생성을 위해 사용하는 오픈소스 프레임워크입니다.
정적 웹 페이지, 플랫 페이지는 저장된 그대로 사용자에게 전달되는 웹 페이지로서, 이는 웹 애플리케이션에 의해 생성되는 동적 웹 페이지와 반대되는 용어이다.
즉, 정적 웹 페이지는 모든 상황에서 모든 사용자에게 동일한 정보를 표시하며, 콘텐츠 타입이나 문서 언어의 협상(negotiate)을 위해 웹 서버의 현대적 기능에 종속된다. 위키백과
서비스 및 블로그, 포트폴리오 등에서 많이 사용됩니다.
설치
Gatsby를 사용하기 위해 gatsby-cli를 설치합니다.
1 | $ npm install -g gatsby-cli |
1 | Gatsby requires Node.js 18.0.0 or higher (you have v14.17.5). |
개츠비를 사용하려면 Node.js 18 이상 버전이 필요합니다. 버전이 낮다면 위와 같은 에러가 발생합니다.
프로젝트 생성
Gatsby CLI를 사용하여 프로젝트를 만듭니다.
1 | $ npm init gatsby |
또는
1 | $ gatsby new |
위의 명령어를 실행하면 프로젝트 생성을 위한 여러 가지 입력하는 부분이 있습니다. 순서대로 입력하면 프로젝트가 생성됩니다.
- 프로젝트 명을 입력합니다.
- 디렉터리를 확인합니다.
- JavaScript 쓸 건지 TypeScript 쓸 건지 선택합니다.
- 사용할 CMS를 선택합니다. 사용하지 않을 경우 No를 선택합니다.
- 사용할 styling system(Sass, Emotion, styled-components 등…)을 선택합니다.
- 구글 애널리틱스, 반응형 이미지나 사이트맵 등을 추가할 것인지 묻습니다. 없다면 Done을 선택합니다.
CMS 는 비개발자인 사람들이 콘텐츠를 계속 올리는 웹사이트 혹은 앱입니다.
실행
다음 명령어를 실행합니다.
1 | $ cd my-gatsby-site/ |
완료가 되면 사이트를 접속해서 확인합니다.
1 | ... |
빌드
빌드를 진행하면 축소된 파일, 변환된 이미지, 페이지별 정보와 데이터가 있는 JSON 파일, 페이지별 정적 HTML 등이 모두 포함됩니다.
최적화가 잘되어 있어 빠르게 로드되는 정적 웹사이트를 배포할 수 있습니다.
1 | $ npm run build |
결론
개츠비 설치와 기본적인 사용 방법에 대해서 정리하였습니다. 나만의 블로그를 만들고 싶을 때 사용하면 좋을 것 같습니다.
Gatsby Plugin Library
Gatsby 사이트나 앱을 커스텀할 수 있는 기능을 제공하는 라이브러리들입니다.