728x90
반응형
- [Vue.js] 카운트다운 서클 타이머 버튼 만들기2024-10-04 11:39:091. 네이버 지도의 카운트다운 서클 타이머 버튼모니터링 서비스에 사용자가 새로고침 버튼을 클릭하지 않아도 일정 시간이 지나면 자동으로 최신의 정보를 서버에서 받아와 리렌더링 하는 기능이 필요했고, [그림 1]과 같은 네이버 지도앱의 카운트다운 서클 타이머 버튼이 적당해 보였다. 2. Vue.js용 컴포넌트 제작 및 적용[그림 2]는 Vue.js용으로 만든 카운트다운 서클 타이머 버튼 컴포넌트를 적용한 사례이다. 시간은 15초부터 시작하고 0초가 되면 refresh 아이콘이 시계방향으로 회전한 후 초기화된다. 0초가 되거나 버튼을 클릭하면 $emmit에 의해 부모 컴포넌트의 함수를 호출한다. 부모 컴포넌트의 함수에는 서버에 get 요청하는 코드를 적용할 수 있다. 아래 코드는 부모 코드에서 사용한 사례이..
- [Vue.js] Bootstrap Autoplaying Carousel 오작동 문제2024-09-27 14:00:091. Bootstrap Autoplaying Carousel 오작동 문제https://getbootstrap.com/docs/5.3/components/carousel/#autoplaying-carousels위 링크는 부트스트랩 캐로우셀 자동 슬라이드 예제이다. 핵심은 data-bs-ride 속성에 "carousel"을 적용하면 캐로우셀의 슬라이드가 자동으로 넘어간다. 이 코드를 Vue.js 프로젝트에 적용했는데 오작동 문제가 발생했다.해당 페이지를 처음 열었을 때는 슬라이드가 정상적으로 동작하는데 다른 페이지에 다녀오면 멈춰 있다. 다음 버튼을 클릭하면 그제야 슬라이드가 동작하기 시작한다. 사용자의 버튼 이벤트 발생 시 자동 플레이가 되는 옵션은 "carousel"이 아니라 "true"이며 나의 경우 ..
- [Vue.js] watch로 두개 이상의 값 변경 감지2024-09-25 13:13:43두 개 이상의 값 변경 감지둘 이상의 값에 대한 변경을 감지하여 하나의 값이라도 변경이 일어나면 특정 메서드를 실행하는 코드가 필요했다. 아래 코드는 computed에 임의로 정의한 data1(), data2()의 반환 값을 watch에서 감지하여 둘 중 값이 하나라도 변경되면 동일한 handleUpdate() 함수가 호출되도록 작성한 것이다. 주의할 점은 감시하는 값이 객체인 경우에는 "deep" 속성을 추가해야 변경을 감지할 수 있다.computed: { data1() { return this.$store.state.data1; // vuex 상태 값1 }, data2() { return this.$store.state.data2; // vuex 상태 값2 }},watch: { d..
- [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..
728x90
반응형