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

1. 불필요한 렌더링으로 눈살 찌푸려 >.

1. 유튜브 영상은 2배속까지만 재생이 가능할까? 유튜브 영상은 현재 재생 속도 제어를 0.25~2배속까지 지원한다. 하지만 웹은 더 빠른 속도로 영상을 재생할 수 있다. 2. 즉시 실행함수를 이용해 재생 속도 제어 웹의 동영상 속도를 제어하고 싶다면 크롬의 개발자 도구(단축키 F12)의 Console에서 다음의 즉시 실행함수를 입력하면 된다. 속도는 playbackRate에 원하는 값을 입력하여 제어한다. (function(){document.querySelector('video').playbackRate = 3.0}()) 아래는 위 코드를 화살표 함수로 작성한 코드이다. (() => {document.querySelector('video').playbackRate = 3.0})()

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

1. 반만 작동하는 "라이트 모드-다크 모드' 전환 기능!? Vue.js 프로젝트에 "라이트 모드-다크 모드" 전환 기능을 구현하고 있었다. 로컬 스토리지에 사용자가 설정한 값을 기억하도록 했고 애플리케이션이 실행되면 로컬 스토리지에 저장된 값을 불러와 그에 맞는 화면을 보여주고자 했다. 그래서 로컬스토리의 값이 false이면 "라이트 모드"를 렌더링 하고, true이면 "다크 모드"를 렌더링 하도록 구현하였다. 그런데 라이트 모드(false)에서 다크 모드(true)로의 전환은 잘 작동하였으나 그 반대는 원하는 대로 작동하지 않았다. 콘솔 로그를 찍어 확인했는데 값은 'false'로 잘 변경되어 있었다. 그런데 왜왜왜? 2. 'false'는 과연 false일까? 라이트 모드는 로컬 스토리지의 불리언 값..

1. 프로그래머스 레벨 1 "삼총사" https://school.programmers.co.kr/learn/courses/30/lessons/131705?language=python3 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2. 파이썬에서 itertools로 조합을 구하여 풀이 성공 이 문제는 조합을 이용하여 경우의 수를 구해 풀이하면 되었다. 파이썬은 itertools라는 유용한 라이브러리를 가지고 있기 때문에 이를 이용하면 쉽게 풀 수가 있다. itertools는 "조합" 뿐만 아니라 "순열"도 구할 수 있다. import itertools #..

1. navigator.clipboard.writeText()를 이용한 텍스트 클립보드 복사 문제 navigator.clipboard.writeText()를 이용해 텍스트를 클립보드에 복사하는 기능을 적용하였는데, 웹에서는 정상적으로 동작했지만 모바일에서는 작동하지 않았다. // 모바일에서 작동하지 않았음 handleCopyClipBoard: async (text, then) => { try { await navigator.clipboard.writeText(text); // alert('클립보드에 링크가 복사되었습니다.'); then(true); } catch (e) { then(false); // alert('복사에 실패하였습니다'); } }, 2. 모바일에서도 작동하는 react-copy-to-cl..

1. 전역 스타일에 적용된 폰트가 sweetalert2에서 적용되지 않는 문제 전역으로 사용하고 있는 scss에 폰트를 적용했고 대부분의 페이지에 해당 폰트가 적용되었으나 sweetalert2에는 적용이 되지 않았다. sweetalert2 공식 문서의 customClass 속성도 지정해 봤는데 적용되지 않았다. 2. 템플릿 리터럴을 이용한 폰트 변경 가능 템플릿 리터럴 방식으로 폰트 변경이 가능했다. this.$swal({ title: `조회기간을 선택해 주세요!`, icon: 'error', iconColor: `${this.mainColor}`, confirmButtonText: `확인`, confirmButtonColor: `${this.mainColor}` }) 참고 자료 https://kr.co..