[리액트(React)] Gatsby

// Gatsby

- 정적 사이트를 구축하는 리액트 기반 프레임워크

- 기존 리액트에서 작업하는 것과 동일하게 작업하고, 빌드 후 배포할 때  모든 리액트요소를 html로 변환해준다.

- 데이터를 편리하게 가져올 수 있도록 GraphQL을 사용한다.

- 공식 사이트 :https://www.gatsbyjs.com/

The Best React-Based Framework | Gatsby

---

▪ 설치

npm install -g gatsby-cli

---

▪ 프로젝트 생성

gatsby new

- 원하는 위치에 명령어를 입력한다.(터미널)

- JavaScript를 쓸지 TypeScript를 쓸지, CSS 는 어떤 것을 쓸지 등을 선택하여 프로젝트를 생성한다.

---

▪ 프로젝트 실행(React 방식)

npm run develop 
또는
npm start

- Client Side Rendering(CSR)으로 프로젝트를 실행한다.

▪ 프로젝트 실행(Gatsby 방식)

npm run build
npm run serve

- Static Site Generation(SSG) 프로젝트를 실행한다.

---

// 라우팅, Routing

- 리액트에서는 별도로 react-router을 설치해서 router을 설정해주어야 하지만, Gatsby는 프레임워크이기 때문에 자체 규칙만 따르면 된다.

- pages 디렉토리 하위의 파일명이 경로가 된다.
  ~ blog.tsx > https: ~~~ /blog

※ 여러 페이지의 레이아웃을 통일하기 위해서는 Layout 컴포넌트를 만들고 props를 넘기는 것이 일반적이다.

---

// GraphQL

- 데이터를 효율적으로 관리할 수있게 도와주는 쿼리 언어

- 공식 사이트: https://graphql.org/

GraphQL | A query language for your API

---

▪ 쿼리 규칙

query 쿼리명 {
  원하는 필드
}

▪ useStaticQuery

- 컴포넌트에 데이터를 넣을 때 사용한다.

const data = useStaticQuery<Queries.SeoDataQuery>(graphql`
  query SeoData {
    site {
      siteMetadata {
        title
      }
    }
  }
`);

▪ pageQuery

- 페이지에 데이터를 넣을 때 사용한다.

function Blog({ data }: PageProps<Queries.BlogTitlesQuery>) {
  return (
    <Layout title="Welcome">
      <ul>
        {data.allFile.nodes.map((file, i) => (
          <li key={i}>{file.name}</li>
        ))}
      </ul>
    </Layout>
  );
}

export const query = graphql`
  query BlogTitles {
    allFile {
      nodes {
        name
      }
    }
  }
`;

---

// 이미지

- gatsby-plugin-image, gatsby-plugin-sharp 플러그인을 설치하여 사용한다.

- 이미지를 webp 형식으로 변환해서 로딩한다.

▪ 설치

npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp

▪  gatsby-config.ts 파일 설정

plugins: {
  `gatsby-plugin-image`,
  `gatsby-plugin-sharp`,
  `gatsby-transformer-sharp`,
],

▪ 정적 이미지 사용

<StaticImage
  src="이미지url"
  alt=""
  placeholder=""
/>

- placeholder 속성으로 이미지가 로드되기 전 이미지 효과를 줄 수도 있다.

▪ 동적 이미지 사용

<GatsbyImage image={} alt={} />

- graphQL로 이미지를 가져올 때 placeholder 효과를 줄 수도 있다.

gatsbyImageData(height: 450, placeholder: BLURRED)