728x90
반응형
- [Electron] Vue.js 웹 애플리케이션? 데스크톱 애플리케이션이 되어라!2023-09-26 17:42:281. 브라우저 정책으로 사용자와 상호작용 없는 오디오 재생 불가 문제 브라우저 정책으로 사용자와 상호작용없는 오디오의 재생이 안 되는 문제가 있어서 고민하고 리서치하다가 일렉트론을 이용한 데스크톱 애플리케이션으로 실행하면 오디오 재생이 가능하다는 것을 알게 되었다. 그래서 배포된 Vue.js 애플리케이션을 데스크톱 애플리케이션으로 만들어 보았다. 2. 일렉트론 프로젝트 생성하여 오디오 재생 성공! 2.1. 일렉트론 프로젝트 생성 일렉트론 공식 페이지의 Quick Start를 참고하여 프로젝트를 생성하였다. 데스크톱 애플리케이션으로 만들고자하는 웹 애플리케이션과는 별도로 일렉트론 프로젝트를 생성한다. // 별도의 일렉트론 프로젝트 폴더 생성 => 이동 => 설치 명령어 실행 npm i 2.2. 의존성 설치..
- [Vue.js] 카카오 지도 API 작업 중 Uncaught TypeError: Cannot set properties of undefined! (일반 함수를 화살표 함수로 변경)2023-02-10 11:12:09Vue.js의 methods에 카카오맵을 초기화하기 위해 initMap() 메서드를 선언했다. 그리고 해당 메서드 안에 beforeClick() 함수를 선언했다. 그런데 beforeClick() 함수 내에서 Vue.js의 data에 접근하기 위해 this를 사용했는데 [그림 1]과 같이 에러가 발생했다. methods에서 initMap() 메서드를 선언하고 그 메서드 내에서 function으로 함수를 선언하여 this를 사용하면 부모인 initMap()를 가리키기 때문에 발생하는 에러였다. 반면 화살표 함수의 경우는 함수가 처음 선언 될 때의 컨텍스트를 참조하게 되므로 data에 접근할 수 있었다. function beforeClick(value, level) {} // 기존 일반 함수 const bef..
- [Vue.js] 카카오 지도 API 커스텀 오버레이 표시되지 않는 문제 및 Vue.js 용 카카오 지도 API 예제2023-02-09 15:36:321. 카카오 지도 API 커스텀 오버레이 표시되지 않는 문제 새로고침 시 커스텀 오버레이가 화면에 표시되지 않는 문제가 발생했다. setTimeout으로 1초 멈춘 후 커스텀 오버레이를 그리도록 하여 문제를 해결했다. mounted() { if (window.kakao && window.kakao.maps) { this.initMap() this.displayCustomOverlay() } // 아래는 새로고침시 실행되는 코드이다. 커스텀 오버레이가 표시되지 않는 문제가 발생하였다. // setTimeout으로 1초 멈춘 후 커스텀 오버레이를 그리도록하여 문제를 해결했다. else { const script = document.createElement('script') /* global kakao */ ..
- [Vue.js] 변화가 즉시 반영되도록 강제 리렌더링 처리(Component Force Rerendering)2023-02-08 13:27:52vue-slider-component를 이용한 임계치 범위 설정 기능을 구현하였다. 범위 설정은 v-model로 양방향 데이터 바인딩하였고 merge-tooltip은 변경이 즉시 적용되었으나 dot-tooltip는 반영되지 않았다. 그래서 범위 설정에서 keyup이 일어나면 vue-slider-component가 적용된 자식 컴포넌트를 리렌더링하여 변경이 반영되도록 하였다. data() { return { componentKey: 0 } }, methods: { forceRerender() { this.componentKey += 1 } 참고한 자료 https://hyeonyeee.tistory.com/97 [Vue] Component Force Rerendering 하기 (강제로 rerender) vu..
- [Vue.js] Axios interceptors 관련, 로그인 후 API호출 시 JWT 토큰이 header에 실리지 않는 문제2023-02-02 09:36:48Axios로 REST API를 연동하고 있다. 로그인 후 새로운 토큰을 받았지만 API호출 시 해당 토큰이 header에 실리지 않아 [그림 1]과 같이 401 에러와 함께 로그인 화면으로 리다이렉션 되어 버렸다. 기존에 interceptors에 response 코드만 적용했었던 것이 문제였다. 따라서 request 할 때 토큰을 실어 보내는 아래의 코드를 추가하여 문제를 해결할 수 있었다. instance.interceptors.request.use( function (config) { console.log('config : ', config) config.headers.Authorization = `Bearer ${localStorage.getItem('jwt')}` return config }, f..
- [Vue.js] 다중 셀렉트박스(select)를 이용한 조회 기능 코드2023-01-26 22:52:46[그림 1]과 같이 3개의 셀렉트박스(select)를 이용한 조회 로직을 구현하고자 하였다. 구현한 코드는 아래와 같다. data() { return { searchKeywords: ['total', 'total', 'total'], searchStaticKeys: ['facility.name', 'manhole.name', 'sensor.name'] } }, doSearch() { this.alarms = [] let tempArr = [...this.alarmsTotal] // 조회 대상이 되는 전체 데이터를 tempArr 배열에 할당 for (let i = 0; i < this.searchKeywords.length; i++) { if (this.searchKeywords[i] === 'total'..
- [Vue.js] a 태그에 href, @click 각각 사용시 Carousel 슬라이드 작동 문제2022-12-29 15:17:58a 태그에 @click를 적용하여 Carousel을 사용한 페이지로 이동하였는데 Carousel 슬라이드가 작동하지 않는 문제가 생겼다. 해당 페이지의 주소창에서 엔터키를 치면 정상적으로 작동하는 것으로 보아 Carousel의 문제는 아닌 듯했다. 그래서 a 태그에 @click 대신 href에 해당 페이지의 라우터를 넣어주었다. 그랬더니 페이지 이동 즉시 Carousel의 슬라이드가 작동했다. Carousel은 아래의 부트스트랩을 사용했다. https://getbootstrap.com/docs/5.3/components/carousel/ Carousel A slideshow component for cycling through elements—images or slides of text—like a ca..
- [Vue.js] Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '블라블라')2022-12-29 10:58:18computed에 실시간으로 변경되는 데이터를 가공하는 코드를 작성하던 중 자주 만나게 되는 에러였다. 호출한 배열의 값이 없는 상태에서 특정 인덱스를 지정한 경우에 발생했다. 웹 애플리케이션이 작동하지 않는 것은 아니나 콘솔창이 계속 이런 에러를 뱉어 내지 여간 거슬리지 않을 수 없다. 조건문을 사용해 해결했는데 방법은 다음과 같다. if (gidManhole.length === 0) { return } gidManhole는 진행 중인 프로젝트에서 사용한 배열명이다. gidManhole 배열에 값이 없으면 아얘 다음 코드로 진행하지 못하도록 처리한 것이다.
728x90
반응형