INTRO
이번에 GDSC 블로그를 리뉴얼 계획을 가지고 이야기하던 중 Gatsby에 대해 알게 되었습니다.
사용 여부와 상관없이 궁금증이 생겨 한번 알아보고 싶다는 생각을 하였고 11월 블로그에서 해당 내용에 대해 한번 다뤄보고자 합니다.
해당 부분에 대해 관련 지식이 하나도 없기 때문에 최대한 기초적인 내용을 담아봅니다.
JAM Stack에 대해 알아보기
Gatsby는 JAM Stack을 활용한 정적 사이트 생성기입니다.
JAM Stack은 JavaScript, API, MarkUp Stack의 약자로, JavaScript 와 API, HTML이나 CSS 등을 칭하는 MarkUp으로 이루어진 웹 구성 방법입니다.
JAM Stack 공식 홈페이지에서는 이렇게 설명하고 있습니다.
Jamstack is an architecture designed to make the web faster, more secure, and easier to scale.
JAM Stack 은 더 빠르고, 안전하며, 스케일링하기 쉬운 웹을 만들기 위해 디자인된 아키텍처입니다.
JAM Stack을 사용한 방식은 기존 웹 사이트의 방식과 다르게 절차가 간단합니다.
마크업 요소와 다양한 API를 통해 만든 정적 웹 사이트를 Pre-Render 한 것을 CDN(Content Delivery Network)을 통해 웹 사이트를 열람할 수 있습니다.
Gatsby란 무엇인가?
Gatsby JS는 가공할 정보를 GraphQL에서 가져와서 빌드 시점에 정적 페이지를 만들어 내는 방식을 취하고 있습니다.
- 그래프 형태의 데이터 인터페이스를 제공한다.
- 데이터 노드를 구성한다. 프리셋인 플러그인을 통해 확장할 수도 있다.
- 구성한 데이터를
GraphQL로 쿼리 해서 페이지 코드에서 사용한다. - 사이트의 모든 페이지를 사전에 렌더링 하여 경로에
index.html을 생성한다.
왜 Gatsby를 사용해야 하는가
1. 정적 사이트 생성
Gatsby는 서버 없이, 오로지 정적 사이트 생성을 위해 사용하는 프레임워크입니다. 그래서 서비스 및 기업 소개 페이지, 블로그, 포트폴리오 등에 많이 사용됩니다.
2. 검색 엔진 최적화와 성능 모두 챙기기
JavaScript가 실행되면 빈HTML페이지 안에 마크업을 추가해 주는 SPA(Single Page Application)와 다르게, 개발 후 Build 과정에서 마크업이 생성됩니다.Gatsby는 단순히 정적 페이지를 만들어 주는 것으로 끝나는 것이 아니라, 필요에 따라 CSR(Client Side Rendering) 과 SSR(Server Side Rendering), lazy loading 을 적절히 섞어 사용할 수 있어 성능 면에서도 단순 정적 페이지보다 큰 장점이 있습니다.
3. React 기반 프레임워크
Gatsby는React기반의 정적 페이지 생성 프레임워크입니다.- 프로젝트의 구조를 component, modules, pages로 나누며 컴포넌트 계층 구조로 개발을 할 수 있습니다.
4. 친절한 Gatsby 공식 문서
- 초반에
Gatsby가 어떻게 동작하는지, 어떤 템플릿이 있는지 알고 싶다면 다양한 Gatsby Starter를 사용하면 됩니다. Gatsby공식 문서에서 적용 가능한 각각의 CMS 템플릿도 있고 홈페이지/블로그/포트폴리오 등의 다양한 스타터들이 있습니다.
5. 다양한 Gatsby Plugin
- Gatsby에는 다양한 Gatsby Plugin 들이 있습니다.
설치 및 시작하기
먼저 gatsby를 설치한 후, 새 프로젝트를 생성합니다.
1
2
$ npm install -g gatsby-cli
$ gatsby new gatsby-site
gatsby-site 디렉토리 안에 프로젝트가 생성됩니다. gatsby develop 커맨드를 실행하면 localhost:8000에서 페이지를 확인할 수 있습니다.
마크다운 파일로 블로그 만들기
gatsby-transformer-remark 플러그인을 사용하면 마크다운 파일을 HTML로 변환할 수 있습니다.
플러그인 설치
1
$ npm install --save gatsby-source-filesystem gatsby-transformer-remark
gatsby-source-filesystem 플러그인은 파일을 읽어옵니다. 플러그인을 사용하기 위해서는 gatsby-config.js 파일에 사용할 플러그인을 등록해야 합니다.
1
2
3
4
5
6
7
8
9
10
11
// gatsby-config.js
plugins: [
{
resolve: "gatsby-source-filesystem",
options: {
name: "markdown-pages",
path: `${__dirname}/src/markdown-pages`
}
},
"gatsby-transformer-remark"
];
plugins 배열에 사용할 플러그인의 이름과 설정을 추가합니다. options의 path에는 파일이 들어있는 디렉토리를 지정합니다.
마크다운 파일 만들기
마크다운 파일에는 —로 둘러싸인 블록 안에 정보를 추가할 수 있습니다. 이 정보는 gatsby-markdown-remark가 frontmatter로 파싱 합니다.
1
2
3
4
5
6
7
8
9
10
---
- date: "2019-10-20"
- title: "테스트용 게시글입니다."
- description: "게시글에 대한 설명입니다."
- template: "post"
- path: "/posts/test-post"
- draft: false
---
## 게시글(게시글 내용은 여기에 작성합니다.)
마치며
이번에는 짧은 시간에 정보를 찾아 글을 작성하다 보니 실제로 코드를 작성하거나 검증해 보지 못하고 구글링을 통해 여러 블로그의 정보를 가져와 나열하고 마칠 수밖에 없어서 아쉬움이 컸습니다.
해당 기술을 실제로 사용할 일이 생길지는 모르겠지만 기회가 된다면 다음 기회에는 좀 더 구체적인 내용도 공부해 보면서 gatsby 이용해서 결과물을 만들어보고 싶다는 생각을 하였습니다.
다음번에는 좀 더 시간을 들여서 더 좋은 정보를 제공할 수 있도록 하겠습니다.
끝!
Reference
Gatsby로 개인 블로그 만들기 -클론부터 배포까지-
Gatsby는 처음이라 :: 개념부터 프로젝트 시작까지
Gatsby로 블로그 만들기
올리브영 테크블로그 Gatsby 전환&개발기