메모장

1. node.js 설치 1-1. 다운로드https://nodejs.org/en 1-2. 설치 후 확인node -vnpm -v 2. Vue cli 설치2-1. 설치npm install -g @vue/cli 2-2. 설치 확인vue --version *Error: EPERM: operation not permitted, rmdir 에러 발생 시 관리자 권한으로 cmd/bash/powershell 실행 캐시 지우기npm cache clean --force-> 이후 다시 vue/cli 설치 시도. * 기타 참고 명령어Npm 최신 버전 설치npm install -g npm@latest --force 폴더 생성된 것 확인npm list -g --depth=0 전역 설치된 패키지 제거npm uninstall -g ..

Vue Router에서 네비게이션 가드(Navigation Guards)는 사용자가 페이지(라우트) 간 이동할 때 특정 조건을 확인하거나 동작을 수행할 수 있는 메커니즘입니다. 주로 인증과 권한 제어를 위해 사용됩니다. 1. 네비게이션 가드의 종류1-1. 전역 가드 (Global Guards)전역적으로 모든 라우트 변경에 대해 작동합니다.beforeEach라우팅이 시작되기 전에 실행됩니다.주로 인증 또는 권한 확인에 사용됩니다.router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isAuthenticated()) { next('/login'); // 인증이 필요하지만 인증되지 않았으면 로그인 페이지로 이동 } else { ..

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

Vue Router를 사용하여 여러 페이지를 다루고 각 페이지에 주소를 지정하는 방법입니다. router 설정1. Vue Router 설치- Vue 프로젝트에 Vue Router를 설치합니다.npm install vue-router - 버전 확인#Vue 2.x와 vue-router 3.xnpm install vue-router@3#Vue 3.x와 vue-router 4.xnpm install vue-router@4 2. Vue Router 설정- index.js (2024.11 수정함)Vue Router를 설정하려면 src 폴더에 router 폴더를 생성하고 그 안에 index.js 파일을 만듭니다.  import { createRouter, createWebHistory } from 'vue-route..

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은 부모 컴포넌트에서 자식 컴포넌트로..