회사에서 타이머를 개선하던 중, setInterval 호출 주기에 따른 메모리 비용을 분석하면서,JS Heap과 가비지 컬렉터에 대해서 공부하고 정리해보게 되었어요! 😎😎    1. 메모리 관리란 무엇인가?자바스크립트가 어떻게 메모리를 관리하는지 알아보려면, 먼저 메모리 관리가 무엇인지 이해해야 해요. 컴퓨터 프로그램은 데이터를 처리하기 위해 메모리라는 공간을 사용하고, 이 메모리에는 변수를 저장하거나 객체를 생성하는 등의 작업이 이루어집니다. 메모리를 효과적으로 관리하지 않으면, 프로그램의 성능이 떨어지거나, 메모리 누수가 발생할 수 있어요.자바스크립트는 자동 메모리 관리를 제공합니다. 즉, 프로그래머가 직접 메모리를 할당하거나 해제하지 않아도, 자바스크립트 엔진이 이를 자동으로 처리합니다. 그 과..

Hi there~다들 잘 지내고 계신가요??😃저는 최근에 졸업작품을 마무리하고 프로젝트의 기능들을 하나씩 리팩토링하는 과정에 있습니다 :)   최근에 밋팀 메인페이지에 필터 기능을 구현하던 중 특이한 현상을 마주했습니다..! OMG..!!  제가 원하는 모습은 삭제버튼을 눌러도 드롭다운 창이 닫히지 않는 것이었어요!!하지만,,, 닫혔죠? 구글링을 하던 중 저와 비슷한 상황을 겪으신 분을 발견했어요!!! stopPropagation() 이라는 메서드를 통해서 해결할 수 있었습니다 😁 저의 코드는 현재 아래와 같은 구조를 띄고 있어요.부모 컴포넌트의 wrapper에서 클릭 이벤트가 발생하면 창을 닫고 열도록 구현이 되어있고,이 이벤트는 자식 컴포넌트들에게 전파가 되죠. 자식 컴포넌트 1에서는 아무런 문제..

며칠전 사이드 프로젝트의 댓글 기능을 작업하고 있었다.정상적으로 동작하는지 확인하기 위해 테스트를 하던 중 아래의 사진과 같은 에러가 발생했다.  "안녕"을 입력하면 "녕"까지 추가로 입력이 되었고, "하이"를 입력하면 "이"까지 추가로 입력되었다.원인을 파악하다가 도저히 왜 이벤트가 두 번 실행되는 것인지 알 수 없었다.  구글링을 해서 찾아낸 결과,영어와 다르게 자음과 모음의 조합으로 한 음절이 만들어지는 한글의 특성 때문에 발생하는 오류였다.onKeyDown / onKeyUp 를 onKeyPress로 변경하면서 오류는 해결할 수 있었다.  onKeyDown / onKeyUp키를 누르고 때는 동작 자체에 반응한다.문자, 숫자, Ctrl, Shift, Alt, F1~F12, Scroll Lock, Pa..

함수 객체의 프로퍼티 함수 객체의 프로퍼티에는 arguments, caller, length, name, __proto__, prototype 프로퍼티가 존재한다. arguments 프로퍼티 함수 객체의 arguments 프로퍼티 값은 arguments 객체 arguments 객체는 함수 호출 시 전달된 인수들의 정보를 담고 있는 순회 가능한 유사 배열 객체 지역변수처럼 사용(외부 참조 불가) 자바스크립트는 함수의 매개변수와 인수의 개수가 일치하는지 확인하지 않는다. 다음 예제를 살펴보자. 함수를 정의할 때 선언한 매개변수는 함수 몸체 내부에서 변수와 동일하게 취급한다. 즉, 함수가 호출되면 함수 몸체 내에서 암묵적으로 매개변수가 선언되고 undefined로 초기화된 이후 인수가 할당된다. 그래서, 선언..

일급객체 일급객체란 무엇일까? 다음의 조건을 만족하는 객체를 일급객체라 한다. 1. 무명의 리터럴로 생성할 수 있음.(즉, 런타임에 생성이 가능함.) 2. 변수나 자료구조(객체, 배열 등)에 저장할 수 있음. 3. 함수의 매개변수에 전달할 수 있음. 4. 함수의 반환값으로 사용할 수 있음. 자바스크립트에서 함수는 위의 조건을 모두 만족한다. 그래서 자바스크립트에서는 함수를 일급객체라고 할 수 있다. 다음 예제를 살펴보자. 함수가 일급객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미다. 객체는 값이므로 함수는 값과 동일하게 취급할 수 있다. 일급객체로서 함수가 가지는 가장 큰 특징은 일반 객체와 같이 함수의 매개변수에 전달할 수 있으며, 함수의 반환값으로 사용할 수도 있다는 것이다. 그렇다면 일..

객체를 생성하는 방법 중 객체 리터럴에 의한 객체 생성은 가장 일반적이고 간단한 객체 생성 방식이다. 그 외에도 다양한 객체 생성 방식이 있는데, 그 중 생성자 함수를 사용하여 객체를 생성하는 방식에 대해 살펴보자. Object 생성자 함수 new 연산자와 함께 object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. // 빈 객체의 생성 const person = new Object(); // 프로퍼티 추가 person.name = 'April'; person.sayHello = function () { console.log('Hi! My name is ' + this.name); }; console.log(person); // {name: "April", sayHello: ƒ} person...

내부 슬롯과 내부 메서드 프로퍼티와 어트리뷰트를 이해하기 위해 먼저 내부 슬롯과 내부 메서드를 알아보자. 더보기 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. ECMAScript 사양에 등장하는 이중 대괄호([[ ... ]])로 감싼 이름들이 내부 슬롯과 내부 메서드다. 내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만, 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다. 내부 슬롯과 내부 메소드는 직접 접근하거나 호출할 수 없다는 의미이다. (단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을..

자바스크립트는 싱글 스레드 기반 언어이다. Non-blocking 방식의 비동기적인 동시성 언어이며 콜 스택, 이벤트 루프와 콜백 큐, 그리고 여러가지 다른 API들을 가지고 있다. 자바스크립트 엔진인 V8은 콜 스택과 힙을 가지고 있다. 힙은 메모리가 할당되는 부분 콜 스택은 함수가 호출될 때, execution context가 쌓이는 영역 콜 스택(Call Stack) 그림을 보면, 자바스크립트 엔진인 V8이 가지고 있는 힙과 콜 스택이 있고, 웹 브라우저에서 제공하는 Web API가 DOM, Ajax, setTimeout 등을 제공하는 것을 알 수 있다. 하단에는 event loop와 콜백 큐가 있는 것을 확인할 수 있다. 하나의 스레드 = 하나의 콜 스택 = 한 번의 한 작업 자바스크립트는 Sin..

Prototype은 뭘까? 오늘은 prototype에 대해서 공부해봅시다! Prototype에 대해서 공부하기 전에 JavaScript에서 class에 대한 내용을 잠시 설명하고 가겠습니다. 아래의 코드를 보시면 기계라는 것을 통해서 object를 마음껏 찍어낼 수 있습니다. 비슷한 object를 쉽게 만들고 싶을 때, 아래와 같은 문법을 사용할 수 있습니다. // object 복사 기계(부모) function 기계() { // 복사된 object가 기본으로 가질 속성 this.q = 'strike'; this.w = 'snowball'; } // object 생성(자식) var nunu = new 기계(); console.log(nunu); // { q: "strike", w: "snowball" } ..