728x90
반응형
- [Vue.js] 서버 이전 후 애플리케이션을 실행했는데 지도가 렌더링되지 않았다! ReferenceError: kakao is not defined2024-03-13 13:13:051. 카카오 지도가 렌더링 되지 않았다! 서버 이전을 하고 pm2로 애플리케이션을 구동했는데 콘솔에 "ReferenceError: kakao is not defined" 에러가 찍혀 있었고, 카카오 지도가 렌더링 되지 않았다. 기존 서버에서는 정상 동작하는데 새롭게 이전한 서버의 IP에서 위 같은 문제가 발생했다. Vue.js로 작성한 코드에서 카카오 지도 API 연동에 문제가 있는 줄 알고 코드 고치며 무한 삽질했다 ㅠ_ㅠ 2. 사이트 도메인(또는 IP)을 추가해야 한다! [그림 1]과 같이 카카오 API 사이트에서 변경된 도메인을 등록해야 한다. DSN가 아닌 IP를 등록한다면 포트 번호도 입력해야 한다. 카카오 API : https://developers.kakao.com/console/app 등록..
- [Vue.js] 토스트 팝업시 오디오 재생 가능? 브라우저의 자동 재생 정책은 안가능!2023-09-25 17:48:261. 토스트 팝업시 오디오 자동 재생 기능 작동 안 됨! 토스트 팝업시에 오디오 경고 알림이 자동적으로 재생되는 기능을 적용하였다. 하지만 mp3 오디오 파일은 재생되지 않았고 콘솔에 다음과 같은 에러만 출력되었다. Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. 이 에러는 브라우저의 자동 재생 정책 때문에 발생하는 것이다. 최근의 브라우저는 사용자 상호작용 없이 자동으로 오디오 및 비디오를 재생하는 것을 제한하고 있다고 한다. 따라서 사용자의 상호작용이 있을 때만 자동으로 재생을 허용한다. 작성한 자바스크립트 코드는 아래와 같다. // 오디오 파일 재생 fnc..
- [Vue.js] 고민 끝에 찾은 "vue3-toastify"를 이용한 토스트 알림 Custom 스타일-나만의-적용 방법2023-09-20 15:56:381. "vue3-toastify" 오 이거 괜찮은데?! vue3 프로젝트에 적용할 토스트 라이브러리를 찾다가 npm에서 vue3-toastify 발견했다. 디자인, 애니메이션, 기능도 훌륭했고 문서도 제공되고 있었다. 공식 페이지 : https://vue3-toastify.js-bridge.com/ 2. 알림의 종류에 따라 다른 스타일을 적용하고 싶은데 어떻게 하는 거지? "경고, 심각, 위험"이라는 3가지 상태에 대한 토스트 알림을 주고자 했다. 각 상태에 따라 각각 다른 사용자 경험을 주고 싶었고 백그라운드 컬러를 다르게 하는 방식을 생각했다. 그런데 그런 커스텀한 스타일은 어떻게 주는 거지?? 2.1. 시도 공식 문서에서 "How to style"라는 페이지에서 힌트를 얻을 수 있을 것 같았다. 해..
- [Vue.js] sweetalert2에서 템플릿 리터럴을 이용한 title, confirmButtonText의 폰트(font-family) 변경 방법2023-08-21 16:52:471. 전역 스타일에 적용된 폰트가 sweetalert2에서 적용되지 않는 문제 전역으로 사용하고 있는 scss에 폰트를 적용했고 대부분의 페이지에 해당 폰트가 적용되었으나 sweetalert2에는 적용이 되지 않았다. sweetalert2 공식 문서의 customClass 속성도 지정해 봤는데 적용되지 않았다. 2. 템플릿 리터럴을 이용한 폰트 변경 가능 템플릿 리터럴 방식으로 폰트 변경이 가능했다. this.$swal({ title: `조회기간을 선택해 주세요!`, icon: 'error', iconColor: `${this.mainColor}`, confirmButtonText: `확인`, confirmButtonColor: `${this.mainColor}` }) 참고 자료 https://kr.co..
- [Vue.js] 카카오 지도 API 사용 중 만난 "Failed to load resource: the server responsed with a status of 401 (Unauthorized)"2023-03-07 09:03:521. 이유를 알 수 없는 401 에러 특별히 수정한 코드가-전혀-없었음에도 불구하고 [그림 1]과 같은 에러가 발생했다. 동일한 코드의 기 빌드된 경우와 다른 PC에서 동일한 코드를 실행한 경우는 정상적으로 작동했다. 2. 문제 PC의 프로젝트 싹 밀고 다시! 형상관리를 깃허브로 하고 있었기 때문에 로컬의 프로젝트 코드를 모두 삭제하고 다시 클론 후 실행했더니 이 문제가 사라 졌다! 이럴 수가?!
- [Vue.js] vue-datepicker-next를 이용한 날짜 데이터 바인딩2023-02-20 02:21:331. 왜 vue-datepicker-next의 입력창에 기본 날짜가 표시되지 않지!? 셀렉트 박스 "--간격''"에 설정된 일간, 주간, 월간, 연간을 선택하면 조회기간 vue-datepicker-next 입력창에 해당 항목의 기본값을 표시되도록 하고자 하였다. 하지만 datepicker을 통해서 입력할 때는 잘 표시되지만 셀렉트 박스를 통해 선택할 경우에는 아무런 변화가 없었다. 2. @change와 v-model을 이용해 해결 @change를 이용해 셀렉트 박스의 항목이 변경될때 마다 그에 맞게 time 배열의 값이 변경되도록 했다. date-picker에는 time배열이 v-model로 바인딩되어 있기 때문에 값이 변경될 때마다 해당 날짜값이 표시된다. [그림 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 */ ..
728x90
반응형