v4 tutorial
November 23, 2021
Starting gatsby
Part 1: Create and Deploy Your First Gatsby Site
튜토리얼 시작 중..
1. Create and Deploy your first gatsby site
처음 내용은 별 건 없고, gatsby cli를 이용하여 gatsby 프로젝트를 만들고, gatsby cloud에 deploy하는 것을 알려준다.
2. Use and styled React components
나는 타입스크립트를 이용하고 싶은데, css module 사용하는데 typescript에서 에러가 발생한다. 그렇다고 게츠비 돌리는 데 에러는 아닌데(tsc 사용 X)… 그래서 일단은 styled-components를 이용하긴 할 건데.. 조금 찝찝하다.
gatsby-plugin
게츠비 플러그인을 쓰려면 두 가지 단계가 필요하다.
첫번째는 gatsby plugin 패키지를 npm이나 yarn을 통해 설치하고 나서, gatsby-config.js를 통해서 설정을 해주면 된다.
패키지마다 설정이 다르니, gatsby plugin 페이지에 가서 사용법을 같이 보면 된다.
Welcome to the Gatsby Plugin Library
module.exports = {
siteMetadata: {
siteUrl: "https://www.yourdomain.tld",
title: "my-first-gatsby",
},
plugins: [
// styled-component도 설치해줘야 함.
resolve: `gatsby-plugin-styled-components`,
options: {
// Add any options here
},
},
]}3. Add features with plugins
StaticImage라는 플러그인 사용하는 법을 알려주는데, 내용상 딱히 별 건 없어서.. 넘어가도 될 것 같다. 플러그인 설치 + 설정 + 사용의 예시를 보여주는 페이지
4. Query for data with graphQL
gatsby가 graphql을 사용하는 것은 알고 있었는데 몇 가지 문제가 있었다.
- webstorm에서 graphql endpoint의 schema를 못 읽는지.. graphql 쿼리에서 자꾸 오류를 내뿜는다.
- typescript 관련하여 문제가 좀 있다.
첫번째 문제는 어찌저찌해서 schema 파일을 만들면 될 것 같은데, 두번째 문제가 조금 에러인 것 같은데..
const BlogPage: React.FC<PageProps> = ({ data }) => {
return (
<Layout pageTitle="My Blog Posts">
<p>My cool posts will go in here</p>
<ul>
{(data as any).allFile.nodes.map((node) => (
<li key={node.name}>{node.name}</li>
))}
</ul>
</Layout>
);
};위 코드에서 보면 data가 Object타입으로 되어 있고, d.ts 파일 가서 타입을 확인을 해보면.. DataType으로 되어 있다. 더 파고 들어가면 DataType은 그냥 object이다.
그래서 일단 data를 사용할 때에는 any로 타입캐스팅을 해놨는데.. 별로 좋진 못하다.
일단 여기는 튜토리얼치고는 꽤 까다로운 내용이었는데.. 일단 아래 패키지를 확인해보자.
gatsby-source-filesystem plugin to pull data into your site from your computer’s filesystem.
Part 4: Query for Data with GraphQL
gatsby의 GraphQL Data layer에 대해 알아봐야 한다.
CMS: Content Management System
데이터 소스를 관리해주는 시스템이라고 보면 되는데, source plugin을 통해서 접근을 할 수 있게 해준다. 소스가 아마도 여러개가 있는 것 같다. gatsby-source라고 시작하는 이름을 가진 플러그인들이다.
gatsby-source-filesystem은 filesystem을 접근할 수 있게끔 해주는 플러그인인 것인데.. 플러그인이 있냐 없냐에 따라 graphql 쿼리 결과가 달라지더라.
gatsby는 react router dom이나 useQuery 같은 apollo 비스무리한 것들이 있긴한데, 따로 설치하는 게 아니라 전부 gatsby 패키지에 포함되어 있다. 오히려 이것저것 설치하지 않아도 되어서 좋다.
useQuery 대신 useStaticQuery를 이용하는데, 뭐 graphql의 사용법이어야 봤자 똑같다.
module.exports = {
siteMetadata: {
siteUrl: "https://www.yourdomain.tld",
title: "my-first-gatsby",
},gatsby-config.js 파일을 보면 위와 같이 siteMetaData라는 항목이 있다.
const data = useStaticQuery(graphql`
query {
site {
siteMetadata {
title
}
}
}
`)위와 같은 쿼리가 이미 설정되어 있기 때문에 위와 같이 쿼리를 해주면 siteMetaData를 읽어올 수 있는 것..
Blog 만들어 보기
일단 , 위에서 언급한 gatsby-source-filesystem을 설치하고 아래와 같이 gatsby-config.js의 plugin을 설정해주면, 사용준비는 된 것.
{
resolve: "gatsby-source-filesystem",
options: {
name: `blog`,
path: `${__dirname}/blog`,
}
},위의 설정에서 path는 data layer를 설정해 놓은 것이고, name 은 각 파일의 sourceInstanceName 필드를 설정한 것이라고 하는데.. 이건 잘 이해가..
무튼 위와 같이 설정을 해 놓고..
query MyQuery {
allFile {
nodes {
name
}
}
}이런 쿼리 문을 주면, 위에서 설정 해 놓은대로 blog 디렉토리에서 파일 노드들을 알려준다.
5. Transform data to use MDX
gatsby-source-filesystem 은 blog file들의 이름들만 리턴을 해줬는데, 실제 내용을 가지고 오려면 transformer plugin 을 사용해야 한다.
gatsby-plugin-mdx
여기 튜토리얼에서는 transfomer plugin 중 하나인 gatsby-plugin-mdx 를 사용할 예정인데, 보통 transformer 플러그인은 gatsby-transformer- 형식을 갖는데, 유일한 예외가 gatsby-pluging-mdx다.
Part 5: Transform Data to Use MDX
설치 & 설정
npm install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/reactmodule.exports = {
siteMetadata: {
title: "My Super Cool Blog",
},
plugins: [
"gatsby-plugin-image",
"gatsby-plugin-sharp",
{
resolve: `gatsby-source-filesystem`,
options: {
name: `blog`,
path: `${__dirname}/blog/`,
},
},
// 추가.
"gatsby-plugin-mdx",
],
};마크다운 관련된 플러그인은 많다.
위의 링크가서 팁을 확인해봄이 좋다.
Here are some popular remark plugins:
-
gatsby-remark-images: Use this if you want to generate responsive images when using the Markdown image syntax (which looks like this:
).- To use this plugin, you’ll also need
gatsby-plugin-sharp, which you installed already in Part 3.
- To use this plugin, you’ll also need
- gatsby-remark-prismjs: Add syntax highlighting to your code blocks.
- gatsby-remark-autolink-headers: Automatically create links for all the headers in your Markdown content.
Try searching for gatsby-remark- in the Gatsby Plugin Library for a full list.
위와 같이 설정하고, graphiql playground에서 아래와 같은 코드를 넣어서, 잘 작동하는 확인을 해보면 된다.
query MyQuery {
allMdx(sort: {fields: frontmatter___date, order: DESC}) {
nodes {
frontmatter {
date(formatString: "MMMM D, YYYY")
title
}
id
body
}
}
}위의 쿼리문을 이용해서 blog.tsx 의 코드를 아래와 같이 바꿔주면..
const BlogPage: React.FC<PageProps> = ({ data }) => {
return (
<Layout pageTitle="My Blog Posts">
<p>My cool posts will go in here</p>
{(data as any).allMdx.nodes.map((node) => (
<article key={node.id}>
<h2>{node.frontmatter.title}</h2>
<p>Posted: {node.frontmatter.date}</p>
<MDXRenderer>{node.body}</MDXRenderer>
</article>
))}
</Layout>
);
};
대략 이런식으로 완성이 된다. 굿
6. Create Pages Programmatically from data
위의 내용과 연장선상에 있는 것인데..
{
allMdx {
nodes {
slug
}
}
}slug까지 기본적으로 만들져 있다.
src/pages/{mdx.slug}.tsx 에 페이지 컴포넌트를 만들어주면…
[http://localhost:8000/{slug}](http://localhost:8000/{slug}) 페이지를 만들어준다. 자.동.으.로…
특정 페이지 쿼리
query MyQuery($id: String) {
mdx(id: {eq: $id}) {
frontmatter {
title
date(formatString: "MMMM D, YYYY")
}
body
}
}allMdx가 아니라 mdx라고 쿼리를 주면 되고, 변수 id가 있음..을 알면 된다.
위의 내용에 보면 PageProps의 타입 때문에 고민된다고 하였는데, PageProps도 이미 제네릭 타입으로 되어 있어서, 타입을 추가할 수 있다.
export type PageProps<DataType, PageContextType, LocationState>
로 되어 있다.
const BlogPost: React.FC<PageProps> = ({ data }: { data: any }) => {
return (
<Layout pageTitle={data.mdx.frontmatter.title}>
<p>{data.mdx.frontmatter.date}</p>
<MDXRenderer>{data.mdx.body}</MDXRenderer>
</Layout>
);
};
export default BlogPost;
export const query = graphql`
query ($id: String) {
mdx(id: { eq: $id }) {
frontmatter {
title
date(formatString: "YYYY-MM-DD")
}
body
}
}
`;query와 BlogPage를 위 같이 해 놓으면 mdx를 읽어 올 수 있다.
어려운 내용은 없는데, Page 컴포넌트 query를 저처럼 작성해 놓으면 알아서 정보를 넘겨서 data로 가져올 수 있는.. 구조는 약간 nextjs와 좀 비슷한 냄새가 난다.
blog/index에서 링크 부분을 추가하는 내용은 있지만 크게 어려운 내용은 아니라서 넘기도록 한다.
7. Add Dynamic Images from data
이번엔 이미지를 dynamic 하게 추가하는 내용…
Part 7: Add Dynamic Images from Data
gatsby-transformer-sharp 를 이용한다.
hero image를 이용하기 위함이라는데..
hero image가 뭔지는 잘 모르겠지만, 내용에 있는 것으로는 그냥 블로그 최상단에 있는 그림인 것 같다.
---
title: "Yet Another Post"
date: "2021-07-25"
hero_image: "./jane-almon-7rriIaBH6JY-unsplash.jpg"
hero_image_alt: "A white pitbull wearing big googly-eye glasses"
hero_image_credit_text: "Jane Almon"
hero_image_credit_link: "https://unsplash.com/photos/7rriIaBH6JY"
---
...위와 같이 header 부분에 hero image 관련된 내용이 추가가 됐다.
튜토리얼에 있는 그림이다.
위와같은 내용으로 이미지를 로드해준다는 것인데..
아무튼 간에 transformer라는 것이.. graphql로 데이터를 가져다 준다는 것이니까..
local에 있는 이미지를 graphql로 옮겨준다고 생각을 하자.
설치 및 설정
npm install gatsby-transformer-sharpgatsby-config.js에는 아래 내용을 추가한다.
module.exports = {
siteMetadata: {
title: "My First Gatsby Site",
},
plugins: [
// ...existing plugins
"gatsby-transformer-sharp",
],
}query
위의 설정을 마치고, 블로그에 그림을 넣는데.. 블로그에 그냥 그림을 넣을 수는 없으니까.. 각 블로그 mdx파일의 파일명과 동일한 디렉토리를 만들어서 mdx파일을 각각 index.mdx로 설정을 해준다.
이를테면, first-blog.mdx 라는 파일이 있었다면.. first-blog라는 디렉토리를 만들어서 first-blog.mdx파일명은 그 밑에 index.mdx로 변경을 하자는 것..
그리고 쿼리문..
query ($id: String) {
mdx(id: {eq: $id}) {
frontmatter {
title
date(formatString: "MMMM D, YYYY")
hero_image_alt
hero_image_credit_link
hero_image_credit_text
hero_image {
childImageSharp {
gatsbyImageData
}
}
}
body
}
}위처럼 해줄 수 있어서 imagedata를 가져올 수 있다. gatsbyImageData는 json 타입이다.
위처럼 설정을 해주고,
import { GatsbyImage, getImage } from 'gatsby-plugin-image'
const image = getImage(data.mdx.frontmatter.hero_image)
//...
<GatsbyImage
image={image}
alt={data.mdx.frontmatter.hero_image_alt}
/>이렇게 사용해줄 수 있게 되는 것…
