Next.js 15 instrumentation이 프로덕션에서 안 돌아간다면
instrumentation.ts의 register가 개발 서버에서는 돌지만 프로덕션에서는 첫 요청 전까지 실행되지 않았다. 관련 이슈와 커스텀 서버, 모듈 레벨 초기화 같은 대안을 비교했다.
tech.junha.kr
프론트엔드와 인프라를 만들며 겪은 문제와 해결을 기록합니다.
2025
Elasticsearch 대용량 데이터 파이프라인 구축기: 수십억 건을 실시간으로 처리하기
로그에 쌓이는 사용자 선호 국가 데이터의 가중치를 실시간으로 보정해야 했다. Update By Query 대신 Ingest Pipeline을 쓰고, Index Template 우선순위와 기존 인덱스, Kibana 필드 문제를 풀어 간 기록이다.
Docker COPY에서 node_modules 충돌 해결하기
Turborepo와 pnpm 모노레포의 Docker 빌드에서 node_modules가 복사되며 충돌했다. .dockerignore가 적용되지 않은 원인을 찾고 Dockerfile을 고친 과정이다.
Tailwind v4 도입하다가 monorepo 빌드 시스템을 뜯어고친 썰
Currency 앱에 Tailwind v4를 올리자 PostCSS 설정이 충돌했다. 원인을 따라가다 pnpm 패키지 격리와 Turborepo 워크스페이스 설정까지 손본 과정과 실험 결과를 정리했다.
2024
모듈 시스템 정리: Require와 Import, 모듈은 동기적으로 불러올까
CommonJS와 ESM의 문법과 동작 차이를 예제로 비교하고, 정적 import와 동적 import의 처리 순서를 따라가며 모듈 로딩이 동기인지 비동기인지 정리했다.
자바스크립트 런타임과 엔진의 차이: 이벤트 루프는 어디에 있을까
V8 같은 엔진과 브라우저나 Node.js 같은 런타임이 각각 맡는 일을 나누고, 이벤트 루프가 엔진이 아니라 런타임에 속하는 이유와 그 구조를 다이어그램으로 설명한다.
Node.js 비동기 처리 모델 이해하기: 실시간 대규모 처리에 맞는 이유
싱글 스레드인 Node.js가 어떻게 동시성을 내는지, libuv와 스레드 풀이 I/O를 어떻게 나눠 맡는지, 스레드 풀을 늘리면 이득인 작업은 무엇인지 정리했다.
Software Design Decoded: 66 Ways Experts Think 후기
전문가가 어떻게 사고하는지 66가지 주제로 정리한 책이다. 단순함, 협업, 반복, 테스트 같은 범주별로 인상 깊었던 항목과 내가 부족한 부분을 기록했다.
React 19 useActionState 살펴보기
폼 제출처럼 비동기로 상태를 바꾸는 흐름에서 pending, 오류, 낙관적 업데이트를 손으로 다루던 코드가 React 19의 Action과 useActionState로 어떻게 줄어드는지 예제로 비교했다.
브라우저에서 자바스크립트가 동작하는 원리
자바스크립트 런타임을 이루는 엔진, Web API, 태스크 큐, 잡 큐, 이벤트 루프가 각각 무슨 일을 하는지, 싱글 스레드로 어떻게 비동기를 처리하는지 그림과 함께 정리했다.
자바스크립트 this 바인딩 정리
함수 호출, 메서드 호출, 화살표 함수, call/apply/bind, strict mode에서 this가 각각 무엇을 가리키는지 예제로 하나씩 확인하며 정리했다.
2022
CSS 마진 상쇄(Margin collapsing) 이해하기
블록 요소의 상하 마진이 겹치면 한쪽 값만 적용되는 마진 상쇄가 언제 일어나는지, 어떤 규칙으로 계산되는지, 예외는 무엇인지 그림과 함께 정리했다.
React 깜빡임 현상 해결: useLayoutEffect와 이미지 로딩
useEffect 타이밍 때문에 생기는 깜빡임은 useLayoutEffect로, API 응답 뒤 이미지가 늦게 뜨는 깜빡임은 로드 완료 후 렌더링과 스켈레톤 UI로 해결한 과정이다.
프로토타입: 자바스크립트의 핵심 철학
자바스크립트가 클래스가 아니라 프로토타입을 택한 철학적 배경을 비트겐슈타인의 의미사용이론과 가족유사성 개념으로 풀어 정리했다.
2021
Iterable과 Enumerable, 한 번에 정리하기
for...in과 for...of가 각각 무엇을 순회하는지부터 enumerable 속성, Object.keys, getOwnPropertyNames, hasOwnProperty의 차이까지 예제로 정리했다.
Nginx 504 Gateway Timeout 오류 해결
잘못된 리다이렉트로 응답이 돌아오지 않아 Nginx가 504를 냈다. 원인을 찾은 과정과 proxy timeout 설정으로 완화하는 방법을 짧게 정리했다.
모바일에서 CSS hover 효과가 사라지지 않는 문제 해결
터치 기기에서는 탭한 뒤에도 hover 상태가 남는다. hover와 pointer 미디어 쿼리로 입력 장치를 구분하고, 필요하면 터치 이벤트로 상태를 지우는 방법을 정리했다.
Helmet의 contentSecurityPolicy 때문에 외부 스크립트가 막힐 때
Express에 Helmet을 켜자 카카오 SDK와 애드센스 스크립트가 CSP에 막혔다. 시도한 방법들과 helmet-csp로 scriptSrc를 조정해 해결한 설정을 정리했다.