Leon's Lab

환경 변수가 필요한 이유  개발과 테스트 배포, 실제 서비스 배포에서 각각 다른 설정값을 사용해야 할 경우에 현재 구동되는 환경을 알아야 하는데 이때 사용하는 방법이 환경 변수입니다.  예를 들어 백엔드가 테스트용과 배포용이 따로 있을 경우에는 각각 상황에 맞게 연동해주어야 합니다. Quasar에서 env 환경 변수  import.meta.env 변수안에 현재 환경에 대한 값들이 들어 있습니다.// 개발시 환경변수를 출력합니다.console.log('env', import.meta.env);   Quasar에서 CMD를 이용해 커맨드 입력시 env에 환경변수 전달하기 VITE로 구성된 프로젝트는 CMD에서 set VITE_BUILD_MODE=development 와 같이 입력하면 import.meta.e..

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를 이용하..

vue3, quasar, typescript를 이용한 프로젝트에서 vtkGenericRenderWindow를 이용하여 화면을 html 요소의 배치에 맞게 크기 설정하기  A B C  결과화면

향후 수정 필요  아래 이라는 태그를 사용하면 그 부분을 외부에서 만든 html로 치환이 가능하다. 아래의 예시는 Button에서 Label을 외부에서 변경하는 간단한 예시이다.   위에서 만든 BaseButton 컴포넌트의 slot 부분을 변경하려면, 사용하는 vue에서 으로 입력하면 BaseButton의 부분이 치환이 된다. Click me! import BaseButton from './BaseButton.vue';

Quasar Application 생명주기 웹프로그램에 생명주기가 있을까 싶지만, 의외로 몇가지 사항들이 존재합니다. 일단 웹사이트에 접속할때와 웹사이트에서 종료할때가 있습니다. 그리고 새로고침이라는 웹사이트만의 전용 상태가 존재합니다.  다행이 웹의 생명주기는 단순합니다.  [브라우저 시작] => [App 초기화] => [새로고침] => [App 초기화] => [브라우저 종료] 이렇게 됩니다.그리고 [App 초기화] 상태에서는 사용자가 작성한 Boot 부터 다시 수행됩니다. 따라서 [App 초기화] 상태만 봐서는 브라우저가 시작한것인지 새로고침 한것인지 판단이 어렵습니다.  저장소별 생명주기 웹프로그램은 크게 3가지 저장소가 존재합니다. 프로그램 메모리, Session Storage, Local Sto..

Quasar 전용 SessionStorage, LocalStorage의 장점 데이터 직렬화 없이 바로 사용가능하다.// 일반적인 storage 사용시에는 직렬화해서 데이터를 입출력 해야함.// 따라서 JSON.stringify, JSON.parse 가 항상 따라다님.const user = { name: 'John', age: 30 };localStorage.setItem('user', JSON.stringify(user));const storedUser = JSON.parse(localStorage.getItem('user'));console.log(storedUser.name); // John// 반면에 $q.localStorage는 직렬화 없이 바로 입출력이 가능함.const user = { name..

화면 중앙 정렬 로그인 화면은 화면의 가운데에 입력을 받게 만드는데, 이때 필요한게 화면 중앙정렬입니다. 중앙정렬은 q-page 태그에 flex flex-center 속성을 주면 가능합니다. Click Me!  이미지를 백그라운드에 배치하기 사이트를 예쁘게 꾸미려고 백그라운드에 이미지를 넣는데, 일반적인 Grid 시스템으로는 어렵습니다.  여기서는 absolute-full flex flex-center 구문을 이용하여 처리해 보겠습니다.  Echo Test   Gutter-Col와 Col-Size 함께..