>Hello V

이 블로그는 어떻게 만들었을까?

2020-06-22 — Written by jslee
#Gatsby#blog

(작성중) gatsby는 여러개의 plugin을 붙여서 내가 원하는 사이트를 만들수 있으며, 어느정도의 개발 능력이 요구되는것은 사실이다. 처응메는 짠 하고 만들면 바로 사용을 할 수 있을거라고 생각했지만 조금씩 내가 원하는 기능을 붙이려고 시도해보면 많은 어려움을 겪게 된다. tutorial, starter를 참고하면서 작성하면 도움이 된다.

블로그 개발에 참고한 문서

  1. Tutorial
  2. Docs
  3. Doc을 언제 다읽지 싶은데, recipes를 읽다 보면 중간중간 중복되는 부분이 있어서 금방 읽는다.
  4. Recipes

  5. Pages and Layout

    • page와 layout을 어떻게 구성하는지와 흐름에 대해서 설명 (gatsby-node.js, template)

  6. Styling with CSS

  7. creating & modifying pages

  8. gatsby-theme-plugin

  9. sourcing data

  10. querying data

    • tag와 같이 데이터에서 쿼리를 통해 특정 포스트만 가져오는 방법
    • useStaticQuery hook (gatsby v2.1)
    • filtering, sort limiting,

  11. working with images

    • static 하게 src/images에 있는 이미지 불러올때 사용 (md를 사용하는것은 아님)

  12. transforming data

    • data fetch를 하고, 어떤 전처리를 할때 사용 (JSON을 Javascript object로 변환)
    • gatsby-transformer-remark을 이용해서 markdown files을 HTML로 변환

  13. deploying your site

    • 어디에 deploy를 할지에 대한 내용, github, gitlab, netflify 등 배포가 가능하다.
    • netflify에 배포하기
    • 이후에 A/B Testing with GA가 가능 참고
  14. Reference Guides

  15. Deploying & Hosting

  16. Custom Configuration

  17. Images, Files & Video in Gatsby

    • graphQL을 만드시 사용해야 하는 것은 아님, import, static folder를 이용
    • Working with Images in Markdown

    • frontmatter field에 넣기 위해서는 gatsby-plugin-sharp and gatsby-transformer-remark or gatsby-plugin-mdx 사용

    • post, image를 동일한 폴더에 넣는 설정 or image를 다른 폴더에 넣는 설정 가능

    • fontmatter에는 featuredImage로 경로 추가

      • 이미지가 있는 포스트 템플릿 만드는 code

    • inline images with gatsby-remark-images

      • markdown body에 image를 추가 하기 위해서는 gatsby-remark-images, gatsby-plugin-sharp를 설치
    • gatsby-transformer-remark를 사용하는 config
    • Preprocessing External Images
    • local이 아닌 github이나 외부에 있는 이미지를 추가할때 참고

  18. Sourcing Content & Data

    • load data from anywhere!
    • 실제 외부에서 데이터 가져올때 참고하자

  19. Querying Your Data with GraphQL

    • createPage가 어떻게 동작하는지 (/w no data)
    • data를 created pages로 넘기기 위해서는 context를 createPage로 넘겨야 한다.
    • context는 templates에서 props의 형태로 사용이 가능
    • slug을 넘겨서 다시 재쿼리 하도록 예제 코드
    • 이후 build에서의 performance를 얻기 위해서는 performance implications
    • Querying Data in Pages with GraphQL
    • tag가 가능한 page를 어떻게 만드는지 에대한 내용
    • staticQuery, useStaticQuery로 대체
    • 컴포넌트에서 GraphQL 데이터 사용
    • (추천) 또는 v2.1.0 이후에 react hook을 이용한 useStaticQuery
    • hook을 내가 다시 만들어서 siteMetaData관련된 hook을 생성할수있다. (반복되는 코드를 줄이때 좋음) 코드

    • 한계로는

      • 변수를 허용하지 않음
      • 현재 gatsby에서 쿼리가 작동하는 방식 때문에 파일에서 하나의 useStaticQuery 인스턴스만 지원
    • Using GraphQL Fragments
    • graphQL의 쿼리의 일부를 재사용할 수 있다. 또한 복잡한 쿼리를 더 작고 이해하기 쉬운 구성요소로 나눌 수 있음
    • 이후에 query가 복잡해지면 보는게 좋을듯
    • Creating Slugs for Pages
    • createNodeField를 통해 slug을 추가할수 있다.
    • Creating Pages from Data Programmatically
    • createPage에서 slug을 넘기고, slug을 context로 받아 template에서 slug을 사용해 markdown 데이터 가져오는 방법, 코드
    • Adding Markdown Pages
    • 위에서 했던 얘기 또 함
    • Adding a List of Markdown Blog Posts
    • /pages/index.js에 posts를 쿼리하고 forloop을 돌림 (+filtering)
    • PostLink Components에 대해서도 코드 있음 (slug을 Link to)
    • GraphQL Playground
    • localhost:8001이 싫다면 해당 tool을 설치해서 사용할수 있음
  20. Starters
  21. Gatsby로 만든 사이트의 코드를 함께 확인이 가능해 초기에 사용하는게 좋다. (400개정도 제공)
  22. 초기에 starter로 사이트를 만들면 우와! 라고 생각하고, 그 사이트에 다른 사이트를 붙여볼텐데, 그 방법보다는 신규 프로젝트에 내가 우와! 하는 사이트를 붙여보자. 웹개발 할때는 급한 마음에 코드를 붙이다가 내가 어떤 코드를 붙이고 있었는지 에러가 왜 나는지 확인하기가 어려웠다. 무조건 초기 프로젝트는 내가 생성하자 (천천히 가더라도)
  23. 프로젝트 구조가 다들 다르다. (=합칠때 프로젝트의 구조가 점점 오염된다. 기준이 필요)
  24. Theme
  25. amstredam
  26. Gatsby-Lifecycle

GraphQL 정리

Markdown 목록 모두 가져오기

{
  allMarkdownRemark {
    edges {
      node {
        frontmatter {
          path
        }
      }
    }
  }
}

Markdown, Images 가져오기

https://www.gatsbyjs.org/docs/working-with-images-in-markdown/#querying-for-images-from-frontmatter

  • fluid는 responsive image를 생성할때 사용
export const query = graphql`
  query PostQuery($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
        featuredImage {
          childImageSharp {
            fluid(maxWidth: 800) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`

내가 참고한 starter

1단계

참고한 gatsby-starter

2단계

  • 댓글기능 추가
←markdown에 instagram 추가 하는 방법반가워 브이야→
@doubly