vue.js29 [vue] electron vue 프로젝트를 기반으로 electron으로 작성한 것처럼 빌드해주는 패키지가 있음 아직 안써봤고, 그냥 이런게 있구나 식으로 기록만 해놓음 (나중에 써보고 수정 예정) https://nklayman.github.io/vue-cli-plugin-electron-builder/ Vue CLI Plugin Electron Builder nklayman.github.io 2024. 2. 28. [vue] 빌드 후, 특정 파일을 독립적으로 유지시키고 싶다면 vue + quasar 환경입니다. 다른 환경은 테스트 안해봄 한줄요약 다이나믹 임포트 쓰면 됨 문제점 vue 프로젝트를 빌드할 시 자동으로 번들링이 되어 여러 파일이 한 파일로 묶이는등의 작업이 진행됨 이 때문에 기존의 접속정보등 작성한 설정파일등이 다른 파일들과 묶여서 빌드 파일 내에서 찾고 수정하기 살짝 번거로울 수 있었음 ex xx.config.js파일은 특정 서버의 접속정보가 적혀 있으며, 접속정보를 쉽게 변경하기 위해 빌드 후에도 독립적으로 파일이 유지되게 작성해야 하는 문제가 있다. 작성과정 1. 어딘진 기억안나지만 아마 vue 공식문서에서 빌드이후 독립적으로 파일을 유지하면 public에 위치시키면 된다는 문장이 있었음 위 말대로 루트폴더에서 public폴더만이 번들링과정에서 파일묶음현상을.. 2024. 2. 28. [vue3] 컴포넌트 캐시 보존 (keepAlive) 동적으로 컴포넌트를 교체해줄때, 입력해주었던 데이터들도 초기화되는 현상이 있다. 그 데이터들을 컴포넌트가 교체될떄 보존해주고 싶다면, keepAlive를 사용 참고로 v-if를 썼을땐 데이터가 보존되지않고, v-show를 썼을땐 데이터가 보존되었다. 본문은 v-if, v-show가 아닌 다른방식의 동적컴포넌트 호출문법에서 사용가능하다. 위처럼 따라할 예정 부모 컴퍼넌트 부모컴퍼넌트에서 Hello, Abc 자식컴퍼넌트를 반복하여 교체하며, input의 값을 입력할 것임. 현재는 keepAlive 태그를 쓰지않았기 때문에 컴퍼넌트를 교체할때마다 input의 값이 사라짐 위처럼 KeepAlive 태그만 추가해줘도 컴퍼넌트의 교체가 있더라도 데이터를 보존해준다. max 옵션을 통해 최대 캐싱 수 조절 가능 캐싱.. 2023. 8. 30. [vue3] 커스텀 디렉티브 태그 vue에서는 엘리먼트 각각의 생명주기를 감지해, 이벤트를 등록할 수 있음 onMounted, beforeCreated 등을 이용해 컴포넌트 전체의 생명주기가 아닌 엘리먼트 각각의 생명주기를 감지함 vFocus를 태그로 지정했으며, 이 태그를 등록한 엘리먼트는 mounted 될시에 focus하라는 뜻임 아주 간단함 위 예시는 컴퍼넌트 하나에서만 사용이 가능한 것이고, 아래예시처럼 createApp을 이용해 앱전체에서 사용할 수 있다. const app = createApp({}) // 모든 컴포넌트에서 v-focus를 사용할 수 있도록 합니다. app.directive('focus', { mounted: (el) => el.focus() }) 출처 : https://v3-docs.vuejs-korea.or.. 2023. 7. 21. [vue] 전역 컴퍼넌트 등록이 안됨 (If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.) vue3에서는 아래처럼 전역컴퍼넌트를 등록한다. 그런데 자꾸 AbcComponent를 커스텀 엘리먼트로 인식을 하며 커스텀 엘리먼트를 허용하는 옵션을 넣으라 함 전역등록 자체가 잘못됐다고 생각하는데 이유가 뭔지 모르겠어서 이참에 한 번 파고들어 봄 먼저 공식문서 부터 봄 app.component() api 문서가 있을까 싶어 찾아봤고 있었음 https://vuejs.org/api/application.html#app-component Application API | Vue.js vuejs.org app.component로 전역 컴퍼넌트를 등록할 때 사용했던 컴퍼넌트 이름을 인수로 이용해 컴퍼넌트를 반환받아옴 저렇게 반환받아서 변수에 저장 후, 사용하면 문제가 없긴함 근데 같은 공식문서의 다른 페이지에서는.. 2023. 1. 17. [vue] 가상돔 가상돔이란 실제 돔에서 처리하는 것이 아닌 가상의 돔을 만들어 메모리에서 미리 처리하고 실제 돔과 비교하여 처리&적용하는 것을 말함 실제 돔을 우리가 직접 다루게 된다면, 실제 브라우저에선 우리가 조작한 돔의 노드를 찾고, 조작한 대로 돔을 수정한 후에, 다시 부모와 자식 요소들을 페인팅해주어야 함. " - 돔은 트리구조로 되어 있어 구조가 복잡해질수록 탐색비용이 늘어남 - 화면의 돔이 수정될때마다 브라우저는 전체 돔 트리의 변경사항을 수정해야함 " 허나, 가상돔을 사용한다면 실제 돔과 메모리에서 미리 처리된 가상의 돔을 비교하여 차이가 있는 돔만 리페인팅 해주어 실제 돔의 변경을 최소화 해줌 vue에서는 MVVM 패턴을 사용함 MVVM패턴에서는 돔에 직접접근 하지 않고, 모델(데이터 객체), 뷰(화면).. 2023. 1. 14. 이전 1 2 3 4 5 다음
