분류 전체보기

안녕하세요.지난 게시글에서 마우스 휠로 비디오의 볼륨을 조절하는 스크립트를 작성했었습니다.이 스크립트를 실제 사용함에 있어 버그 수정과 기능 추가를 조금 더 해보겠습니다. 문제 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 파싱렌더링 과정의 첫 단계는 파싱입니다. 사용자가 웹 페이지를 요청하면 브라우저는 해당 페이지와 관련된 ..

안녕하세요.오늘은 화살표 함수와 일반 함수에 대해 알아보도록 하겠습니다. 들어가며자바스크립트는 다양한 방식으로 함수를 정의할 수 있습니다. 그중 두 가지 주요 방식으로는 일반적인 함수 선언 방식과 ES6(ECMAScript 2015)에서 도입된 화살표 함수 선언 방식입니다. 모두 재사용 가능한 코드 블록을 캡슐화하는 목적을 수행하지만 각자 고유한 특징을 보여줍니다. 두 가지 방식에 어떠한 차이가 있을까요? 천천히 알아보도록 하겠습니다.  자바스크립트의 일반 함수일반 함수는 두 가지 방식으로 정의할 수 있습니다.함수 선언 방식함수 선언방식은 function 키워드를 통해 작성하여 사용하는 방식입니다.function greet(name) { console.log("Hello, " + name + "!");..

안녕하세요.오늘은 Kasm을 docker를 통해 설치하고 사용해 본 짧은 후기를 알려드리겠습니다.Kasm?Kasm은 어떤 장치에서든 응용 프로그램 및 데이터에 원격으로 액세스 할 수 있는 가상 데스크톱 인프라(VDI) 플랫폼입니다. 이는 사용자가 로컬 머신을 사용하는 것과 같이 소프트웨어 및 파일과 상호 작용할 수 있는 가상 환경을 제공합니다.설치 (docker-compose.yml)services: kasm: image: lscr.io/linuxserver/kasm:latest container_name: kasm privileged: true environment: - KASM_PORT=443 # - DOCKER_HUB_USERNAME=USER #..

안녕하세요.오늘은 Dockerfile을 안전하고 최적화하여 만드는 방법을 알아보도록 하겠습니다. 들어가며Docker는 Container화를 통해 애플리케이션의 개발 및 배포 방식에 엄청난 혁신을 가져온 도구입니다. 이 Container화의 기초에는 Dockerfile이 있습니다. Dockerfile은 Docker 이미지 생성을 자동화하는 표준화된 방식을 제공하며 이를 통해 애플리케이션의 구동 환경을 캡슐화할 수 있습니다. 이때 효율적이고 안정적인 배포를 위해서는 안전하고 최적화된 Dockerfile이 필수적입니다. 이 글에서는 안전하고 최적화된 Dockerfile을 만드는 방법을 천천히 알아보도록 하겠습니다.Dockerfile이란?Dockerfile은 텍스트 기반으로 된 문서 파일로 Docker 이미지를..

안녕하세요.오늘은 자바스크립트의 프로토타입(Prototype)에 대해 알아보도록 하겠습니다. 들어가며자바스크립트는 다양한 애플리케이션을 만드는 데 사용할 수 있는 유연한 언어입니다. 여기에는 프토토타입이라는 개념이 기반이 되어 있습니다. 흔히 자바스크립트를 프로토타입 기반 언어(prototype-based language)라고도 불리는 이유 중 하나입니다. 그래서 프로토타입이 무엇일까요? 객체 생성에는 어떠한 영향을 줄까요? 천천히 알아 보도록 하겠습니다.프로토타입(Prototype)이란?프로토타입은 자바스크립트 객체의 구성 요소로, 객체 상속과 속성 위임을 가능하게 합니다. 즉, 자바스크립트에서 프로토타입은 객체를 만들기 위한 청사진 역할을 하며 재사용이 가능한 속성과 메서드를 가지고 있으며 다른 객체..

들어가며최근 Notion을 사용하다 Obsidian으로 옮기면서, 자동으로 백업을 할 수 있는 방법이 필요해 검색 중 Microsoft에서 제공했던 SyncToy라는 것을 알게 되었습니다. 무료로 제공되던 프로그램이지만 현재 개발과 배포가 중단된 것으로 확인이 됩니다. 오래된 프로그램이지만 정상적으로 잘 작동되어 사용방법을 공유해 봅니다. 먼저, Microsoft SyncToy를 사용하면 로컬 하드 드라이브, 외장 하드 드라이브 또는 네트워크 드라이브의 폴더 간에 파일과 폴더를 동기화하고 백업할 수 있습니다. 파일과 폴더가 원하는 방식으로 복사 및 업데이트되도록 Synchronize, Echo, Contribute 3가지 동기화 모드를 제공합니다. Microsoft SyncToy는 파일 유형 또는 크기별..

안녕하세요.오늘은 Self-hosted용으로 구축이 가능한 Obsidian을 설치하는 방법을 알려드리겠습니다. Obsidian?메모 앱을 사용해 보셨던 사용자라면 Obsidian을 한 번쯤은 들어보셨을 거라 생각됩니다. Obsidian은 Markdown 기반으로 동작하는 개인 지식 기반 메모 작성 프로그램입니다. 이를 통해 사용자는 노트에 대한 내부 링크를 만든 다음 연결을 그래프로 시각화하며 구조화된 정보 저장소를 유지하는 기능을 제공합니다.왜 직접 구축을 하는가?Notion과 기타 다른 메모앱은 계정과 연동된 클라우드를 통해 메모들이 자동으로 백업되고 타 기기에서도 같은 메모를 확인하실 수 있으실 겁니다. 하지만 Obsidian은 Local에 저장되는 메모앱으로 다른 기기 간 메모를 유지하기 위해선 ..

안녕하세요.Linux에서 백그라운드로 프로세스를 동작시키는데 이유 없이 프로세스가 죽어서 당황하셨던 경험이 있으신가요?이 문제를 해결했던 방법을 공유합니다.소스 코드#!/bin/bash# 확인할 프로세스 이름process_name="your_process_name"# 프로세스가 실행 중인지 확인if ps aux | grep "$process_name" > /dev/null; then echo "프로세스 $process_name이 이미 실행 중입니다."else echo "프로세스 $process_name이 실행 중이 아닙니다. 다시 시작합니다." # 여기에 프로세스를 다시 시작하는 명령어를 추가합니다. # 예: /path/to/your/command &fi소스 코드 동작 설명ps 명령..

안녕하세요.오늘은 자바스크립트에서 사용하는 apply(), call(), bind()에 대해 알아보도록 하겠습니다. 들어가기 전에자바스크립트의 강력함은 그 유연성에 있으며, 이 유연성의 핵심 요소 중 하나는 함수 콘텍스트입니다. 때로는 우리가 이 콘텍스트를 직접 제어해야 할 때가 있습니다. 이때 call(), apply(), bind()가 등장합니다. 이들은 함수 호출 방식과 this가 참조하는 대상을 조작할 수 있도록 하는 메서드입니다.자바스크립트에서 this는 무엇일까요? this는 함수 호출방식에 따라 동적으로 결정됩니다. 일반함수로 호출한 경우 Global 객체 Method로 호출할 경우 호출한 객체생성자 함수를 호출할 경우 생성자 함수가 생성할 인스턴스call() / apply() / bind(..

안녕하세요.오늘은 실제 사용 중이거나 집에서 편히 쉬고 있는 스마트폰이나 태블릿을 보조모니터로 활용하는 방법을 알아보도록 하겠습니다. 들어가면서외부에서 작업을 많이 하는 저에게, 그리고 듀얼 모니터를 항시 사용하던 저에게는 노트북의 화면 하나로는 느껴지는 답답함이 효율을 조금 떨어 뜨리는 것 같아 방법을 찾게 되었습니다. 방법을 찾는 조건에는 제가 현재 사용 중인 갤럭시 폴드 3을 최대한 활용하는 것에 중점을 두었습니다. 웹서핑을 해보면서 여러 가지 무료, 유료앱들이 서브모니터 역할을 할 수 있게 도움을 주는 것으로 확인되었고, 삼성 스마트폰의 경우 갤럭시 탭과 같은 태블릿에서 SmartView 기능을 활용해서 듀얼 모니터를 사용할 수 있는 것으로 확인되었습니다. 제가 현재 외부에서 사용 중인 환경은 아..

안녕하세요.오늘은 리눅스 OS에서 디스크 사용량을 확인하는 다양한 방법에 대해 알아보도록 하겠습니다. 디스크 용량을 관리해야하는 이유디스크 공간은 보통은 제한적인 상태에서 사용될 수 밖에 없고 시간이 지남에 따라 데이터를 축적하게 되며 저장 공간을 효과적으로 관리하지 않게 되면 성능 저하와 잠재적인 시스템 장애이 발생될 수 있기 때문입니다. 기본 제공 명령어 사용하기df 명령어 (Disk Free)df 명령어는 마운트된 파일 시스템의 디스크 공간 사용률에 대한 목록을 제공합니다.  Command df 파일 시스템 1K-블록 사용 가용 사용% 마운트위치tmpfs 2456360 4400 2451960 1% /run/dev/sda1 ..

안녕하세요.오늘은 Javascript 개발을 하다 보면 한 번쯤은 들어봤을 클로저(Closure)에 대해 알아보도록 하겠습니다. 클로저란?자바스크립트에서 함수가 외부 범위의 변수를 기억하는 것처럼 보이는 현상을 접한 적이 있나요? 클로저(Closure)는 자바스크립트에서 외부 함수가 실행된 후에도 외부 범위에 대한 접근 권한을 유지하는 함수입니다. 이는 내부 함수가 외부 함수 범위의 변수를 "닫아서" 가비지 컬렉션(Garbage collection)으로부터 보호하는 것을 의미합니다.   들어가기 전에 알아야 할 자바스크립트 지식렉시컬 스코핑 (Lexical Scoping)렉시컬 스코핑은 변수의 접근성을 코드 내 위치에 따라 결정하는 방식을 뜻합니다.. 이 정적 접근 방식은 복잡한 코드 기반에서 예측 가능..

안녕하세요.오늘은 정말 간단하게 docker container를 올리자마자 즉시 종료되는 문제를 해결하는 방법을 알아보겠습니다. 들어가며: 시작 후 즉시 종료되는 컨테이너docker 사용자가 가장 많이 겪는 고통스러운 문제 중 하나는 컨테이너가 시작된 후 즉시 종료되는 경우입니다. 직접 Dockerfile을 빌드하며 보통은 휴먼 에러에 의해 발생하기도 하고 설정 오류, 리소스 제약 또는 내부의 오류로 인해 즉시 종료되는 경우가 있습니다. 이러한 상황에 docker logs 명령어를 통해 확인할 수 있다면 확인할 수 있겠지만 즉시 사라져 버리는 경우에는 확인도 불가해 끔찍한 상황에 놓여 있을 수 있습니다. 이 문제를 해결하려면 docker container가 의도한 대로 실행될 수 있도록 하는 전략을 구현..

안녕하세요.JavaScript에서 변수를 선언하는 세 가지 주요 방법인 var, let, const에 대해 알아보도록 하겠습니다.각 키워드의 특징과 장단점, 사용 예시 등을 자세히 살펴보겠습니다.  변수 키워드 - varvar는 JavaScript에서 가장 오래된 변수 선언 방식입니다. var로 변수를 선언하면 가장 가까운 함수의 범위에 스코프가 지정됩니다. 이는 var로 선언된 변수가 함수 스코프를 갖는다는 것을 의미합니다. var 변수는 재선언과 재할당이 가능합니다.  재선언동일한 이름으로 새로운 변수를 선언하는 것재할당기존 변수에 새로운 값을 할당하는 것특징함수 범위var변수는 함수 범위에서 유효합니다.호이스팅 있음var 변수는 함수의 맨 위로 올라가는 것처럼 작동합니다. 이는 예상치 못한 오류를 ..

안녕하세요.오늘은 모바일 기기에서 실행 중인 화면을 Chrome DevTools를 통해 디버깅하는 방법을 알아보도록 하겠습니다.Chrome DevTools 소개Chrome DevTools는 Google Chrome 브라우저에 직접 내장된 웹 개발자 도구입니다. 이것은 웹 개발자들을 위한 디버깅, 편집 및 분석 기능을 제공하여 웹 개발자들에게 필수적인 도구로 자리 잡았습니다. 문제 해결, 성능 최적화 또는 디자인 변경 실험 등에 여러 방면에서 사용되는 도구입니다. 사용할 명령어chrome://inspectchrome://inspect란 무엇인가?Chrome DevTools의 핵심에는 모바일 장치를 검사하고 디버깅하는 기능인 chrome://inspect가 있습니다. 많은 개발자가 데스크톱 웹 개발을 위해 ..

안녕하세요.오늘은 REST API에 대해 알아보도록 하겠습니다. REST?REST는 REpresentational State Transfer의 약어로 네트워크 응용 프로그램을 디자인하는 아키텍처 스타일입니다. 기본적으로 REST는 클라이언트-서버 모델을 기반으로하며 클라이언트가 서버의 리소스에 액세스하거나 수정하기 위한 요청을 보냅니다. 이러한 리소스는 JSON 또는 XML과 같은 표준 데이터 형식을 사용하여 이해하기 쉽고 조작하기 쉬워집니다. REST를 활용한 API는 간결성, 확장 가능성 및 다양한 프로그래밍 언어 및 플랫폼과의 호환성 때문에 널리 사용되고 있습니다.REST API?REST API는 상태를 유지하지 않는 통신(Stateless)을 특징으로하며, 클라이언트의 각 요청은 서버가 이를 충족..