Gatsby란? Tutorial 따라하기

Gatsby를 공부하게 된 이유

Site를 만들일이 있는데, 솔직히 서버는 필요없을 것 같고 Static한 파일만 있으면 될것 같았다. 이럴때 Gatsby를 쓴다는데, 사실 뭔지 잘모르겠어서 그런가보다 하고 살고 있었는데 이번기회게 공부를 해보려고 한다. 

 

Gatsby Intro Video

Gatsby란?

- Static Site Generator

- Uses GraphQL to get data from anywhere

- Uses React for templating and css for styling

- Include Plugin Architecture

 

Gatsby를 사용하는 이유?

- Use Gatsby for speed, security, and dev experience

 

A Review of Gatsby Basics

- Gatsby is a static site generator

- Under the hood, it uses Node, GraphQL, and React

- Primary benefits are speed, security, and developer experience

- Has stable and growing community

 

 

 

Gatsby 공식 사이트의 Tutorial 관련 Docs  

Gatsby의 공식사이트는 미친듯이 잘 만들어져있다. 세상에...

 

 

Gatsby Tutorial 목차와 내용 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

0. Gatsby의 핵심 기술과 개발환경 세팅을 알려준다. 

 

1. 화면을 바꾸고, 페이지 간의 링크를 만드는 것 등등을 하고 페이지를 deploy까지 해본다. 

 

2. Gatsby에서 styling 하는 방법을 배운다

 

3. 플러그인을 설치해서 레이아웃 컴포넌트를만들고 일관된 레이아웃을 페이지에 만들수 있도록 하는 것을 배운다. 

 

4. GraphQL을 통해 gatsby-config.js에 있는 metadata를 읽어온다. (Gatsby 사이트에는 GraphQL에 관한 설명도 있다 - 빌드 타임에 GraphQL을 사용한다)

 

5. GraphiQL(GraphQL IDE) 를 사용해본다. 

 

6. Transformer plugin을 통해서 Gatsby의 데이터 레이어의 데이터를 변경하자

 

7. 템플릿화된 페이지를 만들자. 

 

8. Lighthouse를 통해서 화면을 audit하자. PWA 속성들도 사용해보고 SEO도 넣어보자!!

 

 

공부한 Repo 및 후기

- 공부한 리포: [여기]

 

Gatsby 튜토리얼을 하면서 느낀 것은 CRA 만으로 할때보다 확실히 편할 것 같고 프로젝트 구조도 더 잡기가 편했다. 그리고 Route 관련해서머리가 아프지 않아서 좋았다. 

 

Docs가 너무 잘되어있어서, Gatsby 뿐만 아니라 관련 생태계에 대해서도 공부하기 만족스러웠고, 꾸준히 한번 읽어볼만한 문서인것같다. 

 

실제로 튜토리얼을 해보니, 내가 만들 서비스 페이지에 딱 맞는 기술인것을 확인 할 수 있었다. 컨텐츠 등록이 종종 밖에 없고, 아직 백엔드도 따로 필요없다보니 Gatsby를 통해서 빌드해서 CDN으로 배포하면 비용을 더 절감할 수 있을 것 같다. 

 

앞으로 Gatsby를 통해서 내가 나중에 만들 서비스를 위해 template 프로젝트를 진행하려고 한다. 

 

이 프로젝트는 3가지를 포함하고 있으면 좋겠다. 

1. TypeScript: 공부중인데 식은땀이 난다. 

2. 다국어 지원: 한 프로젝트가 러시아어 및 영어가 지원이 되어야할 것 같다. 그리고 한국어 페이지라도 기본적으로 영어정도는 항시 지원할 준비가 되어있으면 좋을것 같다는 생각

3. 간단하게 컨텐츠를 등록하고 수정할 수 있는 기능(DB 보다는 Markdown 파일등으로 관리할 수 있는 사이즈이다 - 상품 수 10개 미만인 페이지)

 

백수가 되고 나태해질까봐 걱정했는데 정말 바쁘다!!