[Gatsby] 환경 구축

시작하기 앞서...

Gatsby는 React기반으로 정적사이트(Static Site), 일반 웹사이트를 구현할 수 있는 오픈소스 프레임워크입니다.

Gatsby라는 프레임워크를 알고만 있었고, 이를 이용해서 사이트를 개발해보고 싶었는데, 이번 기회에 Gatsby로 사이트를 만들어보면서 공부한 내용을 하나씩 정리해보려고 합니다.

주로 공식사이트를 기준으로 정리를 할 예정이고, 다른 블로그나 사이트에서 참고하면 아래의 참고자료로 남길 예정이니 자세한 내용은 아래 참고자료를 확인해주세요.

사전지식

Gatsby를 이용해서 사이트를 만들기 위해서는 Web 기술과 친해져야하고, 필요 소프트웨어 툴을 설치했는지 확인해야 합니다.

아래 4가지는 Gatsby에서 요구하는 사전지식 입니다.

• HTML (https://www.freecodecamp.org/learn/responsive-web-design/#basic-html-and-html5)
• CSS (https://www.freecodecamp.org/learn/responsive-web-design/#basic-css)
• Javascript (https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#basic-javascript)
• Command Line (https://www.macworld.co.uk/feature/mac-software/how-use-terminal-on-mac-3608274/)

위 4가지 이외에도 아래 지식에 익숙해져야 합니다. Gatsby를 이용해서 사이트를 만들다 보면 익숙해지겠지만, 더 자세한 내용을 확인하고 싶다면, 아래 사이트를 참고해주세요.

• React (https://www.freecodecamp.org/learn/front-end-libraries/#react)
• GraphQL (https://www.howtographql.com/)

설치

Node.js (v14.15 이상)

Node.js는 웹 브라우저 밖에서 Javascript 코드를 실행할 수 있는 환경입니다. Gatsby는 Node.js로 빌드됩니다. Gatsby를 실행하기 위해서는 Node.js v14.15 이상의 버전이 컴퓨터에 설치되어야합니다.

npm은 Node.js에 포함된 패키지 매니저입니다. npm CLI를 통해서 패키지를 추가하고 실행할 수 있습니다.

Node.js 설치(https://nodejs.org/ko/)

Git

Git은 무료 오픈소스 분산 버전관리 시스템입니다.

새로운 Gatsby 사이트를 만들 때, Gatsby는 백그라운드에서 Git을 사용해 새 사이트에 필요한 파일을 다운로드하고 설치합니다. 그리고, Git을 사용해서 코드를 클라우드에 푸시할 수 있고, 사이트를 인터넷에 배포할 수 있습니다.

Git (https://git-scm.com/downloads)

Gatsby CLI

Gatsby Command Line Interface(CLI)는 새로운 Gatsby 기반 사이트를 빠르게 생성하고, Gatsby 사이트 개발을 위한 명령을 실행할 수 있는 도구입니다.

CLI는 npm 패키지로 배포되어있습니다. npm을 사용해서 설치할 수 있습니다.

# gatsby-cli 설치
npm install -g gatsby-cli

# version 확인
gatsby --version

Visual Studio Code

Visual Studio Code(VS Code)는 유명한 코드 에디터입니다.

VS Code (https://code.visualstudio.com/#alt-downloads)