vue.js/기술23 [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] 가상돔 가상돔이란 실제 돔에서 처리하는 것이 아닌 가상의 돔을 만들어 메모리에서 미리 처리하고 실제 돔과 비교하여 처리&적용하는 것을 말함 실제 돔을 우리가 직접 다루게 된다면, 실제 브라우저에선 우리가 조작한 돔의 노드를 찾고, 조작한 대로 돔을 수정한 후에, 다시 부모와 자식 요소들을 페인팅해주어야 함. " - 돔은 트리구조로 되어 있어 구조가 복잡해질수록 탐색비용이 늘어남 - 화면의 돔이 수정될때마다 브라우저는 전체 돔 트리의 변경사항을 수정해야함 " 허나, 가상돔을 사용한다면 실제 돔과 메모리에서 미리 처리된 가상의 돔을 비교하여 차이가 있는 돔만 리페인팅 해주어 실제 돔의 변경을 최소화 해줌 vue에서는 MVVM 패턴을 사용함 MVVM패턴에서는 돔에 직접접근 하지 않고, 모델(데이터 객체), 뷰(화면).. 2023. 1. 14. [vue] CSS variable injection vue3에서 css에 변수를 주입할수있는걸 보고 포스팅을 올림 원래 scss와 같은 style lang에서 변수를 사용할 수 있다고 알고있긴한데, css에 대해 깊게 알지 못해 vue에서 제공하는 아래 방법이 매우 신기했음 fs에 스타일 값을 두고 ("100px") style 구역에서 font-size:v-bind("fs") 2022. 12. 19. [vue] vue3 ref로 컴퍼넌트 접근하기 (define expose) 상황 나는 ref를 이용하여 부모 컴퍼넌트(A)에서 자식 컴퍼넌트(B)의 call함수를 호출하고 싶음 그런데 script setup 방식을 이용하고있을때 ref를 이용하여 자식컴퍼넌트에 접근하는 방법을 몰랐음 안 뒤에 정리한 내용임 1. 먼저 자식 컴퍼넌트에서 call함수를 아래와 같이defineExpose라는 vue 기본제공 메소드를 사용하여 명시함 (대충 이걸 배출할거다 라는 뜻) 2. 부모 컴퍼넌트는 자식 컴퍼넌트태그에 ref를 달아줌 ex) 3. 컴퍼넌트내부에서 스크립트 최상단 스코프에 ref를이용하여 컴퍼넌트 객체를 미리 빈값으로 할당함 ex) const b = ref(null); 주의점 - 변수명은 컴퍼넌트태그에 등록한 ref의 이름과 똑같아야 함 (위 예시에선 'b') - 컴퍼넌트내부의 스크.. 2022. 12. 19. 이전 1 2 3 4 다음
