소개

이 시리즈에서는, 영어 소스만으로 「Gatsby 사용해 보고 싶지만, 잘 모르는…

실제 공식 문서는 여기

(이 장에서는 Gatsby.js를 사용하여 개발할 수있는 환경을 구축하고 Hello world!와 화면에 표시하는 것이 목표입니다)

~~ 이하, 번역이 됩니다 ~~

0. 개발에 필요한 환경을 구축하자

Gatsby를 사용하여 사이트를 개발하기 전에 먼저 다음과 같은 웹 개발의 주요 기술에 익숙한지 확인하십시오.

CLI(터미널)
(어느 정도 프로그래밍을 하고 있는 분에게는 필요 없다고 생각하므로, 터미널의 설명은 할애합니다)

Node.js
Node.js는 브라우저 외부에서 JavaScirpt 코드를 실행할 수 있도록 하기 위한 것입니다. Gatsby도 Node.js를 사용하여 움직이고 있습니다. 따라서 Gatsby를 사용하여 개발할 때 안정적으로 작동하는 최신 버전의 Node.js를 설치해야합니다. npm과 Node.js는 기본적으로 세트로 설치되므로 npm을 사용한 적이 없다면 Node.js도 설치되지 않았을 가능성이 높습니다.

참고 기사: Homebrew에서 Node.js 및 npm을 설치하는 방법

Git
Git은 무료이며 오픈 소스 버전 관리 시스템입니다. Gatsby에서는 '스타터'라는 페이지 작성을 위한 템플릿과 같은 것을 활용하여 SPA 사이트를 고속으로 만들 수 있습니다만, 그 '스타터'를 설치할 때 Git을 사용하는 것에 따라서 Git은 미리 설치해 두십시오.

참고 기사: 최신 Git을 설치하는 방법

Gatsby CLI를 사용해 보자.

Gatsby CLI는 쉽고 빠르게 Gatsby 사이트를 개발할 수 있는 npm 패키지입니다.
다음 명령을 실행하여 설치해 봅시다.

npm install -g gatsby-cli

설치가 완료되면 다음 명령으로 실행할 수 있는 명령을 확인할 수 있습니다.

gatsby --help

Gatsby로 사이트를 만들어 보자.

이 작업이 완료되면 이제 Gatsby CLI를 사용하여 Gatsby 사이트를 만들 준비가 완료됩니다. 이 도구를 사용하여 위에서 설명한 "starter"를 다운로드할 수 있습니다. 이번에 사용하는 "Hello world starter"는 Gatsby 사이트를 만드는데 필요한 최소한의 것만이 들어있는 starter입니다.

1 . 터미널 열기
2 . starter를 이용하여 gatsby new로 사이트 만들기

gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

3 . 작성한 디렉토리로 이동

cd hello-world

4. 개발용 서버를 시작한다.

gatsby develop

이것만으로, 이번 작업은 끝입니다! !

로컬 환경에서 사이트를 보자.

이제 아래 URL을 방문하여 만든 사이트를 살펴보겠습니다.



축하합니다 🎉
이제 첫 번째 Gatsby 사이트를 만들었습니다!gatsby develop에서 시작한 개발 서버가 실행 중이면 언제든지이 http://localhost:8000/에 액세스 할 수 있습니다.
서버를 멈추고 싶으면 Ctrl + c로 멈추고, 시작하고 싶다면 다시 gatsby develop를 실행하십시오.

참고 문헌: Gatsby 공식 문서

다음 장의 주제는
"이번 gatsby new에서 만든 gatsby 사이트가 어떤 구성으로 이루어져 있는지 이해한다"입니다.

기대하세요! !

[제1장：Gatsby 사이트의 이해 편] Gatsby 공식 문서를 번역해 보았다.

[제2장: Gatsby에서의 스타일링 편] Gatsby 공식 문서를 번역해 보았다.

[제3장: Layout 컴퍼넌트를 사용해 보자 편] Gatsby 공식 문서를 번역해 보았다.