Headless CMS란? (feat. Sanity)

1. CMS란?

CMS는 Content Management System의 약자로, 콘텐츠를 관리하는 시스템을 의미한다.

콘텐츠 관리와 프론트엔드 디스플레이를 결합한 통합 시스템이라 생각하면 된다.

 

사용자가 콘텐츠를 생성, 편집 및 관리할 수 있는 관리자 인터페이스를 제공하고 이를 데이터 베이스에 저장하는 역할을 한다.

관리자용 인터페이스가 제공되기 때문에 개발자가 아니어도 쉽게 콘텐츠를 관리할 수 있다. 

 

단, 컨텐츠와 프론트엔드 화면이 연결되어 잇기 때문에 콘텐츠를 수정했을 때, 화면에 영향이 갈 수도 있다. 

 

 

2.  HeadlessCMS란?

HeadlessCMS는 일반적인 CMS와 달리 콘텐츠 관리와 프론트엔드 디스플레이를 분리한 것을 말한다.

콘텐츠 관리는 특정한 백엔드 시스템에서 이루어지고, 해당 콘텐츠는 API를 통해 외부 시스템에 제공된다.

 

프론트엔드와 데이터는 완전히 분리되기 때문에, 어디서 렌더링 할 것인지 자유자재로 선택할 수 있다. 

따라서 일반적인 CMS보다 유연하고 확장 가능한 애플리케이션을 구현할 수 있다. 

 

예를 들면, 웹과 앱에 동일한 컨텐츠를 표시하게끔 하는 것이 가능하다.

 

 

3. Sanity

HeadlessCMS의 한 종류로 콘텐츠를 생성 관리 및 배포하는 데 사용되는 도구이다.

 

1) 설치

Sanity: The Composable Content Cloud

 

Sanity를 사용하는 방법은 간단하다. 

우선 위 사이트에 들어간 후 회원가입을 한다.

 

 

그 후 프로젝트를 생성해준다.

질문에 맞는 답을 선택한 후, continue를 누르면 된다. 

 

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

 

그 후 나오는 명령어를 복사해서 Sanity를 사용할 프로젝트에 실행해 준다.

 

Sanity를 사용하는 방법에는 외부에서 사용하는 것과 내부에서 사용하는 것 두 가지가 있다.

외부에서 사용하고 싶다면, 독립적인 백에드 폴더를 생성한 후, 그곳에서 설치하면 된다.

 

만일 내부에서 사용하고 싶다면, 프로젝트 내에서 명령어를 입력해 주면 된다.

 

Ok to proceed? (y)  //해당 패키지를 설치할건지
Login type?  // sanity 계정에서 사용했던 타입을 선택, sanity에서 로그인
Project output path?  //프로젝트 설치할 경로
Packge manager to use for installing dependencies?  //사용할 패키지 선택

 

그러면 위 질문이 나오는데, 모든 질문을 완료하면 자동으로 sanity가 설치된다. 

 

 

2) 사용방법

npm run dev

 

sanity를 실행하고 싶으면 sanity 파일로 이동한 후 npm run dev를 해주면 된다.

그럼 localhost:3333에서 화면을 볼 수 있다. 

 

//schemaTypes/user.js

export default user {
  ...
}

//schemaTypes/index.ts
import user from './user';

export const schemaTypes = [user]

 

연결하는 방법도 간단하다. 

schemaTypes 폴더 안에 스키마 파일을 만들어 준다.

 

그 후, schemaTypes/index.ts에서 해당 파일을 연결해 주면 된다.