1. 리덕스 좀 복잡하네?! 상태관리 라이브러리 리덕스(Redux)는 다음과 같은 구조로 되어 있다. Store: 애플리케이션 상태를 저장한다. Action: 상태 변경을 요청하는 객체로, type필드와 필요에 따라 payload를 가진다. Reducer: 현재 상태와 액션을 받아 새로운 상태를 생성하는 함수로, 불변성을 유지하면서 상태를 업데이트한다. Dispatcher: 액션을 리듀서로 보내 상태를 업데이트한다. Store의 값은 모든 컴포넌트에서 사용할 수 있고, 변경하고자 하는 값을 Action에 담아 Dispatcher를 이용해 Reducer로 보내서 값을 변경할 수 있다. 이런 단순 깔끔한 구조이지만 코드로 작성하면 다소 복잡해진다. 2. 리덕스로 간단한 TODO리스트 구현, 뭔가 복잡?! 간..

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

1. 클로저(Closure) 란? 클로저는 함수와 함수가 선언된 렉시컬 스코프(Lexical Scope) 사이의 특별한 관계를 나타내는 개념이다. 함수 내부에서 선언된 함수가 외부 함수의 변수에 접근할 수 있고, 그러한 함수를 클로저라고 한다. 클로저는 외부 함수의 변수에 대한 참조를 "닫아"(Capture)서 나중에 사용할 수 있도록 저장한다. 이로 인해 외부 함수가 종료된 이후에도 해당 변수에 접근할 수 있다. 2. 클로저와 관련한 몇 가지 개념 1) 렉시컬 스코프(Lexical Scope): JavaScript는 함수를 정의할 때 함수 내부에서 외부 스코프에 접근할 수 있도록 스코프를 정의한다. 이 스코프는 함수를 선언할 때 결정되며, 함수가 어떤 변수에 접근할 수 있는지 결정한다. 이러한 스코프 ..

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일까? 라이트 모드는 로컬 스토리지의 불리언 값..