b.log()

프론트엔드부터
인프라까지,
배운 것을 기록합니다.

210 posts · 10 categories · 2026

181

프론트엔드 디자인 패턴 (6) — 폴더 구조는 의존성 규칙이다: FSD와 기계적 강제

폴더 구조 논쟁을 의존성 규칙 논쟁으로 환원한다. FSD 레이어 설계, 공개 API, 그리고 ESLint와 dependency-cruiser로 그 규칙을 CI에서 강제하는 법.

2026-09-14
[frontend]
frontend-design-patterns-6-architecture-fsd.md
182

프론트엔드 디자인 패턴 (5) — 상태의 4분류와 반응성 엔진 3종

서버/클라이언트/폼/URL 네 가지 상태를 가르는 실전 판단 기준과, VDOM diff·Proxy 추적·Signal 그래프 세 반응성 엔진의 내부 동작 비교.

2026-09-14
[frontend]
frontend-design-patterns-5-state-and-reactivity.md
183

프론트엔드 디자인 패턴 (4) — Redux를 밑바닥부터: 타임트래블은 왜 공짜인가

40줄짜리 createStore를 직접 구현하며 구독 메커니즘, 미들웨어 체인(compose), Command 패턴, 타임트래블이 설계의 필연적 결과인 이유를 확인한다.

2026-09-14
[frontend]
frontend-design-patterns-4-redux-internals.md
184

프론트엔드 디자인 패턴 (3) — Headless 컴포넌트: 제어권을 설계한다

prop 15개짜리 드롭다운을 Compound Component → Control Props → State Reducer → Headless로 단계적으로 리팩터링하며 제어권 스펙트럼을 직접 만들어 본다.

2026-09-14
[frontend]
frontend-design-patterns-3-headless-design.md
185

프론트엔드 디자인 패턴 (2) — 로직 재사용의 진화: Mixin에서 Hooks까지

하나의 요구사항을 Mixin, HOC, Render Props, Hooks 네 가지로 직접 리팩터링하며 각 전환의 이유를 체감한다. Hooks 내부의 연결 리스트와 의존성 배열의 정체까지.

2026-09-14
[frontend]
frontend-design-patterns-2-logic-reuse.md
186

프론트엔드 디자인 패턴 (1) — 전체 지도: 상태는 어디에 사는가

jQuery부터 RSC까지, 프론트엔드 패턴의 역사를 하나의 질문으로 관통한다 — 상태는 어디에 살고, 변경은 어떻게 전파되며, 누가 그것을 소유하는가.

2026-09-14
[frontend]
frontend-design-patterns-1-overview.md
187

프론트엔드 안티패턴 (9) — 조직과 프로세스: 안티패턴을 생산하는 공장

Cargo Cult, 이력서 주도 개발, 임시 코드의 영속성, 리팩터링 예산 부재. 코드 안에 없지만 코드를 만드는 안티패턴들과 시리즈 전체 정리.

2026-09-14
[frontend]
frontend-antipatterns-9-organization.md
188

프론트엔드 안티패턴 (8) — 견고함: 거짓 안정감을 만드는 것들

에러 바운더리 부재로 인한 흰 화면, catch로 에러 삼키기, as와 any가 만드는 거짓 안정감, 런타임 검증 없는 API 신뢰, 그리고 깨지는데 아무도 안 읽는 테스트.

2026-09-14
[frontend]
frontend-antipatterns-8-robustness.md
189

프론트엔드 안티패턴 (7) — CSS와 접근성: 조용히 실패하는 것들

!important가 해결이 아니라 증거인 이유, z-index 인플레이션, 마진 소유권, 그리고 div 버튼부터 포커스 관리까지 예외를 던지지 않는 실패들.

2026-09-14
[frontend]
frontend-antipatterns-7-css-and-a11y.md
190

프론트엔드 안티패턴 (6) — 번들과 경계: 트리셰이킹은 왜 실패하는가

번들을 한 번도 열어보지 않는 것에서 시작해, 트리셰이킹이 실패하는 다섯 가지 이유, 코드 분할의 잘못된 단위, use client 커트라인, 그리고 환경변수를 통한 비밀 유출까지.

