정적사이트 블로그 개발을 위한 도구 설치하기

1. 들어가며 

이제 본격적으로 블로그 수정 및 개발을 할 시간입니다.

nodejs, yarn, gatsby-cli를 설치할 예정입니다.

2. nodejs 설치하기

https://nodejs.org/en/download/

위 링크에서 자신의 컴퓨터 환경에 맞는 프로그램을 다운 받습니다.

LTS 버전을 다운 받으면 됩니다. 현재 LTS버전은 12.18.2입니다.

그리고 설치합니다.

이제 Git bash에서 node, npm 명령어를 내릴 수 있습니다.

3. yarn 설치하기

yarn은 npm과 비슷한 패키지 매니저입니다.

같이 깔아두면 좋습니다.

https://classic.yarnpkg.com/en/docs/install

위 링크에서 다운 받고, 설치합니다.

4. gatsby-cli 설치하기

이제 Git bash를 열고

npm install -g gatsby-cli

위 명령어를 내립니다.

그러면 엄청 열심히 설치할 것입니다. 컴퓨터 사양에 따라 다르겠지만 5~10분까지도 걸릴 수 있습니다.

설치가 끝나면 Git bash에서 gatsby 명령어를 내릴 수 있습니다.

5. 설치된 버전 확인하기

Git Bash를 열고 버전을 확인해봅니다.

(1) nodejs 버전 확인하기

node -v

위 명령어를 내리면 아래와 같은 결과가 나올 것입니다.

v12.18.0

(2) npm 버전 확인하기

npm -v

위 명령어를 내리면 아래와 같은 결과가 나올 것입니다.

6.14.4

(3) yarn 버전 확인하기

yarn -v

위 명령어를 내리면 아래와 같은 결과가 나올 것입니다.

1.22.4

(4) gatsby-cli 버전 확인하기

gatsby -v

위 명령어를 내리면 아래와 같은 결과가 나올 것입니다.

Gatsby CLI version: 2.12.46

6. 코드 에디터 프로그램 설치하기

(1) 설치하기

Gatsby에서는 VS Code를 설치하는 것을 추천합니다.

개인 사용은 물론, 기업에서도 무료로 사용할 수 있기 때문입니다.

https://code.visualstudio.com/#alt-downloads

위 링크에서 자신의 컴퓨터에 맞는 프로그램을 다운 받고 설치할 수 있습니다.

(2) Prettier 플러그인 설치하기

코드를 파싱하고 최대 줄 길이를 고려하여 필요한 경우 코드를 래핑하는 자체 규칙으로 다시 인쇄하여 일관된 스타일을 적용합니다.

Gatsby 공식 사이트에서 설치하는 것을 추천합니다.

설치 방법은 VS Code를 설치 후 왼쪽에 확장 버튼을 누른 후 검색창에 Prettier를 넣으면 제일 위에 나오는 Install을 누르면 됩니다.

위 스샷을 참조하세요.

(3) 한글 인코딩 자동 인식시키기

한글이 들어간 파일을 수정할 때, 한글이 깨질 경우가 있습니다

VS Code가 한글을 인식하지 못하는 경우인데요.

이때 자동으로 설정해주는 방법이 있습니다. 저는 이것까지 추천드립니다.

VS Code 실행 후 위에 File -> Preferences -> Settings에 들어갑니다.

Text Editor -> Files -> 제일 위에 있는 Auto Guess Encoding에 체크를 하면 바로 저장됩니다.

이제 기본 준비는 끝났습니다.

다음에는 실제로 자신의 컴퓨터에서 블로그를 띄우고 바로 수정하는 방법에 대해 알려드리겠습니다.

참조사이트

https://www.gatsbyjs.org/tutorial/part-zero/