Sanity 사용 방법, 셋업 정리 (feat. Headless CMS)

Headless CMS(Content Management System)

- Headless는 직역하면 머리가 없다는 뜻이다. 즉 웹사이트에서 프론트부분이 아닌 백엔드의 데이터 부분이라고 볼 수 있다.

- 컨텐츠를 저장하고 있는 저장소라 볼 수 있으며, 프론트엔드가 없는 데이터 저장 관리시스템이다.

- Headless CMS의 작동 방법

   * 컨텐츠 편집자와 개발자가 완벽히 분리될 수 있다. 컨텐츠 편집자는 GUI로 컨텐츠를 추가/수정/삭제 할 수 있다.

   * 개발자는 Headless CMS에 Restful API를 통해서 데이터에 접근 가능하다.

 

기존 CMS와 Headless CMS의 차이

CMS

- Monolithic 모놀리틱 : 기존 CMS는 하나의 서비스에 설치된 형태로 사용되어야 했다.

- 서비스와 컨텐츠가 묶여있기 때문에 다른 서비스에서 재활용하기가 힘들다.

- 서비스가 강하게 엮여있기 때문에 컨텐츠를 수정했을때에도 view에 영향을 줄 수 있다.

 

Headless CMS

- 말그대로 서비스와 컨텐츠가 분리되어있어 머리부분인 프론트를 바꿔 끼울 수 있다.

- 웹과 앱에 동일한 컨텐츠를 표시할 수 있으며, 유연하게 컨텐츠를 관리할 수 있다. API를 사용하여 어디서든지 렌더링을 할 수 있다.

- 컨텐츠 수정시에도 더 빠르게 수정할 수 있는 환경을 제공할 수 있다.

---

Headless CMS를 살펴보면 WordPress, Strapi, Sanity 등이 있다.

Strapi는 오픈소스로 커스텀하여 AWS를 통해서 편리하게 사용할 수 있다, 클라우드를 사용하여 편리하게 사용도 가능하다.

이번에 살펴볼 Sanity는 클라우드시장에서 오랫동안 점유율을 차지하고 있으며, 오픈소스는 아니지만 정해진 클라우드를 사용해야한다.

 

개인프로젝트를 하면서 Express를 사용하여 백엔드 서버를 구축하고 AWS에서 S3, RDS를 사용하여 배포하여 사용한 경험이 있다.

Express를 사용하여 Rest 서버를 쉽게 구현하였는데 Sanity는 더 쉽게 서버를 구현할 수 있다. 아니 관리할 수 있다.

복잡한 백엔드 로직을 간소화하여서 작업을 해보자!

Sanity로!

---

Sanity는 그럼 데이터를 어떻게 관리할까?

Sanity에 데이터를 저장하게 되면 Content Lake 클라우드에 저장된다.

여기서 Sanity Studio를 사용하고 Sanity에서 제공하는 API를 사용하여 데이터를 관리할 수 있다.

 

Welcome to Sanity's Documentation

공식문서도 정말 잘 정리되어있기 때문에 어렵지 않게 사용가능했다.

---

사용방법 정리

우선 Sanity Studio를 설치해보자!

Start building를 누르게 되면 이렇게 계정을 연결하고 관심사를 태깅하고 install할 수 있는 명령어가 나온다.

 

여기서 선택을 할 수 있는데 프론트 repo와 함께 사용할것인지, 아니면 Sanity를 따로 repo로 만들어서 관리할 것인지를 선택해야한다.

이번 프로젝트에서는 하나의 repo에서 만들어서 사용했다. 무엇을 선택하던지 중요하지는 않다!

현재 next.js를 사용하고 있는데 next.js에서 개발하는 프론트와는 별개라고 생각하면 된다.

 

설치를 하면 이렇게 sanity의 doscs, manage, help 명령어를 사용할 수 있으니 알아두자!

 

 

sanity를 설치하게 되면 이렇게 확인할 수 있는데 pakage.json을 보면 react를 사용한걸 볼 수 있다!

- react를 사용한다? 밑에서 보시다시피 기본적인 ui를 제공하고 있지만 그외에도 추가적으로 ui를 추가하고 변경이 가능하다는걸 알 수 있다. 그렇기에 필요에 따라서 관리자 페이지를 따로 만들지 않아도 사용할 수 있다고 생각해도 될 것 같다. 자세한 사항은 공식문서에서 확인할 수 있다

---

