프론트엔드 디자인 패턴 (6) — 폴더 구조는 의존성 규칙이다: FSD와 기계적 강제
폴더 구조 논쟁을 의존성 규칙 논쟁으로 환원한다. FSD 레이어 설계, 공개 API, 그리고 ESLint와 dependency-cruiser로 그 규칙을 CI에서 강제하는 법.
210 posts · 10 categories · 2026
폴더 구조 논쟁을 의존성 규칙 논쟁으로 환원한다. FSD 레이어 설계, 공개 API, 그리고 ESLint와 dependency-cruiser로 그 규칙을 CI에서 강제하는 법.
서버/클라이언트/폼/URL 네 가지 상태를 가르는 실전 판단 기준과, VDOM diff·Proxy 추적·Signal 그래프 세 반응성 엔진의 내부 동작 비교.
40줄짜리 createStore를 직접 구현하며 구독 메커니즘, 미들웨어 체인(compose), Command 패턴, 타임트래블이 설계의 필연적 결과인 이유를 확인한다.
prop 15개짜리 드롭다운을 Compound Component → Control Props → State Reducer → Headless로 단계적으로 리팩터링하며 제어권 스펙트럼을 직접 만들어 본다.
하나의 요구사항을 Mixin, HOC, Render Props, Hooks 네 가지로 직접 리팩터링하며 각 전환의 이유를 체감한다. Hooks 내부의 연결 리스트와 의존성 배열의 정체까지.
jQuery부터 RSC까지, 프론트엔드 패턴의 역사를 하나의 질문으로 관통한다 — 상태는 어디에 살고, 변경은 어떻게 전파되며, 누가 그것을 소유하는가.
Cargo Cult, 이력서 주도 개발, 임시 코드의 영속성, 리팩터링 예산 부재. 코드 안에 없지만 코드를 만드는 안티패턴들과 시리즈 전체 정리.
에러 바운더리 부재로 인한 흰 화면, catch로 에러 삼키기, as와 any가 만드는 거짓 안정감, 런타임 검증 없는 API 신뢰, 그리고 깨지는데 아무도 안 읽는 테스트.
!important가 해결이 아니라 증거인 이유, z-index 인플레이션, 마진 소유권, 그리고 div 버튼부터 포커스 관리까지 예외를 던지지 않는 실패들.
번들을 한 번도 열어보지 않는 것에서 시작해, 트리셰이킹이 실패하는 다섯 가지 이유, 코드 분할의 잘못된 단위, use client 커트라인, 그리고 환경변수를 통한 비밀 유출까지.
워터폴이 생기는 네 가지 경로, N+1 요청, 그리고 대부분의 코드에 빠져 있는 것 — 재시도, 타임아웃, 취소, 롤백. 실패 경로가 없는 코드는 완성된 것이 아니다.
React.memo 도배와 성능 방치는 같은 병이다. 실제 병목의 순서, Core Web Vitals가 잡아내는 안티패턴, 레이아웃 스래싱과 컴포지팅, 그리고 무엇을 어떤 도구로 측정할지.
잘못된 추상화의 비용 곡선, God Component를 쪼개는 순서, 컴포넌트 안에서 컴포넌트를 정의할 때 입력값이 사라지는 이유, key={index}가 만드는 정체성 혼란.
useEffect의 네 가지 오용을 해부하고, 왜 사람들이 계속 그렇게 쓰게 되는지 밝힌다. 파생 상태, props를 state로 복사, 성급한 전역화, boolean 상태 머신까지.
안티패턴은 실수가 아니라 구조다. 비용 곡선, 되돌리기 비용, 지연된 비용이라는 세 축으로 판단하는 법과, 지연된 비용을 즉시 아프게 만드는 측정 장치.
error while loading shared libraries가 떴을 때 무엇을 봐야 하는가. .so 파일의 정체, 동적 링커의 탐색 순서, ldd·readelf·LD_DEBUG로 의존성을 추적하는 법까지.
서버가 죽었을 때 실제로 치는 명령어들. systemd, journalctl, 포트 점유 추적, 디스크 풀 대응, 컨테이너 운영까지 상황별로 정리.
파일 탐색부터 텍스트 처리, 권한, 프로세스까지. 외우는 목록이 아니라 손에 붙는 순서로 정리한 리눅스 명령어 기본편.
AI 문서 요약 서비스 yoyak에 Sentry를 도입하기로 한 결정을 정리한다. 전역 핸들러·빌드 타임 래핑·이벤트 전송이라는 동작 원리부터, 이 프로젝트에서는 전제 조건인 개인정보 스크러빙 설계까지.
리눅스 namespace·cgroups·pivot_root만으로 컨테이너를 직접 만들어 보며, 도커가 자동화한 것이 무엇인지 본질부터 이해한다.
blog92@web:~$ exit