이 블로그는 Gatsby 공식 튜토리얼을 참고하여 본인이 제작하였다. 이 글에서는 그 과정을 알기 쉽게 풀어서 설명하고자 한다.
HTML/CSS/JS/React에 대한 적절한 지식이 있다는 전제하에 글을 작성하였다.
Gatsby의 특징으로는 별도의 '데이터 층'이 존재하여, 페이지에서 보여 줄 다양한 리소스들이 그 저장소에 저장되고, GraphQL을 통하여 그 데이터를 불러와 페이지에 보여 준다는 것이 있다.
설치 (개발환경 구성)
Gatsby 설치
$ npm install -g gatsby-cli
-g 옵션을 사용하여 global하게 설치하는 것을 추천한다. 그래야 gatsby new 같은 명령어(새로운 Gatsby 프로젝트 생성)를 원하는 곳에서 사용할 수 있어 편리하다.
Gatsby 프로젝트 생성
$ gatsby new
프로젝트를 생성할 디렉토리에서 위 명령을 사용한다.
그러면 터미널에서 대화 형식으로 프로젝트와 관련한 여러 옵션을 선택할 수 있다.
What would you like to call your site?
✔ · My First Gatsby Site
내 사이트의 이름을 정한다.
What would you like to name the folder where your site will be created?
✔ Desktop/ my-first-gatsby-site
생성한 Gatsby 프로젝트가 저장될 경로를 정한다. 기본값이 gatsby new명령어를 실행한 현재 디렉토리이다. 값을 바꾸지 않고 그대로 엔터키를 눌러 넘어가 주면 된다.
✔ Will you be using a CMS?
· No (or I'll add it later)
✔ Would you like to install a styling system?
· No (or I'll add it later)
CMS와 스타일링 시스템(emotion, styled component 등)을 설치할지를 묻는다. 일단은 No (or I'll add it later)를 눌러 넘어가 준다. 필요할 경우 그때 따로 설치할 수 있다.
✔ Would you like to install additional features with other plugins?
· Done
이런저런 추가 플러그인들을 보여 주며 설치할 것이냐 묻는다. 위에서 언급했듯이 필요한 경우 나중에 따로 설치할 수 있기 때문에 Done을 눌러 넘어가 준다.
Thanks! Here's what we'll now do:
🛠 Create a new Gatsby site in the folder my-first-gatsby-site
? Shall we do this? (Y/n) › Yes
이제 마지막 단계이다. 지금까지 대화를 통해 선택한 선택지를 보여 주며(우리는 아무것도 추가로 설치하지 않기 때문에 한 가지밖에 뜨지 않는다), 여기서 그대로 엔터를 누르면 프로젝트가 생성된다.
Your new Gatsby site My First Gatsby Site has been successfully
created at ~/Desktop/my-first-gatsby-site.
Start by going to the directory with
cd my-first-gatsby-site
Start the local development server with
npm run develop
See all commands at
https://www.gatsbyjs.com/docs/gatsby-cli/
위와 같은 메시지를 보여주며 프로젝트 생성이 완료된다.
프로젝트 실행하기
$ cd my-first-gatsby-site
cd 명령어를 사용하여 방금 생성한 프로젝트 디렉토리로 이동한다. 다음 명령어로 프로젝트를 실행할 수 있다.
$ gatsby develop
또는
$ npm run develop
그러면 프로젝트 빌드 과정을 보여 주는 여러 메시지 후에, 다음 메시지와 함께 실행이 완료된다.
You can now view my-first-gatsby-site in the browser.
⠀
http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and
schema
⠀
http://localhost:8000/___graphql
이제 웹 브라우저의 주소창에 http://localhost:8000 을 입력하여 방금 생성한 Gatsby 사이트에 접속할 수 있다.
