[Javascript] 메모리 누수 진단 및 해결하기 #1 - 왜 일어나는걸까? 안녕하세요.이전 글에 이은 메모리 누수의 분석 방법과 해결 방법에 대해 알아보도록 하겠습니다. 메모리 누수 진단 도구 및 기법메모리 누수를 발견하고 그 원인을 분석하는 것은 쉽지 않을 수 있습니다. 다행히 브라우저에서 강력한 개발자 도구를 제공합니다.Chrome 개발자 도구 활용Chrome 개발자 도구는 JavaScript 메모리 관련 문제를 진단하는 데 가장 널리 사용됩니다.Memory 탭Heap snapshot특정 시점의 JavaScript 힙 메모리 상태를 스냅샷으로 찍습니다. 이 스냅샷은 생성된 객체, DOM 노드, 스코프 변수 등을 보여주며 각 객체의 크기와 다른 객체로부터 어떻게 참조되고 있는지(Retainers)..

안녕하세요.웹 애플리케이션이 점점 복잡해지면서 성능 문제는 흔한 골칫거리가 되었습니다. 특히 사용자 경험에 치명적인 영향을 주는 것 중 하나가 바로 '메모리 누수(Memory Leak)'입니다. JavaScript는 가비지 컬렉터가 자동으로 메모리를 관리해 주지만 우리의 코딩 실수로 인해 더 이상 필요 없는 메모리가 해제되지 못하고 계속 쌓이는 현상이 발생할 수 있죠. 이는 앱을 느리게 만들고 결국에는 브라우저 충돌로 이어지기도 합니다. 이 글에서는 JavaScript 메모리 누수가 왜 발생하며 어떻게 진단하고 효과적으로 해결할 수 있는지 알아보겠습니다. 메모리 누수란 무엇이며 왜 위험한가?JavaScript 엔진은 가비지 컬렉션(Garbage Collection) 메커니즘을 사용하여 더 이상 접근 불..

안녕하세요.오늘은 브라우저에서 재생중인 Video의 소리를 압축해 큰 소리를 압축하여 음질을 풍부하게 만드는 방법에 대해 설명드리려고 합니다. 들어가며실시간 스트리밍을 통해 재생되는 사이트에서 배경음이 너무 커서 목소리가 잘 들리지 않는 경우를 경험해보신 적이 있으신분들이 있으실 겁니다. 저의 경우, 헤드셋이나 이어폰을 통해 연결하면 그런 경우가 적지만, 스피커를 통해 재생하면 다른소리에 목소리가 묻혀 들리지 않아 소리를 키우면 배경음도 함께 커져 조금 답답한 경우가 있었습니다. 이를 DynamicsCompressorNode를 통해 개선하는 방법을 알려드리려고 합니다. DynamicsCompressorNode?DynamicsCompressorNode는 여러 사운드가 동시에 재생될 때 발생할 수 있는 클리..

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

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

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

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

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

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

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

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