반응형 App4 7. Canva에 앱 만들기. Select (dropdown) Canva app 에 사용하기 Canva developers 에는 여기에 설명되어 있습니다.아래와 같이 Select Box 를 생성합니다. tag 로 생성import { Select } from "@canva/app-ui-kit"; // select 추가// 생략 {}, description: 'Unfortunately you can\'t select me, you must pick a fruit', disabled: true, label: 'Chocolate', value: 'chocolate' }, { label: 'Strawberry', value: 'strawberry' }, { description: 'Why .. 2024. 7. 2. 6. Canva에 앱 만들기. api 호출 using axios Canva App 에서 axios 사용 1. axios 설치npm 으로 axios 를 설치합니다.npm install axios그럼 설치가 완료되고 package.json 에 axios 가 추가된 것을 확인 할 수 있습니다.이렇게 해야 앱을 캔바에 배포할 때, 필요한 3rd party library 가 설치됩니다.2. axios 사용importimport axios from "axios"; 호출해볼 api 는 AWS lambda 로 생성해보겠습니다.aws Lambda 에서 함수를 생성하는 방법은 아래 글을 참고하시면 됩니다.https://hello-bryan.tistory.com/579 AWS Lambda 따라하기 - Hello WorldAWS 에 가입 하는 것은 생략~!aws 콘솔에 접속해서 Lambd.. 2024. 6. 30. 5. Canva에 앱 만들기. Button Canva App Button Canva 의 App 영역에 표시 될 수 있는 요소들은 아래의 Canva dev 의 storybook 에 나열되어 있습니다.여기서 필요한 components 들을 사용할 수 있습니다.https://www.canva.dev/docs/apps/app-ui-kit/storybook/?path=/docs/canva-app-ui-kit-action-button--docs @storybook/cli - Storybook www.canva.dev 우선 자주 쓰는것 위주로 사용 예제를 작성해보겠습니다.Button가장 기본적인 코드는 {}} variant="primary"> Click Mealignment : "center", "start", "end"variant : "primary".. 2024. 6. 30. 4. Canva에 앱 만들기. localhost 에서 app 띄우기 Canva App 개발. 로컬 소스로 앱 띄우기이전 글까지 진행했다면, 로컬에 소스가 있을 것입니다.IDE 로 소스를 오픈하고, IDE 자체 터미널로 하든 시스템 터미널로 하든1. 실행canva-apps-sdk-starter-kit 경로에서 다음 명령어로 시작합니다.npm start 그럼 아래와 같이 보여지면 성공적으로 실행이 된 겁니다. 여기에서 주의!바로 브라우저에서 localhost:8080 한다고 해서 뭐가 보이는건 아닙니다. 2. 로컬 앱 접속이제 Canva 에서 앱을 생성하도록 하겠습니다. 아래 canva dev 앱으로 이동해서 Create an app 을 클릭합니다.https://www.canva.com/developers/apps그럼 다음 화면이 나옵니다.내 앱을 전체 공개로 할 것인지,.. 2024. 6. 30. 이전 1 다음 728x90 반응형
