전체 글

안녕하세요.지난 게시글에서 마우스 휠로 비디오의 볼륨을 조절하는 스크립트를 작성했었습니다.이 스크립트를 실제 사용함에 있어 버그 수정과 기능 추가를 조금 더 해보겠습니다. 문제 1: Video의 객체를 찾지 못하는 문제 수정Video가 재생되고 작성한 스크립트를 실행시키면 100% 이벤트가 연결되었습니다. 하지만, 일부 특정한 상황에서 Video 객체에 이벤트를 연결하지 못하는 문제가 사용하면서 발생이 되었습니다. 이 문제를 수정해 보도록 하겠습니다.원인: 적용하려는 사이트가 SPA로 제공되어 새로고침 없이 동작한다SPA(Single Page Application)으로 구성된 사이트가 왜 문제가 된 것인가?해당 스크립트는 window.addEventListener("load", ...)를 통해 웹 페이지..

안녕하세요.오늘은 웹사이트에서 재생 중인 비디오의 음량을 조절할 때 마우스 휠을 통해 조정하는 방법을 작업해보려고 합니다. 1. 들어가며데스크탑의 동영상 플레이어에서는 마우스 휠을 통해 볼륨을 조절하는 기능을 기본적으로 제공을 하고 있습니다. 개인적으로 마우스를 클릭해서 조절하거나 드래그를 통해 볼륨바를 조절하는 것보다 오히려 섬세하게 조절할 수 있다고 생각해 애용하는 기능 중 하나였습니다. 이 기능을 스트리밍 사이트(치지직)에 적용을 해보았고 고민하는 과정과 개발, 디버깅 등 작업했던 기록을 공유하고자 합니다. 2. 기능의 설계 및 중요 기능 테스트2.1. 어떤 것을 조작해야 볼륨이 줄어들까?의 controls 속성에는 기본적으로 컨트롤러를 제공합니다.소리 조절(volume)동영상 탐색(seek)일시 ..

안녕하세요.오늘은 Wordpress에서 파일업로드 공간을 MiniO로 설정하는 방법에 대해 알아보도록 하겠습니다. 들어가며저는 Docker에서 이전에 작성했던 MiniO를 구축하여 사용 중입니다. MiniO를 활용할 수 있는 방법을 생각하던 중, 구축했던 WordPress에 연동하여 사용하면 좋을 것 같아 진행해 보았지만 쉬운 여정이라 생각했지만 생각보다 험난하게 성공했던 여정을 공유하면 좋을 것 같아 이 글을 작성하게 되었습니다. 저의 현재 WordPress 버전은 6.5.2입니다. 결과적으로 성공한 플러그인은 "Media Cloud"입니다. 해당 글은 "WP Offload Media Lite" 플러그인 설치를 시작으로 "Media Cloud" 플러그인 설치 과정으로 내용이 진행됩니다. 급하시거나 성공..

안녕하세요.오늘은 Wordpress의 빠른 퍼포먼스를 위해 필요하다는 Memcached를 설치하는 방법을 알려드리겠습니다. 저는 arm64 기반의 시스템에서 Ubuntu를 OS로 사용하고 있고 Docker Container를 통해 Wordpress를 동작시켰습니다. 다른 기반의 시스템에서는 다른 과정을 거치거나 필요 없을 수도 있습니다. 이 글에서는 다른 시스템에서의 과정은 다루지 않습니다!들어가며Wordpress는 블로그를 시작하기 전  항상 비교되는 블로그 플랫폼 중 하나였습니다. 자체 호스팅으로도 운영할 수 있을 만큼 많은 높은 자유도를 가진 플랫폼이었습니다. 티스토리를 시작하면서 한편에는 궁금함이 계속 남아있어서 해결하기 위해 Wordpress를 Docker로 한번 설치해 보았습니다. 그 과정에서..

안녕하세요.오늘은 웹 브라우저의 렌더링 과정에 대해 알아보도록 하겠습니다. 들어가며많은 이용자들은 웹에서 정보를 확인함에 있어 즉각적으로 확인하기를 기대하는 추세입니다. 즉, 조금이라도 늦게 된다면  웹 페이지의 사용자들은 기다려주지 않고 이탈이 빠르게 일어난다는 얘기이기도 합니다. 그런면에서 웹 브라우저에서의 렌더링 과정은 아름다운 이미지, 선명한 텍스트, 상호 작용 가능한 요소들이 완벽하게 배치시키고 빠르고 매끄럽게 표시하는데 있어 중요한 역할을 합니다. HTML과 CSS를 파싱하여 마지막 픽셀을 화면에 표시하기까지 어떠한 과정이 있을까요? 하나씩 알아보록 하겠습니다. 첫번째: HTML 및 CSS 파싱렌더링 과정의 첫 단계는 파싱입니다. 사용자가 웹 페이지를 요청하면 브라우저는 해당 페이지와 관련된 ..