기본 콘텐츠로 건너뛰기

5월, 2023의 게시물 표시

[2023-05-31] Quasar + vite + vue 에서 raw-loader를 대체하기 vite-raw-plugin

안녕하세요. 클스 입니다. 오늘은 5월의 마지막 날이네요 Quasar는 vue3 + vite를 기반으로 합니다. 그런데 초반에 text 파일을 읽어서 처리하는데 raw-loader 를 사용했습니다. 이것은 webpack 기반이라 vite와는 맞지 않습니다. 그래서 yarn install 을 하면 아래와 같이 경고가 발생합니다. yarn install v1.22.19 [1/5] 🔍  Validating package.json... [2/5] 🔍  Resolving packages... [3/5] 🚚  Fetching packages... [4/5] 🔗  Linking dependencies... warning " > raw-loader@4.0.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". [5/5] 🔨  Building fresh packages... ✨  Done in 4.53s. 오늘은 똑 같은 기능을 하면서 vite 기반의 라이브러리로 대체해보고자 합니다. 먼저 raw-loader 삭제 합니다. $ yarn remove raw-loader 그리고 vite-raw-plugin 을 설치합니다. $ yarn add vite-raw-plugin 소스는 하나도 수정할 필요가 없습니다. package.json 에 정상적으로 삭제되고 설치된 것을 확인 할 수 있습니다. "vite-raw-plugin" : "^1.0.1" , < script lang = "ts" > import { useQuasar } from 'quasar' ; import { defineComponent, defineAsyncComponent, ref } from 'vue' ; import getVueTemplate from 'src/ztemplate/vue_gen_template.t...

[2023-05-31] Quasar, Vue3 : Warning "Extraneous non-emits event listeners" shows up even when emits is set ...

안녕하세요. 클스 입니다. Child.vue --> Parent.vue 와  데이터를 주고받을 때, emit을 사용합니다. 그런데 아래와 같은 오류가 발생합니다. Warning "Extraneous non-emits event listeners" shows up even when emits is set declare it using the "emits" option. 해결 방법1) Parent.vue 에서 root 로 div를 감싸주는 된다. 그런데 UI 가 깨지는 문제가 발생한다. <template>      <div>  : 추가       .... 여러가지 컴포넌트 들....     <MenuComponent msg="string input" @testChange="testChange" />    </div>    : 추가 </template> Child.vue 에서 아래와 같이 보내준다. <script lang="ts"> ... methods: { emit TestChange ( val ) { this .$emit( ' testChange ' , val ); }, </script> 해결 방법2)  Child.vue에 emits 를 추가해준다. Parent.vue 에서 root 로 div를 감싸주는 된다. 그런데 UI 가 깨지는 문제가 발생한다. <template>        .... 여러가지 컴포넌트 들....     <MenuComponent msg="string input"  @testChange="testChange" /> </template> Child.vue 에서 아래와 같이 보내준다. <script lang...

[2023-05-25] MariaDB dump 로 backup & restore

안녕하세요. 클스 입니다. 오늘은 mariadb 의 mydb를 생성하고 테스트 테이블 만들었습니다. dump 로 백업하고, 복원하는 방법을 알아보겠습니다. 주기적인 백업은 무척 중요합니다. 우선 mariadb > test db 에 tbz_user 테이블 하나 만들어 줍니다. CREATE TABLE `tbz_user` ( `user_id` varchar ( 100 ) DEFAULT NULL , `user_nm` varchar ( 100 ) DEFAULT NULL ) ENGINE =InnoDB DEFAULT CHARSET=utf8mb3 COLLATE =utf8mb3_general_ci ; 데이터를 넣어 봅시다. INSERT INTO mydb.tbz_user (user_id, user_nm) VALUES('111', '김길동1'); INSERT INTO mydb.tbz_user (user_id, user_nm) VALUES('222', '박순식1'); 그리고 백업을 해봅시다. mariadb service 가 실행되어 있어야 합니다. $ cd ~/mariadb ==> 디렉토리 하나 만들고 들어 갑니다. [~/mariadb]$ mysqldump -u root -p mydb > mydb.sql Enter password: [~/mariadb]$ ll total 8 -rw-r--r--  1 keulstar  staff   1.9K  5 25 00:26 mydb.sql [~/mariadb]$ INSERT INTO mydb.tbz_user (user_id, user_nm) VALUES('333', '정한다1'); 잘들어 있는지 보시죠~ select * from mydb.tbz_user ; 111 김길동1 222 박순식1 333 정한다1 자 이상태에서 이전에 2개의 데이터가 들어있는 것을 복구하면 어떻게 될까요? 예상은 111, 222만 남...

