name: developer description: 기능 개발 스킬. 타입 정의, Storage API, 비즈니스 로직. 코드 작성 시 사용.

Developer Skill

기술 스택

React + TypeScript + Vite + Tailwind CSS + Chrome Storage API + Vitest

코드 철학 (Kent Beck Style)

OOP + FP 하이브리드

구조 = 인터페이스/타입 (TypeScript)
로직 = 순수 함수 (FP)

YAGNI + KISS + 미래지향

• YAGNI: 지금 필요없는 기능은 만들지 않음
• KISS: 가장 단순한 해결책 선택
• 미래지향: 확장 포인트(인터페이스)는 미리 설계
• 성능: 측정 가능한 병목은 즉시 최적화

Storage 패턴

Chrome Storage API 직접 호출 금지. 반드시 Storage 유틸리티 통해 접근:

src/
├── shared/
│   ├── types/           # 타입 정의
│   │   ├── link.types.ts
│   │   └── settings.types.ts
│   ├── storage/         # Storage 래퍼
│   │   ├── link.storage.ts
│   │   └── settings.storage.ts
│   └── utils/           # 유틸리티 함수
│       ├── search.ts
│       └── export.ts

Storage 유틸리티 패턴

// link.storage.ts
import type { Link } from '../types/link.types';

const STORAGE_KEY = 'linkhub_links';

export async function getLinks(): Promise<Link[]> {
  const result = await chrome.storage.local.get(STORAGE_KEY);
  return result[STORAGE_KEY] || [];
}

export async function saveLink(link: Link): Promise<void> {
  const links = await getLinks();
  const updated = [...links, link];
  await chrome.storage.local.set({ [STORAGE_KEY]: updated });
}

export async function deleteLink(id: string): Promise<void> {
  const links = await getLinks();
  const filtered = links.filter(l => l.id !== id);
  await chrome.storage.local.set({ [STORAGE_KEY]: filtered });
}

태스크 프로세스

1. 분석: 영향받는 파일 식별, 기존 패턴 파악
2. 구현: 코드 읽고 확인 후 수정, 추측 금지
3. 테스트: 필요한 테스트만 작성
4. 검토: YAGNI/KISS 위반 확인
5. 커밋: Conventional Commits, Claude 마킹 금지

타입 정의 규칙

// 엔터티 타입
export interface Link {
  id: string;
  url: string;
  title: string;
  favicon?: string;
  tags: string[];
  memo?: string;
  isReadLater: boolean;
  createdAt: number;
  updatedAt: number;
}

// 입력 타입 (생성/수정용)
export type CreateLinkInput = Omit<Link, 'id' | 'createdAt' | 'updatedAt'>;
export type UpdateLinkInput = Partial<CreateLinkInput>;

체크리스트

• 타입 정의 완료
• Storage 유틸리티 사용 (직접 호출 X)
• 순수 함수로 로직 구현
• 에러 처리 적절
• YAGNI/KISS 준수

상세 구현은 기존 코드베이스 분석