Webpack 정리 (2) — 로더와 플러그인
웹팩을 확장하는 두 축인 로더(파일 단위 변환)와 플러그인(빌드 전체 제어)을 정리했습니다. 커스텀 로더/플러그인을 직접 만들어 동작 원리를 살펴보고, webpack 4의 `emit` 훅이 webpack 5의 `processAssets`로 재설계된 흐름까지 비교합니다. 시리즈 (2)편.
Webpack 정리 (1) — 모듈 시스템과 번들러의 기초
ES Module 이전의 IIFE/CommonJS/AMD/UMD가 어떤 문제를 풀고 어떤 한계를 가졌는지에서 시작해, 그 한계를 메우는 도구로 등장한 웹팩의 기본 사용(엔트리·아웃풋·webpack.config.js)까지 정리했습니다. 시리즈 (1)편.
RxJS 정리 — 비동기 스트림과 리액티브 프로그래밍
콜백 → Promise → Observable로 이어지는 비동기 처리 패러다임의 진화 위에서 RxJS가 어떤 문제를 풀고 어떤 상황에 적합한지 정리했습니다. Cold/Hot Observable, 지연평가(Lazy Evaluation), `debounceTime` + `switchMap`으로 검색창 race condition을 우아하게 처리하는 패턴까지 다룹니다.
텍스트에디터에 커맨드박스 띄우기 (2) — Textarea
Textarea 기반 채팅 입력창에 `#` 트리거 커맨드박스를 새로 구현하며 미러 div로 캐럿 좌표 계산, Portal/Positioning 레이어 분리, RxJS 이벤트 컨트롤러 패턴으로 입력·키보드·스크롤·외부클릭을 통합 제어한 과정을 정리했습니다.
텍스트에디터에 커맨드박스 띄우기 (1) — ContentEditable
CTI SMS 템플릿 에디터를 contentEditable 기반으로 구현하며 마주친 캐럿 제어·한국어 IME·태그 단위 처리·태그 직렬화의 비대칭성을 어떻게 풀었는지에 대한 기록입니다. `Selection`/`Range` API와 ZWS 캐럿 앵커, tagParser 양방향 변환, RxJS 키보드 스트림을 중심으로 정리했습니다.
CustomEvent로 모듈간 이벤트 발생시키기
모노레포 + 모듈 페더레이션 환경에서 빌드가 분리된 모듈들끼리 props 없이 상태를 주고받아야 했던 상황을 `CustomEvent`로 푼 과정을 정리했습니다. `dispatchEvent`로 이벤트를 발생시키고 `useCustomEventListener` 훅으로 받는 양 끝을 진단·처방 모듈 ↔ 스레드 모듈 사례에 적용한 코드를 함께 다룹니다.
특정 쿼리결과(useQuery)를 global로 설정하기 (ft. RxJS)
Apollo `useQuery`의 결과는 그 훅을 호출한 컴포넌트 안에서만 살아있습니다. 같은 값을 코드베이스 여러 곳에서 일관되게 참조해야 하는 상황에서, RxJS `BehaviorSubject`를 “쿼리 결과의 전역 보관소”로 두고 `onCompleted`에서 갱신하는 패턴으로 푼 과정을 정리했습니다.
리액트와 관심사 분리
프로젝트 리드미에 “재사용성·유지보수성 증가”라고 막연히 적었다가 받은 피드백을 계기로 정리한 글입니다. 관심사 분리(SoC)가 리액트에서 왜 중요한지, 그리고 추상화·컴포넌트 분리·합성·커스텀 훅·전역상태 관리를 통해 책임을 어떻게 나눌 수 있는지 다룹니다.
메모리에 대해 알아보자 (feat. Heap and Stack)
메모리란 무엇이고, RAM/ROM의 차이부터 메모리 구조(코드/데이터/힙/스택), 스택·힙 오버플로우, 자바스크립트의 메모리 관리와 누수가 발생하는 흔한 케이스(전역변수·잊혀진 타이머·DOM 외부 참조·클로저)까지 정리한 글입니다.
V8에서의 가비지 컬렉션
V8 엔진의 메모리 구조(New/Old space)와 마이너 GC(Scavenger), 메이저 GC(Mark-Sweep-Compact + Tri-color 알고리즘)가 어떻게 동작하는지, 그리고 Stop-The-World를 줄이기 위해 등장한 Orinoco 프로젝트(Parallel/Incremental/Concurrent/Idle-time GC)까지 정리했습니다.