Leon's Lab

설치 Quasar 프로젝트 시작할때 옵션에서 골라서 설치하는게 가장 편합니다. 사용 방법 (hello를 다국어로 준비했을 경우) 1. Template :  {{ $t('hello') }}  2. HTML tag 속성:  3. Vue import { useI18n } from 'vue-i18n'const {t} = useI18n();t('hello')   참고 : https://quasar.dev/options/app-internationalization#introduction

데이터 바인딩 부모 컴포넌트에서 자식 컴포넌트를 사용하려면, 데이터를 전달하거나 전달 받아야 합니다.  vue3.3 이후 버전에서는 defineModel 기능이 지원되는데 이걸 사용하면 양방향 바인딩이 됩니다. 자식 코드  부모코드 Change Data 이렇게 하면 부모쪽에서 changeData 함수를 호출하면 항상 자식 컴포넌트에 반영되는걸 알 수 있다. 전통적인 데이터 바인딩 지금까지도 자주 사용하는 방법은 prop과 emit을 이용하는 방법입니다.  prop은 부모에서 자식으로 데이터 전달하는 단방향이고, emit은 자식에서 부모에 이벤트 트리거를 단방향으로 하는거라서 양방향 바인딩하려면 조금 복잡합니다.  그리고 무엇보다 부모의 데이터의 반응성을 자식에서도 계속 유지..

YouTube Video with Speed Control Playback Speed: 0.1x 0.25x 0.5x 1x 1.5x 2x " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스

연계 컨텐츠1. Axios를 이용한 통신 :  https://dev-leon.tistory.com/822. Axios를 이용한 통신 모듈 구조화 : https://dev-leon.tistory.com/83 구조화가 필요한 이유1. 통신 결과를 Interface로 선언하여, 통신 결과를 사용하는 개발자는 ts 모듈이 약속된 타입을 모두 알려줍니다.2. 요청과 응답을 한곳에서 관리하므로, 백엔드 API가 변경되더라도 프런트엔드의 한 곳에서만 수정해주면 전체에 반영됩니다.즉 개발자들이 호출한 곳을 일일이 찾아가며 변경할 필요가 없어 집니다. 통신의 반환값의 타입을 Interface로 지정하는 방법ts에서는 반환값을 지정할수 있는데, 함수를 하나 만들어서 백엔드와 약속된 형식이 있다면 해당 형식을 Promise..

연계 컨텐츠1. Axios를 이용한 통신 :  https://dev-leon.tistory.com/822. Axios를 이용한 통신 모듈 구조화 : https://dev-leon.tistory.com/83 Axios란프런트엔드에서 Promise 방식으로 HTTP 통신을 수행하는 라이브러리입니다.프런트엔드에서 가장 많이 사용하는 라이브러리입니다. 설치방법  npm 방식    npm install axios  yarn 방식     yarn add axios 사용 방법  api.ts 파일에 Axois 객체 생성하고 intercepters까지 적용import axios, { Axios } from 'axios';const api: Axios = axios.create({ baseURL: 'your-backen..

환경 변수가 필요한 이유  개발과 테스트 배포, 실제 서비스 배포에서 각각 다른 설정값을 사용해야 할 경우에 현재 구동되는 환경을 알아야 하는데 이때 사용하는 방법이 환경 변수입니다.  Quasar에 환경 변수 알아보기  process.env 변수안에 현재 환경에 대한 값들이 들어 있습니다.  개발시 구동할때, env 변수의 값을 보여줍니다. Quasar에 환경 변수 사용하는 법  환경변수로 구분해야 할 것은 개발과 테스트 배포, 실서비스 배포 이렇게 3가지 인데, 위에 나온 변수들을 이용하여 구분하여 보겠습니다.   각 환경에 맞는 명령어를 사용하여 서비스 실행    개발 모드  : $ quasar dev    테스트 배포 모드 : $ quasar build -d (--debug)     제품 배포  ..

CORS(Cross Origin Resource Sharing) 에러라고?프런트엔드, 백엔드 따로 개발하다보면 프런트엔드 개발자들이 주로 보는 에러메시지 중 하나입니다. 웹브라우저의 특수성우리가 사용하는 웹브라우저(IExpoler, Chrome 등등)는 굉장히 편리하게 많은 일을 처리할 수 있게 도와줍니다.인터넷뱅킹, 쇼핑, 예약, 민원처리 등등 너무 편한게 많이 있습니다.그런데 웹브라우저라는 하나의 Application을 통해서 이루어지므로, 이 안에서 수많은 인터넷 사기도 많아지게 됩니다.사기꾼들이 웹개발만 알게 되면, 정말 무궁무진한 창조경제가 탄생하기 때문에 일반 인터넷 사용자들은 인터넷 사기에서 자유로울 수 없습니다.따라서 웹브라우저를 개발하는 회사들은 이러한 웹의 취약점을 잘 파악해서 문제가 ..

폴리곤 객체 삼각뿔 띄워보기  vtkActor, vtkMapper 등등은 기본적인 VTK 사용방법 그대로 사용하면 됩니다.  VTK.js에서 다른 점은 renderer와 renderwindow를 설정할때인데, VTK는 생성해서 사용했지만 여기서는  vtkGenericRenderWindow에서 미리 생성된 값을 받아와서 설정해줘야 한다는 것입니다.    결과 화면이상입니다. Quasar에서 VTK.js 시작하기 - 1 : https://dev-leon.tistory.com/76Quasar에서 VTK.js 시작하기 - 2 : https://dev-leon.tistory.com/77Quasar에서 VTK.js 시작하기 - 3 : https://dev-..

개요VTK.js를 설정하여 빈 화면 출력을 해보겠습니다. Vue에서 유명한 UI 라이브러리인 Quasar를 이용하여 전체적인 레이아웃을 잡도록 하겠습니다.Quasar를 설치하는 것은 다음글(https://dev-leon.tistory.com/57)을 참고 하세요. 순서 1. Quasar 설치(설치글을 보고 설치 진행) 2. VTK.js 설치     - VSCode 터미널 창에서 설치된 프로젝트 디렉토리로 이동     - $npm install @kitware/vtk.js     참조 : https://kitware.github.io/vtk-js/docs/vtk_vue.html   3. 참고 사항     - Typescript를 이용하여 개발함.     - vtkGenericRenderWindow를 이용하..