기록

file-saver를 이용해 파일을 다운로드 하는데 fetch함수의 response가 실패라고 떴다. 알고보니 파일위치를 변경할 필요가 있었습니다. public 디렉토리 Vue CLI에서 public 디렉토리는 정적 자원을 호스팅하는데 사용되는 특별한 디렉토리입니다. 이 디렉토리 내의 파일들은 빌드할 때 루트 경로(/)에서 접근 가능한 정적 파일로 처리됩니다. (react에서도 사용합니다!!) 기본적으로 public 디렉토리는 Vue CLI 프로젝트의 루트 디렉토리에 위치합니다. 프로젝트를 구조 예시 입니다. project-root |-- public | |-- index.html | |-- assets | |-- files | |-- filename.pdf |-- src |-- ... *정적 파일 서버..

Vue Router를 사용하여 여러 페이지를 다루고 각 페이지에 주소를 지정하는 방법입니다. 1. Vue Router 설치 먼저 Vue 프로젝트에 Vue Router를 설치해야 합니다. 이미 설치된 경우 이 단계를 건너뛰세요. npm install vue-router 2. Vue Router 설정 Vue Router를 설정하려면 src 폴더에 router 폴더를 생성하고 그 안에 index.js 파일을 만듭니다. // src/router/index.js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '@/views/Home.vue' // Home은 실제 컴포넌트 이름에 맞게 수정해야 합니다. import About fr..

v-if와 v-show는 둘 다 Vue.js에서 조건부 렌더링을 구현하는 데 사용되는 디렉티브입니다. 둘의 차이점에 대해 알아보았습니다. - v-if, v-show 차이점 1. 렌더링 방식 v-if: 조건이 true일 때만 해당 엘리먼트가 렌더링됩니다. 조건이 false인 경우 해당 엘리먼트는 DOM에서 제거됩니다. v-show: 조건이 true일 때 해당 엘리먼트는 CSS의 display: none을 이용하여 숨깁니다. 조건이 false인 경우에도 해당 엘리먼트는 DOM에 그대로 유지됩니다. 2. 비용 v-if: 초기 조건이 거짓인 경우 렌더링하지 않습니다. 하지만 엘리먼트가 추가/제거될 때 마다 렌더링과 패치 과정이 발생하기 때문에 토글 비용이 높습니다. v-show: CSS 기반 토글으로 초기 조건..

