반응형 전체 글577 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. homebrew 설치하기 Mac에서 Terminal을 이용해 Homebrew 설치하는 방법이번 포스팅에서는 Mac에서 패키지 관리 시스템인 Homebrew를 설치하는 방법에 대해 알아보겠습니다. Homebrew는 macOS에서 패키지 설치를 간편하게 해주는 도구로, 개발에 필요한 다양한 소프트웨어를 손쉽게 설치하고 관리할 수 있게 해줍니다.Homebrew란?Homebrew는 macOS와 Linux에서 사용할 수 있는 패키지 관리자입니다. 사용자 친화적인 명령어로 다양한 소프트웨어를 설치하고, 의존성 문제를 자동으로 해결해줍니다. 이제 Homebrew를 Mac에 설치하는 방법을 단계별로 살펴보겠습니다.Homebrew 설치 준비Homebrew를 설치하기 전에 몇 가지 준비 사항이 있습니다.macOS 최신 업데이트 확인: 먼저 mac.. 2024. 6. 29. 1. Canva에 앱 만들기. Canva Developers Canva 에 앱 만들기 제가 만들려고 하는 캔바 앱은 아래와 같은 기능입니다.클라우드 DB에 있는 시험 문제 데이터를 가져와서 템플릿에 텍스트로 추가하는 기능의 앱 입니다.결과는 아래와 같이 나옵니다. 여기에 캔바의 기본 기능인 번역 기능을 쓴다면,이렇게, 선택한 텍스트 박스만 번역할 수 도 있고,페이지 전체를 번역할 수 도 있습니다. 이렇게 캔바에 들어가는 App 자체를 개발하는 방법은 캔바에 있는 Developers 의 가이드 문서밖에 없더라고요.(네이버 / 구글 / 유툽 에 검색해도 안나오므..)그래서 블로그로 개발 방법을 남겨보려고 합니다.삽질은 저만 하는 것으로.. preparation 1. Canva 에 가입해서 계정 만들기https://www.canva.com/ko_kr/가입은 무료, 가입.. 2024. 6. 29. AWS Lambda 따라하기 - Hello World AWS 에 가입 하는 것은 생략~!aws 콘솔에 접속해서 Lambda 를 검색합니다. AWS → Lambda → 함수 생성블루프린트는 샘플 코드가 미리 입력된 람다 함수를 생성하고, 거기에서 수정하는 것이라고 보시면 됩니다. 간단한 hello world 를 만들것이라서 "새로 작성" 을 선택합니다.이 예제에서는 python 으로 작성하겠습니다. 편하신 언어로 작성하시면 됩니다. 그리고 함수 생성 버튼 클릭기본 코드가 작성되어 있는데요.이 함수가 호출되면 lambda_hander() 라는 메소드가 호출됩니다.그 안에 코드를 변경하고 deploy 하면 함수가 배포됩니다. 그 전에 테스트를 해보려면, Test 버튼을 누르며 됩니다.테스트 구성 팝업창이 뜰텐데요.Test 로 실행 할 때 파라메터를 작성할 수 .. 2024. 6. 29. AWS Lambda란 AWS Lambda란?안녕하세요, 이번 포스팅에서는 AWS Lambda에 대해 알아보겠습니다. AWS Lambda는 Amazon Web Services(AWS)에서 제공하는 서버리스 컴퓨팅 서비스입니다. 서버를 직접 관리하지 않고도 코드를 실행할 수 있게 해주는데요, 이를 통해 개발자들은 인프라 관리에 신경 쓰지 않고 코드 작성과 비즈니스 로직에 집중할 수 있습니다.AWS Lambda의 특징서버리스 아키텍처AWS Lambda의 가장 큰 특징은 서버리스(Serverless) 아키텍처입니다. 이는 물리적 서버나 가상 서버를 관리할 필요 없이, 코드를 작성하고 실행할 수 있음을 의미합니다. 코드를 업로드하고 실행 조건을 설정하면, 나머지는 AWS가 알아서 처리해줍니다.이벤트 중심의 실행AWS Lambda는 이.. 2024. 6. 29. [Intellij] Feature Branch 로 작업하기 IntelliJ에서 Feature Branch 만들고, Pull Request 날려서 머지하기 develop라는 브랜치가 있다고 하겠습니다.여기에 새로운 기능을 추가할 일이 있다면, develop 브랜치를 바로 수정할 수도 있겠지만, feature branch를 만들면 여러 가지 장점이 있습니다. 예를 들어, 독립적으로 작업할 수 있고, 코드 리뷰를 쉽게 받을 수 있으며, 실수로 인해 develop 브랜치를 망가뜨릴 염려가 줄어듭니다.이번 포스트에서는 IntelliJ IDEA에서 develop 브랜치를 체크아웃하여 feature/new 브랜치를 만들고, 수정한 후 PR(Pull Request)을 통해 병합하는 과정을 단계별로 설명해보겠습니다.1. Develop 브랜치 체크아웃먼저, IntelliJ IDE.. 2024. 5. 21. [Notion] 노션 요금 폭탄 월 8달러 요금을 쓰고있었다.어쩌다 맴버 7명을 초대하게 되었다. 그런데 청구된 것을 보니 뜨억.. 이게 뭐야4월에 $480 ???65만원... 카드 등록해뒀더니 나도 모르게 결제가 되었네 5월에도 191달러..다행히 이번달은, 쓰던 카드가 만료되어 새로 발급 받아서 결제가 아직 되지 않았다.이거 나도 모르게 계속 빠져나갈 수 도 있었다는 생각에 ㄷㄷㄷ왜 이렇게 많이 나온거지?생각해보니, 처음에 월 8달러씩 쓰는거 1년으로 결제 했다.그래서 맴버 추가에도 1년으로 계산된 것..맴버당 8달러.. 처음엔 5명의 맴버였으니 월 40달러고 1년이면 곱하기 12 하니까 480 달러..그 다음에 두명 추가했으니 8달러에 두명, 16달러에 1년이면 곱하기 12니까 191 달러가 나온거다. 이런 노션 같으니라고..게.. 2024. 5. 7. [VUE] pinia 사용하기 (vuex 대신) - vue2, vue3 함께 사용 가능- vuex 보다 간단하고, 직관적임mutations 없음.Typescript 를 지원.아주 빠르고 정확한 autocompletionnamespaced modules 없음devtools 공식 지원 설치yarn add pinia# ornpm install pinia# orpnpm install pinia vuejs 의 main.js 에서import { createApp } from "vue";import { createPinia } from "pinia";import App from "./App.vue";const app = createApp(App);app.use(createPinia());app.mount("#app");vue2 를 사용한다면import { crea.. 2024. 5. 5. 이전 1 2 3 4 5 6 ··· 58 다음 728x90 반응형
