[React기반 Gatsby로 블로그 개발하기] Gatsby & GraphQL

왜 Gatsby

• React기반 프레임워크, Next.js가 1위, Gatsby가 2위
• 왜 1위인 Next.js안쓰고 Gatsby를 쓰는가?
  • Next.js는 정적 사이트 생성기능도 있지만 주로 서버 사이드 렌더링을 위해 사용하는 프레임워크, 즉 서버와 통신을 해 요청을 받을때마다 동적으로 웹사이트를 생성
  • Gatsby는 서버없이 오로지 정적 사이트 생성을 위해 사용하는 프레임워크 => 블로그, 소개페이지, 포트폴리오 등에 많이 사용됨
  • 블로그 개발이 목적이어서 Gatsby 사용

 

Gatsby & GraphQL

 

Gatsby

Gatsby는 React를 사용하는 `JAM Stack 기반 프레임워크`

GraphQL

페이스북에서 개발한 쿼리 언어

• 각각의 엔드 포인트에서 고정된 데이터를 받을 수 있는 Rest API
• 그와 다르게 GraphQL은 단일 엔드포인트에서 원하는 데이터만을 받을 수 있다는 장점을 가지고 있음
• Query를 통해 데이터를 받아올 수 있으며 이외에도 데이터 변경을 위한 Mutation, 실시간 기능을 위한 Subscription이 있음

query getHeroInfo {
	hero {
		name
		age
		ability
	}
}

• Gatsby 공식 홈페이지에서 GraphQL 설명 참고

• Gatsby에서는 GraphQl을 주로 페이지 또는 Static Query 컴포넌트에서 필요한 데이터를 받아오기 위해 사용된다
• 프로젝트에서 제목, 개발자 정보, 홈페이지 요약같은 기본 정보와 블로그 콘텐츠 데이터를 관리하는데 GraphQL을 사용할 것

 

 

해당 글은 인프런 강의 React 기반 Gatsby로 블로그 개발하기를 기반으로 작성하였습니다