emitter 중복 등록 해결 mounted() { this.emitter.on('event', function (param) { that.receiveEvent(param); }); }, beforeUnmount() { this.emitter.off('event'); }, unmounted() { // } 만약 아래와 같이 하나는 v-show고 하나는 v-if일 때 두 컴포넌트에서 같은 이벤트 리스너를 사용하고 v-if컴포넌트에 위와 같이 작성하면 v-show인 컴포넌트에서는 다시 마운트 되지 않아서 이벤트 리스너 등록이 안된다. 둘다 v-if/v-show 통일하여 사용해야함. v-if를 사용하는 이유 Bcomponent의 mount함수 내부에 Acomponent에서의 선택에 따라 변하는 데이터에 따른..

store안에 있을 경우 actions안에 unload함수를 정의하고 unload되기전에 무조건 실행되는 함수안에서 unload함수를 호출하여 window.onunload이벤트를 등록해준다. actions: { unload() { window.onunload = function (event) { event.preventDefault(); //info 초기화 등 }; }, onload() { this.unload(); } } 일반 컴포넌트 일때는 mount에서 this.unload를 호출하고 methods에 unload함수를 두면된다.

Vue에서 동적 속성 바인딩을 수행할 때 사용하는 콜론(:)은 "v-bind" 디렉티브라고 불립니다. "v-bind" 디렉티브를 사용하면 Vue 템플릿에서 HTML 속성에 동적으로 값을 바인딩할 수 있습니다. 주로 HTML 속성을 Vue 컴포넌트의 데이터나 계산된 속성과 연결할 때 사용됩니다. 조건문과 삼항 연산자를 사용하여 조건부 할당이 가능합니다. 예제) 다양한 속성의 예시 {{ datas.type === 'a' ? item.AId : item.BId }}

- 문제 컨텍스트 메뉴를 구현하던 중 이미지가 뜨지 않는 문제가 있었습니다. 콘솔 로그를 확인해 보니 정상적으로 불러와진 이미지는 파일명과 확장자 사이에 파일의 내용에 기반한 해시 값이 들어가있었습니다. 이 url을 눌리면 직접 img를 띄울 수 있습니다. *이는 파일의 캐시된 버전을 나타내는 URL입니다. 브라우저는 이 URL을 통해 해당 파일의 최신 버전을 요청하고, 필요한 경우 캐시된 버전을 업데이트합니다. 반면 콘솔로그에 파일을 찾지 못했다는 에러에는 해시값이 빠져 있었습니다. 해시값은 vue에서 자동으로 처리되고 사용자가 제어할 필요 없는데 이게 이루어 지지 않은 것을 보고 src를 주소로 인식하지 못한 것을 확인했습니다. 처음 작성한 코드입니다. {{ subMenu.key }} 번들러는 일반적..

1. v-model v-model 디렉티브는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 양방향 바인딩 할 수 있게 해줍니다. 자식 컴포넌트에서 이벤트를 발생시켜 부모 컴포넌트에 데이터를 전달할 수 있습니다. // Parent.vue // ChildComponent.vue 위의 코드에서 Parent.vue에서 ChildComponent를 호출할 때 v-model 디렉티브를 사용합니다. ChildComponent.vue에서는 localMessage 변수를 사용하여 자식 컴포넌트의 데이터를 다루고, watch 속성을 사용하여 localMessage 값이 변경될 때 input 이벤트를 발생시켜 Parent.vue에서 부모 컴포넌트에 데이터를 전달합니다. 2. prop prop은 부모 컴포넌트에서 자식 컴포넌트로..

Vue.js 2.3 버전부터는 v-for와 v-if를 함께 사용할 수 있도록 v-for 디렉티브에 v-if를 추가할 수 있는 기능이 추가되었습니다. 따라서 Vue.js 2.3 이상의 버전에서는 v-for와 v-if를 함께 사용하는 것이 가능합니다. 하지만 Vue.js에서는 v-for와 v-if를 함께 사용하는 것은 좋지 않습니다. 이유는 v-for 디렉티브가 먼저 수행되고, 그 후에 v-if 디렉티브가 실행되기 때문입니다. 이로 인해 원하지 않는 결과를 가져올 수 있습니다. computed v-for와 v-if를 함께 사용하려면 주의가 필요합니다. 만약 v-if를 사용하여 데이터를 필터링하려면, v-for를 사용하는 대신에 computed 속성을 사용하여 필터링 된 데이터를 반환하도록 하는 것이 좋습니다..

보통 부모-자식 컴포넌트 간에 통신에는 props와 $emit을 이용합니다. 하지만 아래 코드에서는 ref를 사용하여 자식컴포넌트의 데이터를 가져왔는데 동적으로 자식 컴포는트가 교체되는 모달에서 공통으로 필요한 기능인 getData 버튼을 부모 컴포넌트에 위치시켰기 때문입니다. 부모에서 $emit -> 자식에서 $emit -> getData 이런식으로 해도 될 것 같긴한데 코드가 어지러워서 ref를 이용하는 방식을 사용해봤습니다. Get Data from QueryLst 위의 예시에서 자식컴포넌트의 인스턴스에 접근하기 위해 this.$refs.childComp를 사용하고, 이를 통해 자식 컴포넌트의 data 속성에 접근하여 데이터를 가져오고 있습니다. 다만, ref를 사용하여 자식 컴포넌트의 인스턴스에 ..