기본 콘텐츠로 건너뛰기

라벨이 vue인 게시물 표시

[2023-07-21] vue에서 변수에 component 객체를 넣었더니, Vue.warn 이 떴다. markRaw를 사용하세요

안녕하세요. 클스 입니다. vue에서 변수에 component 객체를 넣었더니, Vue.warn 이 떴다.  component 객체는 많은 정보를 담고 있어서, watch를 하게되면 엄청난 부하가 발생한다. 그래서 친절하게 markRaw를 사용하라고 알려준다. import { markRaw } from 'vue' ; export default { data() { return { layout: null , }; }, watch: { $route: { immediate: true , handler() { this .layout = markRaw( this .$route.meta.layout || DefaultLayout); }, }, }, }; Vue.js에서  markRaw  함수는 객체를 "원시"로 표시하는 데 사용되며, 이는 Vue 반응성 시스템에서 관찰되지 않음을 의미합니다. 특정 성능 문제가 있거나 특정 객체에 대해 Vue의 반응성 시스템을 선택 해제해야 하는 경우에만 사용하십시오. markRaw  함수는 다음과 같이 사용됩니다. const obj = { a: 1, b: 2, }; const rawObj = markRaw(obj); 이제  rawObj 는 반응성이 없습니다. 즉,  rawObj 의 속성이 변경되면 Vue는 렌더링을 다시 트리거하지 않습니다. markRaw  함수는 특정 성능 문제를 해결하는 데 유용합니다. 예를 들어, 매우 큰 객체를 반응성 객체로 선언하면 Vue는 객체의 모든 속성을 추적해야 합니다. 이는 성능 저하의 원인이 될 수 있습니다. 이 경우  markRaw  함수를 사용하여 객체를 반응성으로 선언하지 않고 렌더링을 다시 트리거하지 않도...

[2023-06-07] Quasar dotenv 로 multi profile 구축하기

 안녕하세요. 클스 입니다. 프로젝트를 하다보면 local, dev, test, staging, production 등 다양한 환경으로 API 주소등 환경을 다르게 가져가야 할 때가 있습니다. 이때 필요한 것이 env 파일을 이용해야 합니다. Quasar  는 process.env 를 기본으로 제공합니다. quasar.config.js에 환경 변수를 넣어주면 process.env.변수 이렇게 사용하면 됩니다. https://quasar.dev/quasar-cli-webpack/handling-process-env/ 그러나 별도 파일로 구성하면 유지관리가 직관적이고 편리하기 때문에 dotenv 패키지를 많이 사용합니다. 1) dotenv 설치하기 $ yarn add dotenv $ .env 폴더 생성 ==> project root에 생성합니다. 2) .env.local 파일 생성 후 아래 추가 APP_TITLE= ':Admin' APP_MODE= 'local-로컬' APP_VERSION= '0.6.5' API_URL= http://localhost:8001 3) quasar.config.js 에 아래 추가 /* eslint-env node */ /* * This file runs in a Node context (it's NOT transpiled by Babel), so use only * the ES6 features that are supported by your Node version. https://node.green/ */ // Configuration for your app // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js const { configure } = require( 'quasar/wrappers' ); const path = require( 'path' ); const DotEnv = req...

[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-04-19] vscode로 typescript 개발 환경(Menu 테이블을 Tree형태로 구성)

안녕하세요. 클스 입니다. typescript 가 이젠 많이 중요해 졌습니다. vuejs, react 등에서 빠질 수 가 없네요~ 개요 - DB의 메뉴 테이블에서 데이터를 가져와서 웹에 tree 구조로 출력해보려고 하니 웹을 올리고 소스 수정하면 빌드하고 확인하는 시간들이 많이 들어요~ - 그래서 typescript만 개발하면 좋을 듯하여 셋팅 해봤습니다. 메뉴 테이블 쿼리 WITH RECURSIVE tree_view(menu_id, menu_nm, up_menu_id, depth, path) AS ( SELECT menu_id, menu_nm, up_menu_id, 1 as depth, CAST (menu_id AS VARCHAR ( 100 )) as path FROM tb_menu WHERE up_menu_id is NULL -- 최상위 노드를 선택합니다 UNION ALL SELECT child.menu_id, child.menu_nm, child.up_menu_id, parent.depth + 1 as depth, CONCAT(parent.path, ' _ ' , child.menu_id) as path FROM tb_menu child JOIN tree_view parent ON child.up_menu_id = parent.menu_id ) SELECT menu_id, menu_nm, up_menu_id, depth, path , CONCAT( RIGHT ( ' ---------- ' ,depth* 3 ), menu_nm, ' ' ) AS parent_child_tree FROM tree_view ORDER BY path; t...