말이 참 어렵다... strapi가 뭘까? 왜 필요함?

입사 9개월 차에 접어들어가는데, 리액트 / 넥스트 js 공부하다 보면 데이터를 불러와서 뿌려주고, 이것 저것 테스트 하고싶어지는게 많아진다. 하지만 데이터는 한정적이고, 테스트 하기에는 부족하다.

그래서 데이터베이스를 직접 만들자니 공부해야 하는 것들이 느므느므 너~~~무 많다. 장고, 몽고DB, Node.js 서버환경 구축.. 리액트와 타입스크립트, 넥스트, 프론트엔드 프레임워크와 라이브러리도 넘쳐나고 공부해야 하는 것들이 태산같은 상황에서... 그것 까지 공부하기 벅참... (하기시졍..🙈)

그래서 api만 어떻게 쏙쏙 빼내서 쓸 수 있는 방법이 없을까.. 생각하고 있을 때 strapi가 나타남..

🚀 날아라 Strapi

💞 Strapi란?

Bootstrap + API를 줄여서 Strapi라고 한다. Strapi는 Node.js 웹 프레임워크 중 하나인 Koa 기반으로 구현되었으며, 풀 커스터마이징이 가능한 개발자 우선(Developer-first) 오픈소스 Headless CMS이다.

❓ Headless CMS란?

말이 참 어렵다. CMS란 Content Management System의 약자로, 콘텐츠 관리만을 위한 서비스이다. 기존 CMS는 뷰와 콘텐츠가 결합되어 있지만 Headless CMS는 내가 원하는 기술스텍을 사이트로 구성 할 수 있다.

❗ Strapi 장점

• 빠른 개발환경 구축
• 높은 확장성, 오픈소스 생태계가 활발
• 구글 로그인 등 15개의 인증 Provider

등등 다른것들은 어려운 말들이 많음.. 나중에 공부해볼께...ㅎㅎ

💞 Strapi install

npx create-strapi-app@latest direactory-name --quickstart
yarn create strapi-app direactory-name --quickstart

실행할때는

yarn run develop

💞 Strapi 사용방법

설치하면 http://localhost:1337/admin 으로 들어가라는 문구가 뜸.
들어가면 이런 페이지가 보임.

• Content Manager : 어떤 데이터 카테고리가 있는지 보여짐.
• Content-Type Builder : 데이터 직접 삽입하는 카테고리
• Media Libarary : 이미지 업로드 목록

💞 Strapi + Cloudnary

하 strapi 버전이 바껴서 한동안 설정이 안올라와서 애먹음..
https://strapi.io/blog/add-cloudinary-support-to-your-strapi-application 요기보고 따라하면됨,

❗ 데이터 모두 불러오기

여기서 http://localhost:1337/api/events 로 불러오면

이런식으로 데이터가 들어온다. 그래서 데이터 처리해서 예쁘게 가공해서 써야한다. 데데이터 가공처리 하는 방법은

• 하드코딩으로 직접 빼내서 page에 전달하는 방법.
• axios로 요청 후 interceptors로 가로채서 페이지에 전달해 주는 방법이 있다.

그리고 http://localhost:1337/api/events로 요청하면, 이미지를 포함한 포맷 정보가 들어와 있지 않는다.,, ㅠㅠ 그래서 찾아보니 쿼리 하나를 추가해서 보내야 한다.

`http://localhost:1337/api/events?populate=*`

이렇게 요청해야 모든 정보가 잘 들어와 있다! 강의 들을 때 버전이랑, 지금 많이 바뀌어서 3 달 전 쯤 들을 떄는 애먹었었는데 2월달에 strapi 사이트에 업뎃이되서 한결 수월함 ㅠㅠㅠ

❗ 필터링 데이터 요청

요것도 버전 바뀌면서 바뀜!

공홈예시

const qs = require('qs');
const query = qs.stringify({
  filters: {
    username: {
      $eq: 'John',
    },
  },
}, {
  encodeValuesOnly: true,
});
await request(`/api/users?${query}`);
// GET /api/users?filters[username][$eq]=John

만약 Throwback Thursdays with DJ Manny Duke 네임을 갖고 있는 정보를 찾고 있다면,

http://localhost:1337/api/events?filters[name][$eq]=Throwback Thursdays with DJ Manny Duke

이렇게 요청해야 한다.

쿼리 매개변수(자주 사용)

• $eq : 같음
• $contains : 포함
• $notContains : 포함하지 않음
• $startsWith : 시작
• $endWith : -로 끝남

자세한 정보 => strapi filter 사이트

아 근데 레알 개편한거같음.

---

출처 : 더핑크퐁컴퍼니 기술블로그 - strapi 1년이면 풀스텍을 읊는다.