반응형 canva7 2. Canva에 앱 만들기. 개발환경 설정 (window) Window 에 nvm 설치 설치 파일 다운로드nvm git 에서 설치 파일 다운로드https://github.com/coreybutler/nvm-windows/releases여기에서 최신버전의 nvm-setup.exe 를 다운로드 받습니다. 다운로드 후 설치를 합니다.중요!설치 경로에 한글이 있다면 cmd 창에서 nvm 실행 시 오류가 발생합니다.경로를 한글이 없는 곳으로 바꿔주세요. 기본값 -> next ... 기본값으로 설치를 하게 되면 경로는 아래와 같습니다. C:\Users\YOUR_USER_NAME\AppData\Roaming\nvm 모두 기본값으로 설치 했다면 환경변수에 자동으로 Path 가 추가됩니다.CMD 창을 띄워서 nvm 을 입력하고 엔터치면 명령어들 목록이 쭉~ 나오면 잘 설치된겁.. 2024. 8. 1. 9. Canva에 앱 만들기. 앱 배포하기 Canva 앱 개발 후 배포하기 지금까지 개발 한 캔바 앱을 배포하겠습니다.일단은 앱이 실행 중 이라면 ctrl + c 로 종료합니다. 그리고 .env 파일을 열어줍니다..envCANVA_FRONTEND_PORT=8080CANVA_BACKEND_PORT=3001CANVA_BACKEND_HOST=http://localhost:3001CANVA_APP_ID=여기에 본인의 앱 ID 를 입력CANVA_APP_ORIGIN=*CANVA_HMR_ENABLED=FALSE앱 아이디는 https://www.canva.com/developers/apps 여기에서 확인 할 수 있습니다.- CANVA_BACKEND_HOST 는 변수 명 그대로 백엔드의 url 인데, 저 같은 경우 lambda 를 호출하고 있으니 그 url 을 .. 2024. 7. 15. 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. Canva에 앱 만들기. Canva Developers Canva 에 앱 만들기 제가 만들려고 하는 캔바 앱은 아래와 같은 기능입니다.클라우드 DB에 있는 시험 문제 데이터를 가져와서 템플릿에 텍스트로 추가하는 기능의 앱 입니다.결과는 아래와 같이 나옵니다. 여기에 캔바의 기본 기능인 번역 기능을 쓴다면,이렇게, 선택한 텍스트 박스만 번역할 수 도 있고,페이지 전체를 번역할 수 도 있습니다. 이렇게 캔바에 들어가는 App 자체를 개발하는 방법은 캔바에 있는 Developers 의 가이드 문서밖에 없더라고요.(네이버 / 구글 / 유툽 에 검색해도 안나오므..)그래서 블로그로 개발 방법을 남겨보려고 합니다.삽질은 저만 하는 것으로.. preparation 1. Canva 에 가입해서 계정 만들기https://www.canva.com/ko_kr/가입은 무료, 가입.. 2024. 6. 29. 이전 1 다음 728x90 반응형