snatiy studio 실행

만약 front와 같은 repo를 사용한다면 당연한거지만 senity를 설치한 폴더경로로 들어가서 yarn dev를 실행하자.

- 로컬 3333포트로 실행되는걸 볼 수 있는데 ux/ui가 정말 잘되어있다고 생각이 들었다!

* 만약 tailwind를 사용한다면 sanity폴더안에서도 tailwind.config.js를 설정해주어야한다!!!!

 

 

스키마 설정

./schemas/index.ts
export const schemaTypes = []

- schemas 폴더를 보게 되면 Index파일에서 이러한 변수가 있다.

- schema를 사용해서 관계형 데이터베이스가 아닌 json과 같은 타입의 데이터 구조를 가지고 간다

- type이라는 속성을 사용하는걸 알아두자.

 

./schemas/index.ts
export const schemaTypes = [user]

./user.js
import post from './user'

export default {
  title: 'User',
  name: 'user',
  type: 'document',
  fields: [
    {
      title: 'Username', // 스튜디오 UI에서 보는 이름
      name: 'username', // 데이터상의 이름
      type: 'string',
    },
    {
      title: 'Name',
      name: 'name',
      type: 'string',
    },
  ]
}

- 이렇게 name에 맞는 스키마를 작성하고 name은 schemmmaTypes에 import하여 명시해주면 된다.

- title은 sanity-studio에서 볼 title을 작성하고 모델의 이름은 name, type은 document, fieds는 각 해당 데이터들 타입을 작성

- name이라는 키와 type은 어떤 타입인지를 작성

 

   {	
      title: 'Following',
      name: 'following',
      type: 'array',
      of: [
        {
          type: 'reference',
          to: [
            {
              type: 'user',
            },
          ],
        },
      ],
      validation: (Rule) => Rule.unique(),
    },

- 여기서 type을 배열로 하면 여러가지를 가지게 할 수 있다.

- of 안에 type을 reference를 사용하게 되면 다른 데이터를 참고하여 가질 수 있게 한다. 무엇을? to 안에 "user"를 작성!

- validation을 작성해주면 unique를 작성하면  중복되지 않게 가지게 할 수 있다.

 

 

- 그럼 이렇게 따로 데이터를 추가하는 어드민페이지가 없어도 내가 작성한 데이터들의 이름과 타입에 맞게 작성되어 있는걸 볼 수 있다.

- postman으로 테스트를하고 데이터를 넣어두고 했던일은 이제 안해도된다.. 와 진짜 편한데..?

 

---

스튜디오 입맛에 맞게 수정

- 이렇게 보이던 데이터를 이미지와 함께 보여지는 데이터의 글자도 수정할 수 있다.

 

 

이미지 미리보기

 preview: {
    select: {
      title: 'name',
      subtitle: 'username',
      media: 'profile',
    },
  },

- 기본 sanity-studio를 사용하게되면 해당 데이터를 눌러야 데이터를 볼 수 있는걸 알 수 있다.

해당 데이터를 누르지않고 미리보고 싶다면?

- title user의 name, 그리고 subtitle은 username을 볼 수 있도록 media: 에서는 등록한 프로필 이미지를 보여지도록 하게 수정할 수 있다.

- 이런식으로 관리자의 ui도 사용하기에 편리하게 사용할 수 있다.

 

 

데이터 가공

 preview: {
    select: {
      title: 'comments.0.comment',
      authorName: 'author.name',
      authorUsername: 'author.username',
      media: 'photo',
    },
    prepare(selection) {
      const {title, authorName, authorUsername, media} = selection
      return {
        title,
        subtitle: `by ${authorName} (${authorUsername})`,
        media,
      }
    },
  },

- prepare를 통해서 selection을 인수로 가져온다.

- 구조분해를 통해서 보여지게하고싶은 데이터를 수정하면? 내가보고싶은 데이터로 보여지게 할 수 있다.

 

 

---

개인프로젝트를 할때마다 백엔드가 항상 문제였고 headless CMS Sanity를 사용하면 간편하게 작업할 수 있을것 같다.

현재 개인프로젝트를 했던걸 리뉴얼 작업을 진행하고 있는데 Aws로 배포를하고 비용문제 때문에 백엔드를 닫고있어서 걱정이였다.

이번 프로젝트에서 더 사용을 해보고 앞으로 개인프로젝트나 사이드프로젝트에서도 참고하면 좋을 것 같다.