업무 처리 하며 포폴 구상하던 도중 이번 달 내에 cms 구축 관련 작업(B2B)이 있을 수 있다는 기획자 분의 말씀을 듣고🥲 기존에 사내에서 활용하던 cms가 strapi로 구성되어 있었던 것을 떠올려 잠시 strapi 관련 정리를 해보았다.
(입사 당시 구축이 완료되어있었고, 개발 과정에서 관련 api 연동 및 개발계 entry 일부 컨트롤 하였으나 기본 구조나 세팅 관련 경험은 없는 상태)
먼저 해당 포스트는 공식 문서와 함께 아래 링크들을 참고하였음을 알린다 :-)
Strapi란?
"Bootstrap + API"
Strapi는 Node.js 웹 프레임워크 중 하나인 Koa 기반으로 구현되었으며, 풀 커스터마이징이 가능한 개발자 우선(Developer-first) 오픈소스 Headless CMS이다.
- CMS : Content Managament System의 약자로, 콘텐츠 관리만을 위한 서비스를 의미
- Headless CMS : content와 view를 분리하여, 콘텐츠 편집자는 익숙한 GUI로 콘텐츠 추가/수정/삭제를, 개발자는 restful api를 통해 데이터에 접근할 수 있는 구조
- 이 곳에 더욱 자세히 설명되어있다.
장점
- 빠른 개발 환경 구축 속도
- 높은 확장성과 활발한 오픈소스 생태계
- GraphQL을 지원
- Shadow CRUD 지원
- Shadow CRUD : 모델을 생성하면 해당 모델의 CRUD를 구현한 REST API / GraphQL endpoint 자동으로 생성해주는 기능
- 15개의 인증 Provider 지원 (Discord, Facebook, Github, Google, Instagram, Linkedin, Twitter ...)
- RBAC (Role-Based Access Control; 역할 기반 접근 제어) 가능
- SQLite, PostgreSQL, MySQL, MariaDB
, MongoDB지원
여기까지만 읊어봐도.. strapi 사용 이유는 충분한 것 같고, 특히 shadow CRUD나 RBAC, 여러 DB 지원 등은 현업에서 사용하면서도 정말정말 편리하다고 느꼈던 부분들이다.
개발 환경 셋팅
1. npx create-strapi-app cms-project
2. yarn develop 로컬 개발 환경 구동 (기본 주소 http://localhost:1337/)
3. 로그인
4. collection type 생성
content-type builder > create new collection type
위에서 Display name을 입력해주면 API ID 두 가지는 자동으로 입력된다. (name이 한글일 경우에는 따로 입력이 필요할 듯 하다.)
일단 간단한 Todo List를 만들어보기 위해 type을 text로 지정하고 Item이라는 field name을 입력해주면, 위와 같은 화면을 볼 수 있다.
5. entry 생성
Content Manager > (생성한 Collection Type 선택) > create new entry
아까 field type을 text로 지정했으므로 item은 text만 입력할 수 있고, 입력을 마친 후에는 save / publish를 클릭해 버튼이 'unpublish' 상태로 바뀐 것을 확인해줘야한다. (입사 후 처음 cms 만질 때 publish 안하고 api 호출해 잠시 헤맸던 기억이..🙄)
6. api 호출 전 세팅
외부 접속을 위해 Setting > USERS & PERMISSIONS PLUGIN > Roles 항목에서 Todo 내의 Select all에 체크해두었다. 이후 각 action에 hover하면 세팅 아이콘이 나타나는데, 클릭하면 우측에 API 주소가 노출된다.
7. postman test
postman으로 호출해보니 잘 동작한다!
이번엔 기초적인 내용만을 다뤘고, 다음 포스팅에서 조금 더 세부적인 내용을 다뤄 볼 것이다 💪💪💪
