[ Gatsby ] [ Tutorial ] 0.환경설정

서론

다양한 개인 블로그들을 보면서 나도 갖고 싶다는 생각을 해왔는데.. 이렇게 갑작스럽게 시작하게 되었다. 

우선은 처음이기도하고 튜토리얼을 활용하면서 배워갈 생각이다.

 

 

Document

https://www.gatsbyjs.org/tutorial/

Gatsby.js Tutorials

위 튜토리얼을 참조한다.

OS에 따라(Mac, Windows, Linux) 다른 환경 설정 방법을 참고할 수 있다.

여기서는 Windows를 기반으로하여 진행한다.

 

node.js 설치

https://nodejs.org/en/

Node.js

위 사이트를 통해서 node.js를 설치한다.

 

설치가 끝나면, 아래 명령으로 node.js가 정상적으로 설치되었는지 확인한다.

node --version

 

Git 설치

https://www.atlassian.com/git/tutorials/install-git#windows

Install Git | Atlassian Git Tutorial

설치가 끝나면 아래 명령으로 git이 정상적으로 설치되었는지 확인할 수 있다.

git --version

 

gatsby-cli 설치

gatsby-cli 도구를 사용하면 gatsby 기반 사이트를 아주 간단하게 개발, 실행할 수 있다. 

npm install -g gatsby-cli

 

위와 같이 뜬다면 준비완료!

 

스타터 설치

https://www.gatsbyjs.org/starters/?v=2

Starter Library

위 사이트에서 마음에 드는 스타터를 발견하면 사용해도 좋지만..

튜토리얼에서 알려준 hello world 스타터를 사용하기로 했다.

 

아래 명령을 터미널에서 실행시켜준다.

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

• new : 새로운 gatsby 프로젝트 생성

• hello-world : 임의의 제목. 폴더명. 

• [url] : github URL. starter 코드를 보유한 코드 저장소.

 

아래 명령을 차례대로 입력하면 개발 서버를 시작할 수 있다. (서버 중지가 필요하다면 [Ctrl] - [C] 를 누릅니다.)

cd hello world
gatsby develop

 

브라우저를 열고 로컬 페이지를 열어보자! 

짠. hello world 프로젝트답게 화면에 hello world가 찍힌 것을 확인할 수 있다.

 

코드 편집기 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

추가로 Prettier Plugin을 설치할 것을 권장한다.

VSCode MarketPlace( Ctrl + Shift + X ) 에서 [Pretter - Code formatter]를 설치하면 된다.

코드를 자동으로 정렬해주는 포매터다.

 

 

 

# 그렇다면 이제 환경설정은 진짜로 끝이 났다. ^,^ /