[2023-05-24] MariaDB 설치 on Mac M1

 안녕하세요. 클스 입니다. 오늘은 Mac에 MariaDB를 설치해보고자 합니다. 역시 공부를 하려면 테스트 환경을 구축을 먼저 해야 되겠네요~ [~]$ brew install mariadb 이것저것 필요한 라이브러리 설치하고 한 5분 걸리네요~ ==> Pouring mariadb--10.11.3.ventura.bottle.tar.gz ==> /usr/local/Cellar/mariadb/10.11.3/bin/mysql_install_db --verbose --user=keunsookim --basedir=/usr/local/Cellar/mariadb/10.11.3 --datadir=/usr/local/var/mysql --tmpdir=/tmp 설치된 디렉토리 잘 확인해주세요~  설치 됐는지 버전을 확인해봅시다.  [~]$ mariadb -v ERROR 2002 (HY000): Can't connect to local server through socket '/tmp/ mysql .sock' (2) 에러가 나네요 한번에 잘될리가~~  MariaDB가 mysql에서 옆으로 발전한거라 아직도 파일명이 mysql 이 나오네요~ 위에 설치한 터미널 로그를 보니 아래 오류가 나네요~ ==> Installing virtualenv ==> Pouring virtualenv--20.23.0.arm64_ventura.bottle.tar.gz Error: The `brew link` step did not complete successfully 설치한 기억이 없는데.... 그래서 삭제 해봅니다. [~]$ brew uninstall --ignore-dependencies virtualenv Uninstalling /opt/homebrew/Cellar/virtualenv/20.23.0... (930 files, 14.4MB) 일단 원인을 알아봐야 하겠지만 그래도 혹시나 업데이트를 해봅니다. [~]$ brew upgrade 그...

[2023-05-15] Quasar QSelect 옵션 설명

 안녕하세요. 클스 입니다. Quasar QSelect 옵션에 대한 설명을 하고자 합니다. 회사를 선택하거나, 여러 코드값을 선택할때 아래와 같은 화면이 필요합니다. 그리고 company_id 값으로 미리 선택되도록 해야 합니다. q-select 의 option 은 label, value 2개 속성이 기본 입니다.  물론 option-value = 'yyy' , option-label = "xxx" 이렇게 해서 커스텀 가능합니다. company_options: [ { label: 'Google' , value: 'Google-value' , description: 'Search engine' , category: '1' , },   소스를 보면 아래와 같이 사용하면 됩니다. 그런데  map-options , emit-value 2개 옵션을 잘 사용해야 원하는 값을 얻게 됩니다. < q-select filled v-model ="company_model" : options ="company_options" label = "Standard" map-options emit-value /> map-options 은 value 값으로 선택을 할 수 있게 하는 옵션입니다. emit-value 은 선택된 option의 value 값만 넘겨 줍니다. 앞에서 option을 object로 선언했기 때문에 map-option이 없으면 value 값이 화면에 표시됩니다. 아래 화면에서 보면 Apple-Value를 표시됩니다. 원하는건 Apple이 표시되길 원합니다. 이때 map-options 을 사용하면 value 값으로 매칭해서 Label을 출력해줍니다. 그리고 Object...