Refactors React/TSX for readability: names complex conditions, separates exclusive code paths into components, simplifies nested ternaries.
npx claudepluginhub toss/frontend-fundamentals --plugin frontend-fundamentalsThis skill uses the workspace's default tool permissions.
코드는 읽기 쉬워야 한다. 읽는 사람이 코드 의도를 빠르게 파악할 수 있어야 한다.
Simplifies code for clarity, consistency, and maintainability using project best practices like ES modules and React patterns, preserving all functionality.
Simplifies code for clarity while preserving exact behavior. Use for refactoring complex but functional code, code reviews, reducing unnecessary complexity, and improving readability/maintainability.
Simplifies and refines code for clarity, consistency, and maintainability while preserving functionality. Activates for simplify/cleanup/refactor requests or recent code reviews using project best practices.
Share bugs, ideas, or general feedback.
코드는 읽기 쉬워야 한다. 읽는 사람이 코드 의도를 빠르게 파악할 수 있어야 한다.
❌ viewer/admin 로직이 한 컴포넌트에 섞임:
function SubmitButton() {
const isViewer = useRole() === "viewer";
useEffect(() => {
if (isViewer) return;
showButtonAnimation();
}, [isViewer]);
return isViewer ? (
<TextButton disabled>Submit</TextButton>
) : (
<Button type="submit">Submit</Button>
);
}
✅ 분기별로 분리:
function SubmitButton() {
const isViewer = useRole() === "viewer";
return isViewer ? <ViewerSubmitButton /> : <AdminSubmitButton />;
}
function ViewerSubmitButton() {
return <TextButton disabled>Submit</TextButton>;
}
function AdminSubmitButton() {
useEffect(() => { showButtonAnimation(); }, []);
return <Button type="submit">Submit</Button>;
}
❌ 조건이 무슨 뜻인지 바로 안 보임:
if (user.age >= 18 && !user.isBanned && user.emailVerified) { ... }
✅ 의도를 이름으로 표현:
const canPurchase = user.age >= 18 && !user.isBanned && user.emailVerified;
if (canPurchase) { ... }
| 코드 냄새 | 개선 방법 |
|---|---|
| 중첩된 삼항 연산자 | if문이나 early return 사용 |
복잡한 조건 a && !b || c | 의미있는 이름 붙이기: const canProceed = ... |
| 여러 분기가 교차됨 | 분기별로 별도 컴포넌트 분리 |
| 코드 위아래로 왔다갔다 | 조건을 한눈에 볼 수 있는 객체로 관리 |
참고: https://frontend-fundamentals.com/code-quality/readable/