FrontEngineer JungBam

Sanity : Headless CMS(Content management System) 본문

개발일지

Sanity : Headless CMS(Content management System)

정밤톨 2023. 7. 31. 13:03
Headless CMS가 과연 어떤 것인지 알아보자.
 Headless CMS는 콘텐츠 관리 시스템인 백엔드와 클라이언트측 애플리케이션인 프론트엔드를 분리하는 오늘날의 웹 디자인을 위한 관리 시스템이다. 따라서 Headless CMS는 (프론트엔드) 애플리케이션이 해당 콘텐츠에 액세스할 수 있도록 하는 메커니즘과 함께 (백엔드) 콘텐츠 관리 서비스를 담당한다.
 기존 콘텐츠 관리 시스템은 프론트엔드와 백엔드가 분리되어 있지 않았기 때문에 최신 프론트엔드 기술스택을 통해 접근하기 어려움이 있었으나, 프론트엔드와 백엔드의 분리로 인하여 프론트엔드에 영향을 받지 않기 때문에 내가 개발하고 싶은 기술스택을 통해 프론트엔드를 개발할 수 있도록 된 것이다.

 CMS에 대한 기본 지식을 더 얻기 원한다면 아래 링크로 가서 더 자세히 확인해보기 바란다.

 

Headless CMS란 무엇입니까? | Adobe Experience Manager

Headless CMS에 대해 알아봅니다. 어떻게 작동합니까? 대안 및 차이점은 무엇입니까? Headless CMS를 사용하려는 이유는 무엇입니까?

experienceleague.adobe.com

Sanity
:: Sanity Studio나 웹 어플리케이션에서 Content Lake(Cloud)의 데이터에 접근할 수 있는 Headless CMS

 sanity를 어떻게 시작하는지 간단하게 알아보자.

 

1. sanity 사이트에 접속해서 로그인을 하면 아래와 같은 화면이 뜨는데 새로운 프로젝트를 만들어보자.

2. 만들고 나면 아래와 같은 화면이 뜨는데 새프로젝트 초기화의 코드 스니펫을 복사해서 내가 만들어놓은 프로젝트의 root에서 터미널을 열어 붙여넣자.

3. 로그인이 안되어 있다면 로그인이 하라고 뜨면서 로그인 방법을 선택하게 될텐데 선택 후 이동되는 브라우저 창을 통해 로그인 하면된다. 이후 설정은 기본적으로 아래와 같이 하면된다.

:: 터미널에서 하는 것이 잘 안된다면 이 링크를 통해 유튜브 영상으로 확인해보자.

 

4. 설정이 완료되었다면 /studio 경로로 이동하면 아래와 같은 sanity에서 제공하는 화면이 뜰 것이다.
(CORS 어쩌구 창이 뜰 수 있는데 CORS 추가를 해주면 바로 해결된다.)

반응형
Comments