반응형 Canva10 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. 8. Canva에 앱 만들기. Text Input / Number Input Canva Text InputCanva 의 Text Input 의 document 는 여기에서 자세히 볼 수 있습니다. 일단 써보기기본적인 옵션들부터 알아보면 } end={} />placeholder 는 값이 없을 때 보여주는 hint 같은거.start 는 input 앞쪽에, end 는 input 뒷쪽에 있는것들을 정의합니다.이렇게 하고 앱을 실행해보면, SearchIcon 이 안 보이네요. 예제에 나와있는대로 했는데, icons_SearchIcon 은 따로 정의가 필요한가봅니다. 아이콘 사용하기 react 에서 icon 을 사용하기 편한 방법으로 icon을 추가해봅니다.npm install react-icons그리고 소스 상단에 import 를 합니다.import { FaSear.. 2024. 7. 14. 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. 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 반응형
