정적사이트 컨텐츠를 API로 간편하게 관리하기 - 데브폴리오 strapi 사용기 (2)

지난글에서 firestore에 한계를 느껴 백엔드를 대체할 수 있는 다른 서비스를 알아보다가 정적 사이트의 특성에 최적화된 Headless CMS를 사용해보기로 한 배경을 적었다. 이번에는 strapi로 어떻게 데브폴리오 API를 만들었는지 적어보려 한다. 데브폴리오 strapi의 스크린샷을 가져오지 못하는 경우에는 strapi 튜토리얼에 있는 이미지를 가져왔다.

Contentful, Sanity, Prismic 등 Headless CMS는 기존 CMS와 달리 컨텐츠를 뷰와 커플링하지 않고 독자적인 API를 제공한다. 사이트를 만드는데 무슨 기술을 사용하든 상관 없다. 그 중 Strapi는 신생 서비스지만 커뮤니티가 빠르게 성장하고 있으며 다양한 use case에 대한 템플릿과 튜토리얼이 자주 업데이트 된다는 점이 신뢰가 가서 선택했다. 게다가 완전히 무료다.

Strapi에서 제공하는 백엔드 템플릿을 서버에 스스로 배포만 하면 바로 API로 사용할 수 있기 때문에 Strapi에서는 이 템플릿들을 starter라고 부른다. 블로그, 개발자 포트폴리오, 쇼핑몰, 기업소개 사이트 등 정적 사이트의 대표적인 use case를 모두 여기서 확인할 수 있다. React, Next.js, Vue, Nuxt.js, Angular 와 같은 javascript 프레임워크와 연동방법에 대한 튜토리얼도 제공한다.

데브폴리오의 초기모델은 블로그와 유사하기 때문에 리액트 블로그 예시를 참고했다. 2020년 1월 최초 작성이지만 이후 꾸준히 업데이트 되고 있으며 몇주 전에도 업데이트 된 것을 볼 수 있다.

starter에 관리자 페이지 UI도 포함되어 있다. 이를 다운 받아 서버에 띄우면 {hostname}:1337/admin 관리자 페이지로 접속하여 회원가입 하고 즉시 컨텐츠를 관리할 수 있다.

Article, Category, Writer 3가지 collection type에 대한 데이터가 예시로 이미 추가되어 있다. (collection type이란 RDB에서 테이블 개념이라고 보면 된다.) Content-Types Builder 메뉴에서 새로운 collection type을 추가할 수 있다. 지원되는 데이터 종류는 다음과 같다.

각 필드의 Advanced Settings으로 디폴트 값, 정규식 패턴, 필수 여부, 유니크 여부, 최소/최고 길이, 프라이빗 여부를 설정할 수 있다.

이렇게 collection type을 추가하고 나면 해당 게시판에 들어가 개별 entry를 추가할 수 있다.

마지막으로 Settings > Roles > Public/Authenticated > Permissions 에서 각 collection type의 CRUD 권한을 설정할 수 있다. 물론 Role을 추가해 더 다양한 레벨의 권한을 설정하는 것도 가능하다.

이것으로 {hostname}:1337/articles 등 고유 주소로 내가 방금 추가한 데이터를 REST API로 받아볼 수 있게 되었다. 백엔드 로직을 커스터마이징 하고 싶다면 다운 받은 백엔드 템플릿에 코드를 덮어쓰고 재배포하면 된다. Controllers, Models, Routes, Services 모든 파트에서 커스터마이징하는 방법에 대한 가이드를 이곳에서 확인할 수 있다.

여기서 추가로 graphql 플러그인 설치도 할 수 있지만 사실 추천하지 않는다. 쿼리의 디폴트 sort 덮어쓰기가 아직 지원되지 않는다는 것을 얼마전에 확인했는데 비슷한 한계가 아직 많을 것이라 예상되기 때문이다.

그럼에도 불구하고 지금까지 써본 결과 정적 사이트 컨텐츠를 위한 REST API를 빠르고 간편하게 만드는 목적에는 좋은 툴이라고 생각한다. 관리자 페이지가 직관적이고 백엔드 개발 흐름과 유사하게 개발자 친화적으로 재현한 느낌이다. 2022년에는 더 많은 개발자들이 strapi를 사용하고 strapi 커뮤니티가 더욱 활발해지기를 바래본다.

토이프로젝트 모아보기 서비스 DevFoliOh! 구경하러 가기