penetrate the world

JavaScript 프로토타입 상속 구현하기: class 문법의 내부 동작 원리

1. 설명JavaScript에서 class 문법을 사용하면 객체지향 프로그래밍을 직관적으로 구현할 수 있다. 하지만 class는 ES6에서 도입된 문법적 설탕(syntactic sugar)일 뿐이고, 내부적으로는 여전히 프로토타입 기반으로 동작한다. 실제 프로덕션 환경에서 레거시 코드를 다루거나, 프레임워크의 내부 구조를 이해하거나, 메모리 최적화가 필요한 상황에서는 프로토타입의 동작 원리를 정확히 알아야 한다. 프로토타입 체인을 제대로 이해하지 못하면 예상치 못한 버그를 만날 수 있고, 특히 상속 관계에서 메서드가 어디에서 호출되는지 추적하기 어렵다.2. 개념 정의프로토타입은 JavaScript에서 효율적인 코드 재사용을 위해 존재하는 메커니즘이다. 모든 함수는 prototype 속성을 가지며, new..

자바스크립트 프로토타입: 플라톤과 아리스토텔레스의 싸움

자바스크립트는 클래스 기반이 아닌 프로토타입 기반 언어다.이는 단순한 구현 차이가 아니라, 객체지향 프로그래밍에 대한 근본적으로 다른 철학적 접근이다.ES6의 class 문법이 등장했지만, 그 아래에는 여전히 프로토타입이 작동하고 있다. 프로토타입은 추상적인 청사진이 아닌 구체적인 예시 객체를 통한 위임(delegation) 메커니즘이며, 이는 클래스 기반 상속보다 더 유연하고 강력하다. 1995년 브렌든 아이크가 단 10일 만에 자바스크립트를 설계할 때 Self 언어에서 영감을 받아 프로토타입을 선택한 이 결정은,오늘날 전 세계에서 가장 많이 사용되는 프로그래밍 언어의 핵심 특성이 되었다. 이 선택의 배경에는 2,000년 이상 이어져 온 철학적 논쟁이 있다. 플라톤은 이데아(idea, 그리스어 ἰδέα..

왜 실행 컨텍스트를 알아야 할까?디버깅하다 보면 예상과 다른 변수 값을 마주칠 때가 있다.console.log()로 찍어보니 undefined가 나오거나, 분명히 함수 안에서 선언했는데 바깥에서 접근이 안 되는 상황 말이다.이런 현상의 근본 원인이 바로 실행 컨텍스트다. 실제로 프로덕션에서 "메모리 사용량이 계속 늘어난다"는 제보를 받고 조사해본 적이 있다.원인은 이벤트 리스너 내부의 클로저가 DOM 요소를 계속 참조하고 있어서 가비지 컬렉션이 되지 않는 것이었다.Chrome DevTools의 Memory 탭에서 Heap Snapshot을 비교하니 쉽게 찾을 수 있었다. 클로저, this 바인딩, 호이스팅 같은 자바스크립트의 핵심 개념들이 모두 실행 컨텍스트에서 출발한다.이를 제대로 이해하면 성능 최적화..

1차로 아래 링크에서 나온 방법을 시도해본다. https://intellij-support.jetbrains.com/hc/en-us/community/posts/360004275380-Marketplace-Plugins-are-not-loaded 만약에 그래도 안된다면 사용자 지정 VM 옵션이 설정된 상태이거나 다운로드 된 서버 인증서를 확인해본다. https://youtrack.jetbrains.com/issue/IDEA-220355

intelliJ 커뮤니티 버전에서는 DB 탭이 따로 없기 때문에 플러그인을 다운 받아 사용해야 한다. 대표적인게 database navigator. 플러그인 설치하고 mysql 초기 연동을 하려고 하니 time zone 문제가 발생했길래 기록해둔다. mysql CLI 접속을 입력하고 출력되는 타임 존이 우리나라 시간대가 아니면 아래와 같은 방법으로 고칠 수 있다. use mysql; select @@global.time_zone, @@session.time_zone; Window 기준 mysql 설치 경로에서 my.ini 파일을 찾는다. 메모장 등으로 열어 아래의 코드 추가 default_time_zone = '+09:00' 설정이 끝나면 작업관리자 > 서비스 > mysql 재시작 하면 접속된다.

VSCode에서 Material Theme를 다운받았는데 이탤릭체가 싫어서 구글링한 후기이다. VSCode의 코드에서 이탤릭체(폰트 기울임)가 보이는게 싫은 사람은 아래와 같이 설정할 수 있다. 설정(Ctrl + ,) > JSON 열기 하단에 아래의 코드 추가 "editor.tokenColorCustomizations": { "textMateRules": [ { "scope": [ "comment", "comment.block", "comment.block.documentation", "comment.line", "constant", "constant.character", "constant.character.escape", "constant.numeric", "constant.numeric.integer..

기본적인 연산자 + - * / ** 등은 패스 '=='는 a == b 라고 할때, a와 b의 값이 같은지를 비교해서, 같으면 true, 다르면 false라고 한다.(값만 같으면 true이다.) '==='는 Strict, 즉 엄격한 Equal Operator로써, "엄격하게" 같음을 비교할 때 사용하는 연산자이다. '==='는 a === b 라고 할때, 값과 값의 종류(Data Type)가 모두 같은지를 비교해서, 같으면 true, 다르면 false라고 한다.

Html에 어떤 action이 발생했을때 수행하는 코드. Event를 감지하는 event listener 코드가 있다. Ex) addEventListener, mouseenter, onmouseleave listener를 찾는 가장 좋은 방법은 구글에 찾고 싶은 element의 이름, 예를들어 h1 html element mdn을 검색. javascript의 element를 찾으려면 링크에 Web APIs라는 문장이 포함된 페이지를 본다. 왜냐면 이건 JS관점의 HTML Heading Element란 의미. 복잡하면 element를 console.dir로 출력해서 on~ 이라고 적혀있는걸 찾아보면 됨. 특정 Element 조회 querySelector("#hello") == getElementById("..

인수를 받기위해 함수를 선언할 때 기본 구조 function funcName(){ // code }; JS 객체 선언하기 const objectName = { // 매개변수 작성 }; 오브젝트 내부 매개변수가 argument를 받고자 할때 아래와 같이 사용한다. const player = { name: "albert", hello: function () { console.log("hello"); }, }; console.log(player.name);// albert player.hello("Kong");// hello

보호되어 있는 글입니다.