用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt;运行前请先检查来源。
npx skills add https://github.com/toss/frontend-fundamentals --skill predictability命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地?可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | predictability |
| description | Use when `getX()`나 `fetchX()`에 숨은 부수 효과가 있거나, 같은 종류의 함수들이 서로 다른 반환 타입을 가지거나, 함수 이름과 실제 동작이 다를 때 |
함수는 이름이 암시하는 대로 동작해야 한다. 숨겨진 동작이 없어야 한다.
❌ fetch 함수에 숨은 부수 효과:
async function fetchBalance(): Promise<number> {
const balance = await http.get<number>("...");
logging.log("balance_fetched"); // 숨은 부수 효과!
return balance;
}
✅ 부수 효과는 호출부에서 명시적으로:
async function fetchBalance(): Promise<number> {
return await http.get<number>("...");
}
const balance = await fetchBalance();
logging.log("balance_fetched");
❌ 같은 종류인데 반환 타입 다름:
function checkIsNameValid(name: string) {
return name.length > 0; // boolean
}
function checkIsAgeValid(age: number) {
if (age < 18) return { ok: false, reason: "18세 이상" };
return { ok: true }; // 객체
}
✅ Discriminated Union으로 통일:
type ValidationResult = { ok: true } | { ok: false; reason: string };
function checkIsNameValid(name: string): ValidationResult {
if (name.length === 0) return { ok: false, reason: "이름 필수" };
return { ok: true };
}
function checkIsAgeValid(age: number): ValidationResult {
if (age < 18) return { ok: false, reason: "18세 이상" };
return { ok: true };
}
| 코드 냄새 | 개선 방법 |
|---|---|
getX()에 부수 효과 | 순수 getter와 action 분리 |
calculateX()가 저장함 | calculateAndSaveX()로 이름 변경 또는 분리 |
| 같은 종류인데 반환 타입 다름 | Discriminated Union: { ok: true } | { ok: false; reason } |
| 라이브러리 이름과 겹침 | 구분되는 이름 사용: http → httpService |
참고: https://frontend-fundamentals.com/code-quality/predictable/