1. 브라우저 정책으로 사용자와 상호작용 없는 오디오 재생 불가 문제 브라우저 정책으로 사용자와 상호작용없는 오디오의 재생이 안 되는 문제가 있어서 고민하고 리서치하다가 일렉트론을 이용한 데스크톱 애플리케이션으로 실행하면 오디오 재생이 가능하다는 것을 알게 되었다. 그래서 배포된 Vue.js 애플리케이션을 데스크톱 애플리케이션으로 만들어 보았다. 2. 일렉트론 프로젝트 생성하여 오디오 재생 성공! 2.1. 일렉트론 프로젝트 생성 일렉트론 공식 페이지의 Quick Start를 참고하여 프로젝트를 생성하였다. 데스크톱 애플리케이션으로 만들고자하는 웹 애플리케이션과는 별도로 일렉트론 프로젝트를 생성한다. // 별도의 일렉트론 프로젝트 폴더 생성 => 이동 => 설치 명령어 실행 npm i 2.2. 의존성 설치..

1. 토스트 팝업시 오디오 자동 재생 기능 작동 안 됨! 토스트 팝업시에 오디오 경고 알림이 자동적으로 재생되는 기능을 적용하였다. 하지만 mp3 오디오 파일은 재생되지 않았고 콘솔에 다음과 같은 에러만 출력되었다. Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. 이 에러는 브라우저의 자동 재생 정책 때문에 발생하는 것이다. 최근의 브라우저는 사용자 상호작용 없이 자동으로 오디오 및 비디오를 재생하는 것을 제한하고 있다고 한다. 따라서 사용자의 상호작용이 있을 때만 자동으로 재생을 허용한다. 작성한 자바스크립트 코드는 아래와 같다. // 오디오 파일 재생 fnc..

1. "vue3-toastify" 오 이거 괜찮은데?! vue3 프로젝트에 적용할 토스트 라이브러리를 찾다가 npm에서 vue3-toastify 발견했다. 디자인, 애니메이션, 기능도 훌륭했고 문서도 제공되고 있었다. 공식 페이지 : https://vue3-toastify.js-bridge.com/ 2. 알림의 종류에 따라 다른 스타일을 적용하고 싶은데 어떻게 하는 거지? "경고, 심각, 위험"이라는 3가지 상태에 대한 토스트 알림을 주고자 했다. 각 상태에 따라 각각 다른 사용자 경험을 주고 싶었고 백그라운드 컬러를 다르게 하는 방식을 생각했다. 그런데 그런 커스텀한 스타일은 어떻게 주는 거지?? 2.1. 시도 공식 문서에서 "How to style"라는 페이지에서 힌트를 얻을 수 있을 것 같았다. 해..

1. 왜 vue-datepicker-next의 입력창에 기본 날짜가 표시되지 않지!? 셀렉트 박스 "--간격''"에 설정된 일간, 주간, 월간, 연간을 선택하면 조회기간 vue-datepicker-next 입력창에 해당 항목의 기본값을 표시되도록 하고자 하였다. 하지만 datepicker을 통해서 입력할 때는 잘 표시되지만 셀렉트 박스를 통해 선택할 경우에는 아무런 변화가 없었다. 2. @change와 v-model을 이용해 해결 @change를 이용해 셀렉트 박스의 항목이 변경될때 마다 그에 맞게 time 배열의 값이 변경되도록 했다. date-picker에는 time배열이 v-model로 바인딩되어 있기 때문에 값이 변경될 때마다 해당 날짜값이 표시된다. [그림 2]는 제대로 동작하고 있음을 보여 준..

[그림 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'..

1. 동적 데이터 바인딩 가능한 커스텀 오버레이(마커) 구현 카카오 지도 API를 이용해 서비스를 구현 중이었는데 마커에 동적인 데이터 바인딩이 필요했다. 또한 마우스 호버, 클릭 이벤트에 대해서도 각각 다른 애니메이션을 보여 주어야 했다. [그림 1]은 노멀 상태에서는 circle 애니메이션, hover 시에는 circle + spinner 애니메이션, clicked 시에는 spinner 애니메이션이 적용된 커스텀 오버레이이다. [그림 1]을 구현하기 위해 HTMLElement를 이용했다. 카카오 지도 API에서는 Vue의 데이터 바인딩 처리가 되지 않았기 때문이다. 구현 코드는 다음과 같다. 1. template 2. script 3. style *2024-03-05 추가 2. 클릭 이벤트 시 커스텀..

AM, PM | 시분초 | 연월일 시분초, 년월일은 문자열 타입으로 변경하고 padStart로 2자리로 표시하였다. 시간은 12시간으로 표시되도록 하였다. export default { components: {}, data() { return { ampm: '', time: '', date: '' } }, created() { setInterval(() => this.getNow(), 1000) }, methods: { getNow() { const date = new Date() // 오전, 오후(AM, PM) 표시 this.ampm = date.getHours() >= 12 ? 'PM' : 'AM' // 시분초(00:00:00) 표시 this.time = `${String(date.getHours()..

팀 프로젝트를 깃허브에서 Pull 하고 실행했는데 아래와 같은 메시지가 포함된 에러가 발생했다. 이 문제는 OS별로 줄 바꿈 방식이 다르기 때문이라고 한다(macOS와 Linux는 LF, 윈도우는 CRLF가 기본값). prettier 2.0 이상에서는 LF를 사용하는데 윈도우에서는 엔터 키를 누를 경우 CRLF 방식으로 줄 바꿈이 이루어 지기 때문에 에러가 발생한다. error Delete `␍` prettier/prettier .eslintrc.js 파일에 아래 코드를 [그림 1]과 같이 추가하면, npm run serve 실행이 정상적으로 된다. endOfLine: "auto" 하지만 component의 코드 작성 후 저장하면 에러가 발생한다. 따라서 이에 추가하여 "Ctrl + ,"로 설정 진입 후..