# strapi
CSP에 대하여, img_src에 문제가 있다.
문제파악 "strapi-provider-upload-supabase-v4": "^1.0.19" 로 strapi와 supabase의 storage를 연동해서 이미지가 media library에 잘 업로드되고 사용했다. 하지만, 다른 곳에 호스팅을 둔 IMG_SRC를 못 불러오는 현상을 발견했다. strapi market에서도 이미지를 못 불러오는 모습 strapi market에서도 이미지를 못 불러오는 모습 velog 또는 google에서 긁어온 img_src를 불러오지 못하는 모습 여기서 console에 error가 찍히는 모습
next 13 그냥 쓰지맙시다. _ Strapi 나만의 블로그 만들기(4)
😵💫 최대한 가볍게 사실 화면을 구현할 것도 없었다. 정말 간단한 블로그라 데이터를 불러오고 카드형식으로 뿌리고 클릭했을 때 detail page만 나오면 되는 초간단 사이드프로젝트였다. 그 자만이 나를 지옥으로 이끌었으니,,, nextjs + javascript + picoCss (개발보다 문서작업이 더오래걸려서 ts 가져다 버림) next13으로 바뀌면서 기본 문법들이 많이 바뀌었다. 그래서 기존 블로그 보고 참고하면 다 작살날 수 있으니, 반드시 공식문서를 참고하자. 구상 잘 구현된 백엔드 서버 데이터를 rest-ful 하게 불러와서 사용하면 된다. ssr이 대세가 된 이유는 검색엔진최적화가 잘 되기 때문이다 (SEO) 이는 서버사이드에서 데이터를 다불러다가 주기 때문에 초기
nextjs와 strapi의 편안한 만남_ Strapi 나만의 블로그 만들기(3)
로직 🤗 back to front = rest api 지난 글에서 백엔드 로직을 짜보았다. 50%는 완성되었나 싶었는데, 아직 갈 길이 멀다. 프론트로 넣어서 어떻게 보여줄 것인가의 작업이 남아있다. 사실 보여주는게 제일 중요하다. 일단 data를 넘겨 받아와야하는데 strapi는 restAPI 와 graghPL을 제공한다. 나는 익숙한 restAPI를 활용해보고자 한다. 백엔드의 데이터를 활용하는데 2가지 방법이 생겼다. supabase의 API를 활용하는 방법 supabase는 자체적으로 api를 제공한다. 그래서 next.js에 supabase를 연동시키고 api를 불러와서 쓰는 방식이 있다. strapi의 API를 활용하는 방법 도메인 / api / collect
AWS RDS + Strapi 프로젝트 생성
1. RDS에서 DB생성 1-1. AWS RDS 접속 > 데이터베이스 메뉴 1-2. 데이터베이스 생성 1-3. MySQL, MariaDB, PostgreSQL 이 셋중에 원하는 DB선택 (필자는 PostgreSQL) 1-4. 보안그룹 생성 EC2 서비스에 접속하여 보안그룹 메뉴로 이동합니다. 보안 그룹 생성을 선택하고 아래와같이 인바운드 규칙을 설정합니다. 1-5. 데이터베이스 생성에 필요한 항목 입력 > 필자는 PostgreSQL의 프리티어로 진행했기때문에 성능과 용량에 대한 설정은 본인의 환경에 맞게 설정해주세요 마스터 사용자 이름, 마스터 암호, 하단 추가구성에 초기 데이터베이스 이름은 strapi연결에 필요
Gatsby & Strapi 연동하기
0. Gatsby & Strapi 프로젝트 생성 Gastby 프로젝트 생성 : gatsby new 'project-name' Strapi 프로젝트 생성 : npx create-strapi-app@latest 'project-name' 1. Strapi setting localhost:1337 접속 후 admin계정 생성 2. DB 생성 (Strapi에선 collection이라고 하는것 같지만 DB와 같음) 테이블 이름 정하기 Content-Type Builder -> COLLECTION TYPES -> Create new collection type 
오픈소스 Headless CMS Strapi 설치 및 사용법
❓ Strapi란? Bootstrap + API를 줄여서 Strapi라 함 오픈소스 Headless CMS 오로지 콘텐츠 관리만을 위한 서비스 테이블과 REST API 등을 쉽게 생성할 수 있어 콘텐츠 데이터를 보다 쉽게 제공할 수 있음 프론트엔드 개발자에게는 풀스택의 길로 갈 수 있는 혁신적인 기술 1. 설치 yarn 또는 npx 패키지를 통해 설치할 수 있음 (이 글에선 생략) yarn 명령으로 설치 Quickstart 선택(추천!) sqlite DB로 자동으로 기본 설치를 진행할 수 있음 Custom 선택 sqlite, postgres, mysql 중 하나 선택해서 DB 설정할 수 있음 DB 변경시 config/database.js 파일 수정 예시) Mysql(혹은 MariaDB) 설정 2. 실행 명령어 실행 (개발)
[Strapi] Custom API 생성
http://localhost:1337/api/products/90?populate=* 현재 위의 URL로 id가 90인 product에 대한 data를 API를 통해 요청하면 아래와 같이 모든 field의 데이터를 response으로 받는다. 하지만 프로젝트에서 특정 product의 reviews만 불러오는 API가 필요해서 아래와 같은 response를 반환하는 API를 만들려고 한다. API 생성 API를 생성하기 위해 필요한 routes, services, controller 폴더와 파일들을 직접 만들 수도 있지만 편하게 CLI를 사용하겠다. > yarn strapi generate 위 명령어를 입력하고, 첫번째 선택지에서 `api -
REST API 디자인하기 / Strapi
https://strapi.io/ https://docs.strapi.io/developer-docs/latest/getting-started/quick-start.html#_1-install-strapi-and-create-a-new-project 위 링크의 튜토리얼대로 REST API 디자인을 해보았다. 먼저 터미널에서 strapi 설치를 한다. npx create-strapi-app@latest my-project --quickstart 자동으로 열리는 회원가입 창에서 가입을 한다. http://localhost:1337/admin 이제 관리자 패널에 접속할 수 있게 된다. Content-Type Builder 탭에서 새 Collection Type을 만든다. >#### Create a "Restaurant" collection type Go to Plugins Content-type Builder icon Content-type Bu
STRAPI설치
STRAPI란? 간단히 설명한다면 STRAPI는 DB와 쉽게 연동해서 RESTful 또는 GraphQL방식으로 데이터를 받고 내주는 백앤드 역활을 톡톡히 해주는 UI라이브러리라고 할수있습니다. 서론 퍼블리셔 또는 프론트 엔드 개발자가 보통의 경우에는 api까지 만들일은 없을것입니다. 그래서 백엔드 개발자분이 api개발중인 시간동안 목업 데이터 등으로 임시로 데이터를 만들어서 구현을 하곤 합니다. 그러다가 알게된게 strapi라는 툴입니다. 간단하게 설치하여 코드 한줄 안치고 Frontend UI를 이용하여 빠르고 쉽게 api를 제작할수있습니다. api를 통한 업무나 공부를 하고싶었던 저에게는 매우 획기적이였습니다. 특징 strapi의 특징은 다양합니다. 1.REST
[Strapi] react-hook-form & Cloudinary로 이미지 업로드 하기
플러그인 설치 > @strapi/provider-upload-cloudinary plugin 파일 생성 경로 : config/plugin.js Cloudinary 가입 및 환경변수 설정 Cloudinary에 가입한 뒤 Dashboard 탭에 들어가면 나오는 Cloud Name, API Key, API Secret을 .env 파일에 넣어준다. 경로 : .env Admin Panel의 Media Library에서 이미지 미리보기가 깨지는 현상 해결 Strapi의 Admin Panel에 이미지를 업로드 하면 Cloudinary에도 업로드 되는 걸 확인할 수 있다.  id를 기본으로 부여받는다. 이게 별로라 productId라는 이름의 UID field를 생성해줬다. 그리고 POST 요청으로 product를 추가할 때, nanoid를 사용해서 productId를 새로 넣어줬다. 그 결과 마음에 드는 아이디를 만들 수 있었다. 그럼 이제 http://localhost:1337/api/products/1처럼 id를 이용하지 않고 `http://lo
(라이브러리) Strapi : for Headless Commerce
Strapi Node.js 기반 오픈 소스 헤드리스 CMS다. > CMS(Contents Management System)란? DB에 데이터를 전달할 수 있도록 웹 관리자 화면을 제공하고, 웹 관리자에서 내용을 입력하면 CMS가 가진 프론트엔드 UI를 통해 코딩없이 웹사이트를 만들 수 있도록 솔루션을 제공하는 것을 말한다. Strapi는 Front UI 대신 API 제공해준다. 따라서 Strapi에 Headless가 붙는다. 이렇듯 strapi는 DB, 웹관리자, API까지 쉽게 구축을 도와주는 BFF(Backedn for Frontend)로서 역할을 제공한다. strapi를 설치하면 웹관리자 화면에서 DB 생성 및 REST API를 생성할 수 있다. 언제든지 API 파일에 액세스할 수 있고 커스텀할 수 있다. 더불어, 고급 필터링, 정렬 및 페이지 매김, 인증 관리 등을 지원한다. strapi 실행하기 
코딩없이 백엔드 API 서버 구축하기 (Strapi + Heroku)
강의 개요 이 강의는 Headless CMS(Contents Management System)인 Strapi를 이용해서 빠르게 백엔드를 구성해보는 과정입니다. Headless CMS란 Frontend가 없는 CMS를 의미합니다. CMS는 보통 > DB에 컨텐츠를 입력하는 웹관리자화면을 제공하고, 웹관리자에서 내용을 입력하면, CMS가 가진 Frontend UI를 통해 코딩없이 웹사이트가 만들어질 수 있게 해주는 워드프레스나 그누보드 같은 솔루션을 의미합니다. Strapi에 Headless가 붙은 이유는 Frontend UI 대신 API까지만 제공해주는 Frontend가 없는 CMS이기 때문입니다. 즉, DB + 웹관리자 + API 까지 쉽게 구축을 도와주어 BFF(Backend for F
[블로그만들기] 최근 읽은 포스트 기능 (typescript)
✨ 최근 읽은 포스트 목록 구현 기능 구현 유저가 최근에 읽은 포스트 목록을 제공한다. strapi를 활용해 최근 읽은 포스트 db 모델을 설계한다. intersection observer 를 활용해, 유저가 포스트를 끝까지 읽었는 지 확인할 것이다. 최신 순서대로 정보를 제공한다. (예를 들어 유저가 a,b,c 순으로 포스트를 읽었으면 c-b-a 순으로 보여주고, 유저가 a포스트를 다시 읽으면 a-c-b 순으로 보여준다. postman을 활용해 api 테스트를 진행할 것이다. 1. 최근 읽은 포스트 DB 모델 🏷 relation Relation 관련 strapi 공식 문서 최근 읽은 포스트에서는 2가지 정보가 필요하다.
2/24 정리
*공부한 내용을 토대로 혼자서 정리하는 글입니다. 틀린 부분이나 보충할 부분 지적 언제든 환영합니다 :) RESETful RESTful API란? > 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고,HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 strapi 실행 명령어 > strapi가 설치된 디렉토리로 이동 >\- npm run develop : 시작 명령어 >\- Ctrl + C : 종료 http://localhost:1337/admin 로 접속 문제풀이 Q . 블로그 서비스의 API 내용 작성 특정 블로그글의 댓글조회 > 특정 블로그의 글들은 articles로 접근 > 하나의 블로그 글에 접근할 때는 unique한 숫자(ID)로 접근 > 하나의 글에 달려있는 댓글들은 comments로 접근 > 특정 블로그 글에
.gif)
데브폴리오 strapi 사용기 (1) - firestore vs Headless CMS 선택하기
데브폴리오를 개발하기 시작했을 때는 앞으로 서비스 규모가 어떤 방향으로 얼마나 확장될지 불투명했다. 토이프로젝트 큐레이팅 해주는 서비스에 대한 반응이 어떨지 테스트하는 것이 주목적이었다. 초기 버전에서 제공하고자 하는 핵심 기능은 심플했다 - 방문자에게 괜찮은 토이프로젝트 정보를 보여주는 것. 여기서 기능을 추가하더라도 로그인, 좋아요, 댓글 정도가 되지 않을까. 그래서 서버 구축 및 관리 리소스를 줄이고 싶었다. 결국 strapi 라는 Headless CMS를 사용해보기로 했고, 현재 4개월째 잘 사용하고 있다. 비슷하게 백엔드 없이 프로젝트를 개발할 프론트 개발자들에게 참고가 되길 바라며 내 경험을 적어본다. [](http
strapi만든 api 커스텀하기! (2)
strapi로 api 만들고 커스텀하기! strapi 커스텀 하기 전 기본설정 Users 정보 수정하는 api 지금부터 strapi를 커스터마이징 하여 users의 정보를 update 하는 api를 만들어볼것이다. 어떻게? 👇🏻 화면 기록 2021-08-07 오후 7 57 13 구글링과 strapi 깃허브를 참고하여 use
코드 한줄도 안쓰고 api개발 🔥
strapi 코드를 한줄 도 쓰지 않고 RestApi를 만들 수 있는 오픈소스 라이브러리 📚📚 strapi 공식사이트 프로젝트 quick start~ 서버구동 기본 화면 구성과 항목 추가하기 image > strapi 다운로드 후 로그인 브라우저 창이 뜰 것이다 이것이 바로 대시보드! > 우선 대시보드에서 Create New collection Type을 이용해 크게 필드를 생성해줍니다. 
strapi로 만든 API 배포 후 서비스에서 사용해보기
strapi로 만든 API 배포 후 서비스에서 사용해보기 (1) 프리온보딩으로 진행한 [자란다 assignment]의 과제를 위한 프로젝트 (원티드 + 위코드 + 임팩트캠퍼스) 프리온보딩 세번째 과제였던 자란다의 assignment 🙆♀️ > 🏄🏻 Assignment3 자란다 이번 과제는 이전과 다르게 양이 방대하기도 하며 애자일이라는 새로운 업무 프로세스를 적용한 과제여서 그런지 3일이었던 과제기한이 5일로 늘었다. 8팀에 속해있던 나는 기본적으로 8명이서 한팀을 이루는 다른팀과 다르게 중도 포기자가 있어 5명으로 팀이 구성되었다. 팀전체가 함께 진행하게 되는 프로젝트이기에 팀내 소통과 역할분담이 이전 프로젝트 보다 더욱 중요하고 책임감을 갖게 한다 🦁 첫번째 미팅 팀원분들중 한분인 영후님께서 피그마에 대략적인 UI 구조
postman으로 strapi에서 생성한 database 호출하기
1. strapi에서 테이블 생성 제목과 내용을 담을 수 있는 Post라는 이름을 가진 테이블을 하나 생성하려 합니다. terminal에서 strapi를 실행하여 첫페이지 좌측 PLUGINS의 Content-Types Builder 에서 +Create new collection type을 클릭합니다. Post 테이블 생성 field 추가 해보기 -1) 제목 (name은 contents로, type은 short text로 설정) ![](h