fe-content-enhance

name	fe-content-enhance
description	Use when translating Code Complete's Java/C++ examples into 2026 React/TypeScript Before-After pairs, or when mapping FE checklist items to specific ESLint / typescript-eslint / react-hooks / jsx-a11y rules. Also use when original code has no FE equivalent (pointers, manual memory management) and a "principle only, no code" fallback is needed. Do not use when content belongs to human_only zone.

fe-content-enhance

Overview

원서는 2004년 Java/C++ 관점이다. 같은 원칙을 2026년 React/TypeScript 실무에서 어떻게 체감하는지 번역하는 게 이 스킬의 몫이다. 단순 문법 치환이 아니라 같은 원칙을 드러내는 FE 안티패턴과 수정본을 만든다.

어투 가이드: 코드 앞뒤 해설 산문은 writing-voice-ff 스킬의 해요체·"코드를 읽는 사람" 관점을 따른다. Before/After 해설 순서(문제→진단→개선→효과)도 그 스킬에 정의돼 있다.

When to Use

• Before/After 코드가 Java/C++로 돼 있어 FE 독자가 체감 못할 때
• 체크리스트 항목이 "의도 드러나는 이름" 같은 추상 텍스트라 실무 연결 약할 때
• 원서 예제의 포인터/헤더/매크로 같은 FE 등가 없는 요소를 만났을 때

번역 3원칙

1. 원칙 보존, 문법 번역만 — 원서가 말하는 원칙 X를 그대로 유지. 다른 원칙으로 치환 금지
2. Before = 실제 흔한 실수 — 허수아비 코드 금지. 실무에서 자주 보이는 안티패턴
3. After = 최소 수정 — 전면 재작성 아닌, 원칙 적용 지점만 고침

FE 안티패턴 카탈로그 (번역 참조)

원서 원칙	FE Before 후보	FE After 후보
의도 드러내는 변수명	items.map((_, i) => ...)	items.map((item, index) => ...)
함수 하나의 책임	useUserAndProducts() 훅	useUser() + useProducts() 분리
불필요한 주석	// useEffect 정리 + 빈 함수	주석 제거, 코드 자체로 의도 드러냄
매직 넘버 제거	setTimeout(fn, 3000)	const RETRY_DELAY_MS = 3000
깊은 중첩 회피	if { if { if ... } } }	early return, guard clause
데이터와 로직 분리	컴포넌트 안에 fetch + 렌더	useQuery + presentational 컴포넌트
불변성 보장	array.push(item)	[...array, item]
Boolean 이름	data	isLoading, hasError
useEffect 의존성 완전성	useEffect(() => fn(x), [])	useEffect(() => fn(x), [x])
타입 좁히기	as any 캐스팅	타입 가드 + narrow

위 카탈로그는 시작점이지 전부가 아니다. 원서 원칙에 가장 가까운 FE 패턴을 판단해서 적용.

After 코드 품질 기준

// 기준 통과 예시
type User = { id: string; name: string };

export function useUsers(): {
  users: User[];
  isLoading: boolean;
  error: Error | null;
} {
  const { data, isLoading, error } = useQuery<User[]>({
    queryKey: ['users'],
    queryFn: fetchUsers,
  });
  return { users: data ?? [], isLoading, error };
}

체크 항목:

• tsc --noEmit 통과 가능한 문법 (실행 안 해도 됨)
• 2026년 실무 코드처럼 보임 (Hooks, TanStack Query, Suspense 등)
• 20줄 이내 (교과서용 짧은 예제)
• Before와 대조할 때 원칙 적용 지점이 명확히 보임

ESLint 룰 매핑

체크리스트 text → 공식 ESLint/TS-ESLint 룰.

신뢰할 수 있는 소스

플러그인	링크 베이스
ESLint core	https://eslint.org/docs/latest/rules/{rule}
@typescript-eslint	https://typescript-eslint.io/rules/{rule}
eslint-plugin-react-hooks	https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks
eslint-plugin-jsx-a11y	https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/main/src/rules

자주 쓰는 매핑

체크리스트 텍스트 패턴	ESLint 룰
"변수 이름 의도" / "짧은 이름 피하기"	id-length
"사용 안 하는 import"	@typescript-eslint/no-unused-vars
"useEffect 의존성"	react-hooks/exhaustive-deps
"any 타입 금지"	@typescript-eslint/no-explicit-any
"매직 넘버"	no-magic-numbers
"키 없는 리스트"	react/jsx-key
"alt 텍스트"	jsx-a11y/alt-text
"if 중괄호"	curly
"unused expressions"	@typescript-eslint/no-unused-expressions

매핑 없을 때

강제로 만들지 말 것. eslint_rule: null + translation_note: "ESLint 자동화 불가, 코드 리뷰 항목" 추가.

원서 예제 FE 등가 없음 (Fallback)

포인터/메모리 관리/매크로 등 FE에 없는 개념:

code_examples:
  - title: "메모리 관리"
    before: null
    after: null
    language: typescript
    translation_note: |
      원서의 C++ 메모리 관리 예제는 FE 등가 없음.
      원칙 ("리소스 정리 책임을 명확히")은 React에서 useEffect cleanup 함수와
      `AbortController` 패턴으로 이어진다. 상세는 Common Mistakes 섹션 참조.

이 경우 mdx-writer는 이 항목을 코드 블록 없이 설명 paragraph로 렌더.

Common Mistakes

실수	왜 문제	수정
useState<any> 남용 예시	any 금지 원칙에 반함	제대로 타입 지정한 Before 만들기 (흔한 실수 패턴은 따로)
ESLint 룰 이름 추측	존재하지 않는 룰 링크	WebSearch로 실제 문서 확인
Before와 After가 로직이 다름	리팩터링이지 원칙 적용이 아님	로직은 동일, 원칙 적용 지점만 바뀌어야
15줄 이상 긴 예제	독자 주의 분산	핵심만 추출, 불필요한 boilerplate 제거
주석으로 해설 ("여기가 핵심!")	교과서 티	주석 최소화, 본문 paragraph으로 설명