[Gatsby] Gatsby start

Gatsby(이하 개츠비)는 React를 기반으로 한 웹 사이트 생성 프레임워크 입니다.

개츠비에 대한 소개는 아래 공식 웹 페이지에서 더 자세한 내용을 확인할 수 있습니다.

Gatsby

 

이번 글에서는 개츠비를 사용하여 웹 페이지를 생성하는 과정을 간단하게 살펴보도록 하겠습니다.

 

---

 

1. Node.js 설치

 

개츠비는 Node.js기반 프레임워크입니다.

Node.js

 

노드가 설치되어 있지 않다면, 위 링크를 통해 설치할 수 있습니다.

본 글에서 사용된 노드의 버전은 18.17.1입니다.

 

2. Git 설치

 

개츠비 프로젝트는 VCS로 Git을 사용합니다.

아래 문단에서 확인할 수 있지만, 개츠비 프로젝트를 생성할 때 자동으로 git이 생성됩니다.

Git

 

Git은 위 링크를 통해 설치할 수 있습니다.

본 글에서 사용된 Git의 버전은 2.40.1입니다. 

 

3. Gatsby cli 설치

 

개츠비는 npm으로 설치할 수 있습니다.

위 문단의 과정을 통해 Node.js를 정상적으로 설치했다면, 다음 명령어를 콘솔에 입력하여 설치할 수 있습니다.

npm install -g gatsby-cli

 

이후 개츠비가 정상적으로 설치되었다면 다음 명령어를 통해 버전을 확인할 수 있습니다.

gatsby --version

 본 글에서 사용된 개츠비의 버전은 5.12.0입니다.

 

4. 개츠비 프로젝트 생성하기

 

이제 웹 페이지를 만들 준비가 다 되었습니다.

다음과 같은 명령어를 통해 개츠비 프로젝트를 생성할 수 있습니다.

gatsby new {Project name}

 

위 명령어를 실행하면 명령어가 실행된 디렉토리에 {Project name}의 하위 디렉토리가 생성됩니다.

실행된 명령어는 개츠비에서 공식으로 배포하는 스타터 디렉토리를 기반으로 한 페이지를 생성합니다.

 

5. 개츠비 프로젝트 실행하기

 

최초 생성된 프로젝트는 어느 수준의 템플릿을 갖추고 있기 때문에, 바로 실행하여 결과를 확인할 수 있습니다.

프로젝트를 설치한 디렉토리로 이동하여 다음 명령어를 실행합니다.

gatsby develop

개츠비 프로젝트가 컴파일 되는 모습을 확인할 수 있습니다.

해당 과정이 완료되면 웹 페이지의 주소를 출력합니다.

기본 페이지의 외형과, 해당 페이지가 src/pages/index.js인 것을 출력합니다.

 

---

 

개츠비로 웹 페이지를 생성하는 과정을 살펴보았습니다.

해당 과정은 공식 문서의 튜토리얼 항목에도 기술되어 있습니다.

Gatsby tutorial

 

 

감사합니다.