#Clean Code

`useEffect`와 `useState`로 범벅된 비대해진 컴포넌트. Custom Hook으로 로직을 분리하여 UI와 비즈니스 로직을 깔끔하게 나누는 실제 리팩토링 가이드.

API 요청 상태를 관리할 때 불리언 플래그 여러 개를 쓰시나요? 'impossible state(불가능한 상태)'를 방지하고, if 문 도배를 없애는 Discriminated Unions 패턴.

빨간 줄을 없애려고 습관적으로 `as unknown as Type`을 쓰시나요? `as`가 사실 컴파일러의 눈을 가리는 행위인 이유와 Type Guard를 통한 올바른 해결법.

React 개발 초기, 데이터를 5단계 깊이로 전달하다가 멘붕에 빠진 경험을 공유합니다. Prop Drilling이 왜 유지보수의 적인지, 그리고 Context API, Composition(합성), Zustand를 사용해 이 지옥에서 우아하게 탈출하는 3가지 실제 패턴을 정리합니다.

서비스 초기, MongoDB를 쓰다가 RDB로 마이그레이션 해야 할 순간이 왔습니다. 하지만 비즈니스 로직과 DB 코드가 뒤엉켜 있어 지옥을 경험했죠. 헥사고날 아키텍처(포트와 어댑터)를 도입하여 비즈니스 로직을 순수하게 지켜내고, 기술 부채로부터 탈출한 경험을 공유합니다.

컴포넌트마다 지저분하게 널려있는 로딩/에러 처리를 우아하게 삭제하는 법. 선언적 UI가 가져다주는 평화.

Custom Hook은 React의 가장 강력한 무기지만, 잘못 사용하면 오히려 독이 됩니다. 단순히 로직을 옮겨 적는 것을 넘어, '상태(State)'와 '이펙트(Effect)'를 분리하고 재사용 가능한 'Headless UI' 패턴을 설계하는 방법을 심도 있게 다룹니다.

로버트 C. 마틴(Uncle Bob)이 제안한 클린 아키텍처의 핵심은 무엇일까요? 양파 껍질 같은 계층 구조와 의존성 규칙(Dependency Rule)을 통해 프레임워크와 UI로부터 독립적인 소프트웨어를 만드는 방법을 정리합니다.