개츠비 튜토리얼 -1

개츠비 튜토리얼을 저만의 식으로 하겠습니다.

npm install -g gatsby-cli

을 합니다. cli를 이용해서 gatsby파일을 쉽게 만들어 보도록 합니다.

gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

이런식으로 gatsby 명령어를 사용하고, starter를 다운을 받도록 합니다.

그러면 gatsby 파일이 생성이 됩니다.

이런식으로 파일이 생성이 됩니다.

그 후 루트파일로 넘어가게 되면 gatsby.config.js 파일이 있는데, 여기서 이제 각종 plugin 과 설정을 해주도록 합니다.

• gatsby-source-filesystem

-src 안에 있는 파일에 접근하거나 만들 수 있는 모듈들을 제공

• gatsby-transformer-remark

-MarkdownRemark된 파일들을 찾아서, graphql에 html, excerpt, headings 필드를 제공한다.

• gatsby-plugin-styled-components

-styled-componets를 사용할 수 있게 해준다

• gatsby-plugin-typography

-typograph를 플러그인을 사용함.

이 4가지의 플러그인 을 사용할 것입니다

plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
  //src 안에 있는 파일에 접근가능
    `gatsby-transformer-remark`,
    `gatsby-plugin-styled-components`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: '',
        // typography 파일을 만든 path로 작성
      },
    },
  ],

이렇게 하고, gatsby develop (npm run develop) 을 하고 localhost:8000 에 접근하게 되면,

와 같은 화면을 얻게됩니다. 이 화면은

import React from "react"

export default function Home() {
  return <div>Hello world!</div>
}

여기에서 나오게 되는 화면입니다.