반응형 Canva6 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. 3. Canva에 앱 만들기. canva-apps-sdk 설치 Canva에 앱 만들기. canva-apps-sdk 설치 아래 사이트가 canva app sdk 입니다.https://github.com/canva-sdks/canva-apps-sdk-starter-kit GitHub - canva-sdks/canva-apps-sdk-starter-kitContribute to canva-sdks/canva-apps-sdk-starter-kit development by creating an account on GitHub.github.com 이 git repository 을 clone 해서 개발을 해야합니다. 1. clone Canva SDKmac 의 terminal 에서 (또는 윈도우의 cmd 에서) clone 할 경로로 이동한 후에 git clone 을 합니다.gi.. 2024. 6. 30. 2. Canva에 앱 만들기. 개발환경 설정 (mac) Canva App 개발 환경 설정 mac캔바에 앱을 생성할 때, 로컬 개발환경이 필요합니다.필요한 것은,gitNode.js v20.10.0npm v10여기에 webstorm 또는 vs code 1. git 설치이미 있으신 분들은 터미널에서 다음 명령어로 확인하시면 됩니다.git --version # git version 2.40.0없을 경우 아래와 같이 설치 합니다.brew install git아직 brew 설치가 되어있지 않다면... 참고 2. Node js v20.10.0nvm 으로 위 버전을 맞춰야 합니다.# 만약 nvm 이 없다면 brew install nvm# m1 이상은arch -arm64 .. 2024. 6. 30. 1. Canva에 앱 만들기. Canva Developers Canva 에 앱 만들기 제가 만들려고 하는 캔바 앱은 아래와 같은 기능입니다.클라우드 DB에 있는 시험 문제 데이터를 가져와서 템플릿에 텍스트로 추가하는 기능의 앱 입니다.결과는 아래와 같이 나옵니다. 여기에 캔바의 기본 기능인 번역 기능을 쓴다면,이렇게, 선택한 텍스트 박스만 번역할 수 도 있고,페이지 전체를 번역할 수 도 있습니다. 이렇게 캔바에 들어가는 App 자체를 개발하는 방법은 캔바에 있는 Developers 의 가이드 문서밖에 없더라고요.(네이버 / 구글 / 유툽 에 검색해도 안나오므..)그래서 블로그로 개발 방법을 남겨보려고 합니다.삽질은 저만 하는 것으로.. preparation 1. Canva 에 가입해서 계정 만들기https://www.canva.com/ko_kr/가입은 무료, 가입.. 2024. 6. 29. 이전 1 다음 728x90 반응형