2026-09-14
[frontend]
frontend-antipatterns-6-bundle-and-boundaries.md
191

프론트엔드 안티패턴 (5) — 네트워크와 실패 경로: 정상 경로만 짜고 배포하기

워터폴이 생기는 네 가지 경로, N+1 요청, 그리고 대부분의 코드에 빠져 있는 것 — 재시도, 타임아웃, 취소, 롤백. 실패 경로가 없는 코드는 완성된 것이 아니다.

2026-09-14
[frontend]
frontend-antipatterns-5-network-and-failure.md
192

프론트엔드 안티패턴 (4) — 렌더링과 성능: 병목은 대개 리렌더가 아니다

React.memo 도배와 성능 방치는 같은 병이다. 실제 병목의 순서, Core Web Vitals가 잡아내는 안티패턴, 레이아웃 스래싱과 컴포지팅, 그리고 무엇을 어떤 도구로 측정할지.

2026-09-14
[frontend]
frontend-antipatterns-4-rendering-performance.md
193

프론트엔드 안티패턴 (3) — 컴포넌트 설계: 성급한 추상화가 중복보다 비싼 이유

잘못된 추상화의 비용 곡선, God Component를 쪼개는 순서, 컴포넌트 안에서 컴포넌트를 정의할 때 입력값이 사라지는 이유, key={index}가 만드는 정체성 혼란.

2026-09-14
[frontend]
frontend-antipatterns-3-component-design.md
194

프론트엔드 안티패턴 (2) — 상태와 데이터 흐름: useEffect는 왜 계속 오용되는가

useEffect의 네 가지 오용을 해부하고, 왜 사람들이 계속 그렇게 쓰게 되는지 밝힌다. 파생 상태, props를 state로 복사, 성급한 전역화, boolean 상태 머신까지.

2026-09-14
[frontend]
frontend-antipatterns-2-state-and-data-flow.md
195

프론트엔드 안티패턴 (1) — 안티패턴을 보는 눈: 비용 곡선과 되돌리기 비용

안티패턴은 실수가 아니라 구조다. 비용 곡선, 되돌리기 비용, 지연된 비용이라는 세 축으로 판단하는 법과, 지연된 비용을 즉시 아프게 만드는 측정 장치.

2026-09-14
[frontend]
frontend-antipatterns-1-how-to-see.md
196

리눅스 명령어, 실무에서 진짜 자주 쓰는 것들 (3) — 공유 라이브러리와 ldd

error while loading shared libraries가 떴을 때 무엇을 봐야 하는가. .so 파일의 정체, 동적 링커의 탐색 순서, ldd·readelf·LD_DEBUG로 의존성을 추적하는 법까지.

2026-08-27
[linux]
linux-commands-3-shared-libraries.md
197

리눅스 명령어, 실무에서 진짜 자주 쓰는 것들 (2) — 서버 운영편

서버가 죽었을 때 실제로 치는 명령어들. systemd, journalctl, 포트 점유 추적, 디스크 풀 대응, 컨테이너 운영까지 상황별로 정리.

2026-08-26
[linux]
linux-commands-2-server-ops.md
198

리눅스 명령어, 실무에서 진짜 자주 쓰는 것들 (1) — 기본편

파일 탐색부터 텍스트 처리, 권한, 프로세스까지. 외우는 목록이 아니라 손에 붙는 순서로 정리한 리눅스 명령어 기본편.

2026-08-26
[linux]
linux-commands-1-basics.md
199

Sentry는 어떻게 에러를 잡아내는가 — yoyak 관측 설계 노트

AI 문서 요약 서비스 yoyak에 Sentry를 도입하기로 한 결정을 정리한다. 전역 핸들러·빌드 타임 래핑·이벤트 전송이라는 동작 원리부터, 이 프로젝트에서는 전제 조건인 개인정보 스크러빙 설계까지.

2026-07-25
[projects]
yoyak-sentry-observability.md
200

도커의 본질 — 컨테이너를 맨손으로 만들며 이해하기

리눅스 namespace·cgroups·pivot_root만으로 컨테이너를 직접 만들어 보며, 도커가 자동화한 것이 무엇인지 본질부터 이해한다.

2026-06-21
[devops]
docker-deep-dive.md

blog92@web:~$ exit