Gatsby에서 sanity 서비스 사용하기

2024-03-11

gatsby, react, sanity

Views: 691

Sanity란?

블로그, 쇼핑몰 등을 편리하게 관리할 수 있는 서비스입니다.
gatsby에서 서버를 사용하지 않고, 정적 블로그를 작성할때 md 파일을 통해서 작성을 하게되는데, 파일 관리가 어려울 뿐더러 프로젝트의 크기가 방대해지는 단점이 있습니다.
이 부분에서 보완도 되고, 추가적으로 간편하게 관리도 할 수 있는 외부 서비스가 Sanity입니다.

장점이라면 서버개발등 지식이 많지 않아도, 간단하게 관리 할 수 있다는 것입니다. 단점으로는 현재는 무료로도 충분하지만 추후 유료화에 대한 부분, Sanity가 미래에 지원할지 여부, Sanity 버전관리 등이 있겠습니다.

Sanity 회원가입

Sanity 공식 홈페이지 사이트에서 가입을 해줍니다.

site

Sanity 프로젝트

프론트엔드 프로젝트로 gatsby를 이용하고, gatsby에서 GraphQL로 sanity스키마를 이용해주는 방식으로 진행할 것입니다. sanity 프로젝트는 백엔드 서버처럼 사용한다고 생각하면 쉽습니다.

템플릿으로 설치하는 방법

다음 커맨드를 입력해주시면 프로젝트가 설치됩니다.

1	npm create sanity@latest -- --template clean --create-project "Sanity Project" --dataset production

아예 초기로 설치하는 방법

처음 초기 버전으로 설치하는 방법입니다.

1
2
3

mkdir sanity-demo && cd sanity-demo
npm install @sanity/cli -g
sanity init

CORS origins

API > Webhooks > CORS origins 부분에서 권한을 줄 URL을 추가해줍니다.

Api Setting

실행

Sanity 프로젝트를 다음 커맨드로 실행합니다.

1	npm run dev

스키마작성 및 배포

export default {
    name: 'project',
    title: 'Project',
    type: 'document',
    fields: [
      {
        name: 'title',
        title: 'Title',
        type: 'string',
      },
      {
        name: 'description',
        title: 'Description',
        type: 'text',
      },
      {
        name: 'thumbnail',
        title: 'Thumbnail',
        type: 'image',
        options: {
          hotspot: true, // 이를 통해 이미지의 중요한 부분을 지정할 수 있습니다.
        },
      },
      {
        name: 'tags',
        title: 'Tags',
        type: 'array',
        of: [{type: 'string'}],
      },
      {
        name: 'startDate',
        title: 'Start Date',
        type: 'date',
      },
      {
        name: 'endDate',
        title: 'End Date',
        type: 'date',
      },
      {
        name: 'createdDate',
        title: 'Created Date',
        type: 'datetime',
      },
      {
        name: 'markdown',
        title: 'Markdown',
        description: 'Write the main content of the post here in Markdown format.',
        type: 'text',
      },
    ],
  }

Sanity 배포하기

1	npm run deploy

Gatsby에 연동

Gatsby프로젝트에서 다음 작업을 진행합니다.

플러그인 설치

1	npm install gatsby-source-sanity

config파일에 추가

gatsby-config.js 파일 플러그인 부분에 추가해줍니다.

module.exports = {
    //...
  plugins: [
    {
      resolve: `gatsby-source-sanity`,
      options: {
        projectId: `abc123`,
        dataset: `blog`,
        // a token with read permissions is required
        // if you have a private dataset
        token: process.env.SANITY_TOKEN,
      },
    },
  ],
  //...
}

1	SANITY_TOKEN=

gatsby프로젝트 루트에 .env 파일을 생성합니다.
process.env.SANITY_TOKEN 부분은 환경변수로 빼놓았습니다.

gatsby-node.js파일에서도 불러올 수 있게 수정합니다.

다음 코드는 예시 입니다. 아래 코드에서 중요한부분은 graphql부분입니다.

const path = require(`path`)

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const postTemplate = path.resolve(`./src/templates/using-post.tsx`)
  const result = await graphql(`
    query AllSanityProject {
      allSanityProject {
        edges {
          node {
            id
          }
        }
      }
    }
  `);

  result.data.allSanityProject.edges.forEach(({ node }) => {
    createPage({
      path: '/projects/' + node.id, // 포스트의 URL
      component: postTemplate,
      context: {
        // 페이지 컴포넌트에 전달될 데이터
        id: node.id,
      },
    })
  })
}

프로젝트에서 사용하기

gatsby-node.js파일에서 설정한 const postTemplate = path.resolve('./src/templates/using-post.tsx')에 해당하는 경로의 파일을 엽니다.

graphql을 이용해서 sanity의 값들을 불러올 수 있습니다.

export const query = graphql`
    query SanityProject($id: String!) {
        sanityProject(id: { eq: $id }) {
            title
            description
            tags
            startDate
            endDate
            createdDate
            markdown
            thumbnail {
                asset {
                    gatsbyImageData(placeholder: BLURRED, layout: CONSTRAINED)
                }
            }
        }
  }
`

const Post: React.FC<PageProps> = ({ data }) => {
  const {
    title,
    description,
    thumbnail,
    tags,
    startDate,
    endDate,
    createdDate,
    markdown
  } = (data as any).sanityProject as ProjectDetailSanityProjectType
  //...

글작성

Sanity 사이트에 로그인해서 studio를 들어가면 생성, 수정, 삭제를 자유롭게 할 수 있습니다.

studio

포트폴리오 사이트를 Sanity를 이용하여 관리하고 있습니다.

팁 - markdown 이미지 등록하는 방법

markdown에서 이미지를 업로드 하고 싶다고 했을때 쉬운방법이 있습니다.
sanity프로젝트의 스키마의 필드부분에 다음을 추가해줍니다.

// field: [
// ...
{
  name: 'markdownImages', // 필드 이름을 복수형으로 변경하여 여러 이미지임을 명시
  title: 'Markdown Images',
  type: 'array', // 타입을 'array'로 변경
  of: [
    {
      type: 'image',
      options: {
        hotspot: true,
      },
    },
  ],
  options: {
    layout: 'grid', // 옵션으로 이미지를 그리드 형식으로 표시
  },
},
//...
//]

다시 배포를 해줍니다.
npm run deploy

이미지 업로드 - 0

그후 스튜디오 사이트에서 확인하면 이미지를 입력할 수 있는 부분이 추가됩니다.
필요한 이미지를 업로드해줍니다.

그리고 추가한 이미지를 클릭하면 팝업이 나옵니다.
오른쪽 상단에 점세개를 클릭해서 copy URL을 해줍니다.

이미지 업로드 - 1

마지막으로 마크다운을 작성하는 필드에 복사한 url을 넣어주면 이미지가 잘 작동하는 것을 확인할 수 있습니다.

![테스트 이미지](https://cdn.sanity.io/images/~~~/~~~/~~~~~~~~.png)
이러한 형식으로 작성하면 됩니다.

플타 앞발자의 삽질로그 👷🏼‍️🛠

frontendreact