전체 글 16

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

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

Library 2025.10.10

실행 컨텍스트: 코드 실행의 숨겨진 원리

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

CODE/JS 2025.09.16

dataTables - 서버에서 데이터를 만들어서 보내기

수천 또는 수백만 개의 데이터 행을 처리할 때 DOM에서 데이터를 읽는 것이 너무 느리거나 다루기 힘든 경우가 있습니다. 이 문제를 해결하기 위해 DataTables의 서버 측 처리 기능은 서버 측의 데이터베이스 엔진이 모든 '무거운 작업'을 처리하고(결국 이 사용 사례에 고도로 최적화되어 있습니다!), 사용자의 웹 브라우저에서 해당 정보를 그리도록 하는 방법을 제공합니다. 따라서 수백만 개의 행으로 구성된 테이블을 쉽게 표시할 수 있습니다.  서버 측 처리를 사용할 때 DataTables는 페이지에서 정보를 그릴 때마다(예: 페이징, 주문, 검색 등) 서버에 Ajax 요청을 보냅니다.DataTables는 서버가 필요한 처리를 수행할 수 있도록 여러 변수를 서버로 전송한 다음 DataTables에서 요구..

Library 2024.11.01

2022년 퇴사 부검

이전 회사를 다니다가 호기롭게 개발자가 되겠다 다짐하고 1년간 똥싸다가 겨우 취직한 회사를 10개월 만에 퇴사 부검 데이터 엔지니어가 되고자 백엔드 개발자의 길을 선택했지만 현실의 벽은 녹록치 않았다. 나이라는 숫자 앞에서 많이 고민하고 주저했던 지난 10개월. 나는 어떻게 보내왔는가? 일단 작년 2021 1년이라는 시간이 아깝게 느껴졌다. 방향을 제대로 잡지 못하고 갈팡질팡했던 과정, 준비가 제대로 되지 않은 상태에서 2022 년초에 취직을 하다보니 실무의 벽이 높게만 느껴졌다. 그리고 회사 업무가 어떤 한가지를 하다가 중간에 갑자기 다른 프로젝트로 바뀌는 상황과 거의 매일 같이 디버깅을 한다고 야근을 하다보니 개인 공부를 할 시간이 너무 부족했다. 같은 분야의 선후배 없이 대표와 다이렉트로 일하다보니..

낙서장 2022.11.04

intelliJ community - database navigator - mysql 초기 연결 오류

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 재시작 하면 접속된다.

CODE/꿀팁s 2022.03.16

VSCode - 코드에서 이탤릭체 (기울임) 비활성화 하기

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..

CODE/꿀팁s 2022.01.23

비교연산자

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

CODE/JS 2022.01.19

JS - Event

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("..

CODE/JS 2022.01.19