🚀 얼레벌레 만들면서 시작
gatsby cli
1. gatsby global 로 설치하기
yarn global add gatsby-cli
2. gatsby 프로젝트 만들기
gatsby new [프로젝트이름] [적용할 테마 주소] // 근데 나는 테마 사용하지 않을것이라 프로젝트 이름만 적어준다.3. gatsby 실행시켜보기
yarn start
yarn develop실행시킨 후 localhost:8000 으로 접속 가능하다.
큰 폴더구조는 react와 비슷하다.
- content : blog의 마크다운 파일들을 저장하는 폴더
- public : 정적 파일
- src : 동적 파일
보통 src 안에있는 파일들만 건들것이다.
src 안의 폴더구조는 이러하다.
- components : 컴포넌트들을 모아놓은 폴더
- images : 이미지를 모아놓은 폴더
- pages : 페이지 라우팅을 도와주는 폴더 (next.js의 pages와 같다고 본다)
- templates : template 폴더
공통적으로 들어가는 header , footer 같은것들은 react-router-dom 의 < Oulet /> 처럼 따로 Template.jsx 파일을 만들어서 관리해줬다.
// template.jsx
const Template = ({ children, gatsbyImageData }) => {
return (
<Wrap>
<Header profileImage={gatsbyImageData} />
<GlobalStyle />
{children}
<Footer />
</Wrap>
);
};// index.js
const IndexPage = () => {
return (
<component.Template gatsbyImageData={gatsbyImageData}>
<component.CategoryList selectedCategory={selectedCategory} categoryList={categoryList} />
<component.PostList posts={edges} />
</component.Template>
);
};
export const Head = () => <Seo title='Home' />;
export default IndexPage;나는 gatsby 로 블로그를 만들어야하기때문에 markup 파일을 읽어오게 해야한다.
gatsby 에서 graphql query 읽어오기
gatsby에서는
1. pages 폴더 내부의 파일
2. Gatsby API를 통해 생성된 페이지의 템플릿 파일
에서만 쿼리 정의가 가능하다.
그렇기 때문에 나는 쿼리를 /pages/index.js 에 읽어오게 했다.
// pages/index.js
export const getPostList = graphql`
query getPostList {
allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date, frontmatter___title] }) {
edges {
node {
id
fields {
slug
}
frontmatter {
title
summary
date(formatString: "YYYY.MM.DD.")
categories
thumbnail {
childImageSharp {
gatsbyImageData(width: 768, height: 400)
}
}
}
}
}
}
file(name: { eq: "profile-image" }) {
childImageSharp {
gatsbyImageData(width: 120, height: 120)
}
}
}
`;
오랜만에 보는 graphql에 또 눈앞이 아득해진다..
내가 예전에 사용했던 라이브러리인 apollo client를 사용해보려 했는데 gatsby에서 apollo 라이브러리가 있지만 잘 사용하지 않고 굳이 사용하지 않아도 블로그를 만드는데는 큰 어려움이 없을듯 하여 이번에는 쌩으로 사용했다.
http://localhost:8000/___graphql위의 url에 들어가게되면 내가 현재 사용할수있는 graphql의 쿼리들을 확인할수있다.
옆의 폴더 모양을 눌러서 쿼리들 확인 가능!
내가 적어놓은 쿼리를 조금 말하자면 allMarkdownRemark 에 있는것들을 sort 시켜놓은것인데
gatsby 공식 홈페이지 레퍼런스를 보면 친절하게 잘 설명되어있다
https://www.gatsbyjs.com/docs/graphql-reference
이렇게되면 이제 어떻게 되느냐
모든 데이터들은 data 라는 변수로 들어가게된다 (graphql이 원래 그럼)
markdown 처리를 위한 gatsby 라이브러리
화면 css를 끝냈다면 실제로 markdown 파일을 읽어들여야 한다.
그러려면 gatsby에서 제공해주는 라이브러리들을 이용해야한다.
-
gatsby-transformer-remark
Markdown Parser 역할을 하는 라이브러리.
마크다운 문법을 HTML 형태로 변환해주어 띄워줄 수 있도록 해주는 핵심 라이브러리. -
gatsby-remark-images
마크다운 문서 내에서의 이미지 사용을 최적화해주는 라이브러리.
다양한 반응형 이미지 생성, 동적 로딩 등 다양한 기능을 제공. -
gatsby-remark-prismjs & prismjs
prismjs는 문법 하이라이팅 역할을 담당하는 라이브러리.
소스코드를 실제 IDE에서 보는 것처럼 변환해주는 기능을 제공. -
gatsby-remark-smartypants
해당 라이브러리는 글 내에서 사용되는 여러 문장 부호들을 더 깔끔한 부호로 바꿔주는 기능을 제공.
이를 통해 글의 가독성을 보다 더 높일 수 있다. -
gatsby-remark-copy-linked-files
마크다운 내에서 사용되는 이미지를 특정 디렉토리로 복사해주는 라이브러리.
일반적으로 루트 디렉토리의 public 디렉토리에 이미지들이 복사된다. -
gatsby-remark-external-links
이 라이브러리는 마크다운 내에서 사용되는 링크 태그의 target, rel 등의 속성을 지정해주는 기능을 제공해준다.
1. 라이브러리 다운받기
yarn add gatsby-transformer-remark gatsby-remark-images gatsby-remark-prismjs prismjs gatsby-remark-smartypants gatsby-remark-copy-linked-files gatsby-remark-external-links 2. gatsby-config.js 에 사용하는 라이브러리 추가.
gatsby는 라이브러리를 사용할때 따로 gatsby-config.js에 그 라이브러리를 사용한다고 적어주어야 하며
따로 옵션이 필요하면 그것도 여기에 같이 적어준다.
//gatsby-config.js
/**
* Configure your Gatsby site with this file.
*
* See: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-config/
*/
/**
* @type {import('gatsby').GatsbyConfig}
*/
module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
author: `@gatsbyjs`,
siteUrl: `https://gatsbystarterdefaultsource.gatsbyjs.io/`,
},
plugins: [
`gatsby-plugin-image`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-plugin-emotion`,
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `contents`,
path: `${__dirname}/contents`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: 'gatsby-remark-smartypants',
options: {
dashes: 'oldschool',
},
},
{
resolve: 'gatsby-remark-prismjs',
options: {
classPrefix: 'language-',
},
},
{
resolve: 'gatsby-remark-images',
options: {
maxWidth: 768,
quality: 100,
withWebp: true,
},
},
{
resolve: 'gatsby-remark-copy-linked-files',
options: {},
},
{
resolve: 'gatsby-remark-external-links',
options: {
target: '_blank',
rel: 'nofollow',
},
},
],
},
},
],
}3. gatsby-browser.js 에 테마를 불러오는 코드 추가
// gatsby-browser.js
import 'prismjs/themes/prism-tomorrow.css';4. markdown 파일을 읽어오는 옵션 추가하기
// gatsby-config.js
module.exports = {
siteMetadata: { ... },
plugins: [
...,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `contents`,
path: `${__dirname}/contents`,
},
},
...
],
};gatsby-source-filesystem 라이브러리 옵션 중, path 옵션을 확인해보고
해당 경로에 마크다운 파일을 저장해야 gatsby 라이브러리에서 불러온다.
이제 진짜 Markdown 써서 화면에 뿌려보기
나는 위에서 contents 라는 폴더에 markdown 파일을 넣겠따고 gatsby-config.js 파일에 정의를 해주었기 때문에 contents 폴더에 test.md 라는 파일을 만들어보겠다.
이때 주의해야할것이 있는데 contents 폴더는 root 디렉토리 안에 있어야 한다.
//test.md
---
date: '2020-07-29'
title: 'Test'
categories: ['Web', 'SEO', 'Optimization']
summary: '홈페이지를 운영하는 많은 사람들 또는 기업들이 검색 페이지 최상단에 보여지게 하기 위해 어떤 최적화 작업을 하는지 알아보자.'
thumbnail: './test.png'
---
### 1. Help Google Bot to Find My Contents
구글에 SiteMap을 제출하여 사이트에 있는 파일로서 새 페이지나 변경된 페이지가 있을 때 이를 검색 엔진에 알려주도록 할 수 있다.
SiteMap은 사이트에 있는 페이지, 동영상 및 기타 파일과 각 관계에 관한 정보를 제공하는 파일로, 검색 엔진은 이를 읽고 사이트를 더 지능적으로 크롤링 할 수 있게 된다.
### 2. Use 'Robots.txt' File
Robots.txt 파일은 검색 엔진에 어떤 페이지를 크롤링해도 되는지 알리는 파일로, 서버의 루트 디렉토리에 있어야 한다.
과도한 Robots.txt 파일은 더 많은 방문자를 유도할 수 있는 정상적인 검색 엔진 크롤러의 접근을 막을 가능성이 있기 때문에 적절하게 설정해야 한다.
---
## Source
- SEO 기본 가이드
[<https://support.google.com/webmasters/answer/7451184?hl=ko&ref_topic=9460495>](https://support.google.com/webmasters/answer/7451184?hl=ko&ref_topic=9460495)
여기서 신경써야하는것은 상단의 이부분이다.
---
date: '2020-07-29'
title: 'Test'
categories: ['Web', 'SEO', 'Optimization']
summary: '홈페이지를 운영하는 많은 사람들 또는 기업들이 검색 페이지 최상단에 보여지게 하기 위해 어떤 최적화 작업을 하는지 알아보자.'
thumbnail: './test.png'
---이부분의 date , title , categories, summary, thumbnail 을 가지고 미리보기 화면에 뿌려줄것이기 때문에 설정을 잘 해주어야한다.
이후 밑에 적고싶은 글들을 마크다운으로 적어내린 후 index 에서 불러온 graphql data를 우리가 위에서 받은 라이브러리를 이용하여 뿌려주면 된다.
(사실 라이브러리를 이용한다기 보다는 라이브러리를 설치했기 때문에 graphql에서 해당되는 마크다운들을 변수로 받아올수있다 뭐 그런느낌
// component/PostItem.jsx
const PostItem = ({
title,
date,
categories,
summary,
thumbnail: {
childImageSharp: { gatsbyImageData },
},
link,
}) => {
return (
<Wrap to={link}>
<ThumbnailImage image={gatsbyImageData} alt='Post Item Image' />
<Content>
<Title>{title}</Title>
<Date>{date}</Date>
<Category>
{categories.map(category => (
<CategoryItem key={category}>{category}</CategoryItem>
))}
</Category>
<Summary>{summary}</Summary>
</Content>
</Wrap>
);
};
export default PostItem;미리보기 페이지라 해야하나..? 메인에서 미리 내용과 썸네일을 뿌려주는 component인 PostItem componet 에서 데이터들을 받아와서 뿌려준다.
그리고 해당 component를 눌렀을때 각각의 페이지로 이동하게 되는데
그 해당 내용들을 채워주는 컴포넌트들 component/post 폴더에 넣어놓았다.
어떤느낌이냐면 이런느낌...
//component/post/PostContent.jsx
const PostContent = ({ html }) => {
return <MarkdownRenderer dangerouslySetInnerHTML={{ __html: html }} />;
};header 부분은 적당히 꾸미면 되고
여기서 중요하게 해줄일은 markdown 파일을 인식해서 html로 불러오는건데 우리가 앞전에 markdown 파일을 html로 변환시키는 라이브러리를 설치했기때문에 graphql에서 html로 받아온값을 뿌려주기만 하면 된다.
graphql에서 데이터를 확인해봐도 잘 들어옴!
이제 이 데이터를 react의 dom element 에 삽입하면 된다.
innerHTML을 사용하면 되지않나? 하는데 innerHTML을 사용하면 DOM 요소가 수정되었을때 알수있는 방법이 없다한다. 그렇기 때문에 react에서 innerHTML을 대처할 방법을 만들어 두었다.
dangerouslySetInnerHTML
그것이 바로 dangerouslySetInnerHTML! 이것을 사용하게 되면 가상DOM과 실제DOM을 비교하여 변경된것이 있다면 리렌더링 할 수 있게 해준다.
코드에서 html을 설정하는것은 사이트간의 스크립팅 공격에 노출될수 있어 위험하기 때문에 위험 을 상기시키기 위해 이름이 dangerouslySetInnerHTML 을 작성하고 html 키로 객체를 전달해야한다.
graphql에서 받아온 html 값을 html 키로 전달시켜주면 손쉽게 화면에 html 화면이 뿌려진다!
이렇게 하게되면 markdown 파일을 html로 바꿔서 화면에 뿌려주기 까지 완료!
[레퍼런스]
https://www.inflearn.com/course/gatsby-%EA%B8%B0%EC%88%A0%EB%B8%94%EB%A1%9C%EA%B7%B8
