[SSR/SSG] Gatsby 시작하기

kysung95·2021년 6월 18일
1

SSG/SSR

목록 보기
1/1

안녕하세요. 김용성입니다.
오늘은 정적 사이트 구축을 위해 사용되는 Gatsby JS를 설명하고 이를 이용해서 프로젝트를 시작하는 방법에 대해 포스팅하고자 합니다.

우선 이 글을 읽기 전에 제가 이전에 했던 포스팅들을 읽고오신다면 도움이 되실거라 생각합니다.

[개발상식]SSR vs CSR 당신의 선택은? (feat. 웹의 변천사)

[짤막글] SEO란 무엇일까?

Gatsby

Gatsby는 React+Graphql 기반의 정적 HTML 페이지 생성기입니다.
Graphql을 사용하여 여러가지 데이터를 관리하며 . 그리고 그 데이터를 HTML, CSS, React로 만들어진 컴포넌트 UI에 뿌려준 후 이것을 사이트로 만들어 주는 프로세스를 가지고 있습니다.

React를 어느정도 알아야 다룰 수 있는 것 아닌가요?

그렇다고 할 수도 있지만 꼭 그러지 않아도 됩니다. Gatsby 자체가 굉장히 간편하고 편리하기 때문에 되려 Gatsby를 사용해보면서 React의 동작방식과 컴포넌트 구성에 대해서 배울 수도 있으며 웹 개발의 경험이 적은 사람들도 쉽게 접근할 수 있다고 생각합니다. 그렇지만 당연하게도 HTML, CSS, Node 에 대한 기본적인 지식은 있어야합니다. :)

왜 사용하는가?

Gatsby를 사용하여 쉽게 SEO와 성능, 두 마리 토끼를 모두 잡을 수 있습니다.
Gatsby는 기존에 블로그 제작에 많이 사용되었던 Jekyll과 같은 정적사이트 생성기입니다. JavaScript가 실행되면 빈 HTML 페이지 안에 마크업을 추가해주는 SPA(Single Page Application)와 다르게, 개발 후 Build 과정에서 마크업이 생성되기 때문에 TTV 또한 굉장히 좋죠.

위 그림은 Gatsby 홈페이지에서 가져온 그림으로 동작 방식을 설명하고 있습니다.
웹사이트를 만들 때에는 기본적으로 데이터가 필요합니다. Gatsby에서는 이러한 데이터를 기본적으로 Graphql을 통해 가져옵니다.

웹사이트는 위에서 언급했 듯이 React를 이용해서 만듭니다. 코드는 React를 이용해서 컴포넌트 작성하듯이 사용하지만, 공통 레이아웃을 관리하거나 페이지를 생성하거나 데이터소스와 컴포넌트를 연결하거나 하는 기능을 Gatsby에서 제공하고 있어서 쉽게 만들 수 있습니다.

이를 빌드하면 정적 사이트로 만들어 줍니다. 여기서 SPA라고 하지 않고 정적사이트로 만든다는 부분이 중요한데 CMS나 파일 등의 데이터 소스에서 GraphQL로 가져온 데이터를 빌드할 때 모두 가져와서 정적파일의 데이터로 포함하게 되죠.
SPA라고 한다면 API로 가져오는 로직이 소스에 들어있고 사용자가 SPA 사이트를 실행할 때 API로 가져오게 되지만** Gatsby는 정적 사이트를 만들어주므로 빌드 시에 GraphQL로 데이터를 가져와서 빌드된 배포 파일에 포함 시킵니다.** 이 부분이 다른 도구들과 Gatsby를 가장 다르게 만들어주는 특징이며 위에서 언급한 TTV 성능 개선에도 큰 영향을 끼칩니다.

참고로 React 기반의 정적 웹페이지 생성기는 Gatsby JS가 있고 Vue 기반의 정적 웹페이지로는 Vue-Press가 있습니다. Vue JS를 공부하신 분들은 아마 Vue-Press를 사용해보시는 것이 좋다고 생각합니다.

환경설정

기본적으로 여러분들의 컴퓨터에 Git과 npm이 깔려있을 것이라고 가정을 하고 진행하도록 하겠습니다.
그리고 보다 더 쉽고 빠르게 Gatsby-cli를 사용하여 진행하도록 하겠습니다.

Gatsby 설치

Gatsby를 설치해줍니다. global option으로 설치할 것을 권장드립니다.

$ npm install -g gatsby-cli

프로젝트 생성

프로젝트 생성은 크게 두가지 방법으로 할 수 있는데요.
가장 기본적인 default 생성이 있고, starter pack을 사용하는 방법이 있습니다.

default

프로젝트를 시작하고 싶은 디렉토리에 들어가서 다음과 같은 명령어를 입력해줍니다.

$ gatsby new [프로젝트 이름]

만약 Gatsby를 global option으로 설치하시지 않은 경우에는 npx 명령어를 사용해서 진행해주세요 :)

$ npx gatsby-cli new [프로젝트 이름]

이런식으로 시작이 될 것입니다.

starter pack

빠르게 포트폴리오나 블로그를 구축하고 싶으신 분들에게 추천드리는 방법입니다.

https://www.gatsbyjs.com/starters/?

해당 사이트에 들어가면 여러가지 starter template들이 존재합니다. 원하시는 템플릿을 골라 들어가시면 하단에 다음과 같이 git 주소가 포함된 명령어가 있습니다.

이 명령어를 통해 실행하시면 프로젝트가 생성됩니다.

실행

실행 방법은 간단합니다.

$ gatsby develop

혹은

$ npm start

프로젝트 루트에서 다음 명령어를 입력해주면 terminal에 다음과 같이 서버가 돌아감을 명시해줄 것입니다.

✋ http://localhost:8000/___graphql 이건 뭔가요??

제가 위에서 언급했듯, Gatsby는 기본적으로 graphql을 사용하는데요. 서버를 돌리신 후에 해당 url로 접속하면 다음과 같이 여러 query들이 존재함을 확인하실 수 있습니다.

http://localhost:8000 에 접속하면 들어가면 다음과 같이 프로젝트가 잘 빌드되어진 것을 확인할 수 있습니다.

[빌드 완료된 페이지]

마무리

오늘은 Gatsby에 대해 구체적으로 알아보고, 시작방법에 대해서 알아보았는데요. 다음 포스팅에서는 Graphql의 쿼리를 사용하는 방법과 Gatsby의 기본적인 디렉토리 구조, 그리고 Gatsby plugin에 대해서도 한번 알아보도록 하겠습니다. 읽어주셔서 감사합니다.

profile
김용성입니다.

0개의 댓글