SPA Framework/Vue 4

[Vue/Electron ISSUE] 외부 모듈 Cannot find module 문제

1. 개요 외부 모듈을 npm으로 설치하여 package.json 에 의존성 정보 삽입 및 node_modules에 설치가 되었다. 하지만 serve 명령어로 electron을 띄었을 시에는 해당 모듈 import시 문제가 발생하지 않았는데, build 명령어로 프로그램을 빌드 후 실행하였을때 해당 모듈 import시 아래와 같이 Cannot find module 에러가 떴다. serve시에는 로컬에 이미 설치되어 있는 모듈을 잘 참조하지만, 빌드시에는 해당 모듈이 package.json에 관리되어 있어도, electron-builder가 프로그램에 필요한 모듈이라 생각하지 않아 설치되지 않고 빌드되어, 참조시에 에러가 발생하는 모양이다. 2. 해결방법 해결책을 찾은 사이트: https://stackov..

SPA Framework/Vue 2022.09.26

Vue에서 v-model의 동작방식에 대해 (v-model, :value, @input...)

Vue에서 템플릿과 스크립트 간 데이터 양방향 바인딩을 위해 아래와 같이 "v-model" 를 사용한다. 따라서, 이 textarea에 작성되는 값이 "something"이라는 변수에 반영이 되고, 반대로 "something" 변수의 값이 변경되면 이 textarea가 갖는 value도 변경이 된다. 이 v-model은 기본적으로 다음과 같다: :value - 데이터 바인딩. "something" 이라는 변수의 값을 textarea의 value로 설정한다. @input - 이벤트 바인딩. 이 textarea에서 input 이벤트가 발생하면 설정해준 "something = $event.target.value" 코드를 실행한다. 만일 v-model 대신 :value를 작성하면 "something" 변수의 값..

SPA Framework/Vue 2022.04.08

Vue에서 jQuery events 잡기

vue에서 html태그 내에 사용하는 data 단방향 바인딩 예약어로는 ":value", 이벤트 바인딩을 하기위해 "@change" 예약어를 사용하며, 이 둘을 혼합하여 양방향 바인딩을 하기위한 예약어로 "v-model"를 사용한다. 기본적으로 jQuery는 본연의 event system을 사용하기때문에 Vue에서 jQuery가 발생한 이벤트를 잡지 못하기 때문에 혼용하는것은 좋은 방식이 아닌데, 피치못하게 Vue에서 Jquery를 사용하여 HTML 요소 내 값을 직접적으로 건드릴 경우가 있다. 이럴때에는 다음과 같이 해결할 수 있다. jquery 모듈이 없으면 설치해 준다. npm install --save jquery mounted() 생명주기 메서드 내에 jquery 이벤트를 추가해주어 해결할 수 ..

SPA Framework/Vue 2022.04.04

Vue3에서 데이터를 전역으로 전달하는법(mitt)

[운영환경] vue: 3.0.0 language: typescript 기존에 Vue2를 사용할때는 전역으로 데이터를 전달하기 위해 EventBus를 사용하였었는데, EventBus는 이제 Vue에서 추천하는 공식적인 방법이 아니라고 한다. 그래서 이 포스팅에서는 'mitt' 라는 외부 라이브러리를 이용하여 이벤트 버스를 구현하고자 한다. (공식 usage 가이드는 다음 페이지에서 확인할수 있다: https://www.npmjs.com/package/mitt#usage) 1. 설치 npm install --save mitt 2. 사용 2.1 mitt 글로벌 변수 선언 /src 폴더의 main.ts에서 다음과 같이 import하고, globalProperties로 등록해 준다. import { createA..

SPA Framework/Vue 2022.01.23
반응형