Rational TypeScript Style Guide: Best Practices for Develope

타입스크립트 스타일 가이드의 합리적인 작성 방식

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

개발 툴

대상자

  • 타겟: TypeScript 개발자, 팀 협업 프로젝트 담당자, React 프로젝트 개발자
  • 난이도: 중급 이상 (구성 설정, ESLint/Prettier 통합 등 기술적 지식 필요)

핵심 요약

  • 타입스크립트 전용 스타일 가이드: any 타입 제한, as const 사용, for-in 피함 등 TypeScript 특화 지침 제공
  • 자동화 도구 통합: ESLint v9 + Prettier v3 조합으로 코드 검사 및 포맷 자동화
  • 모듈화 및 유연성: React/JSX 구성 포함, 비-React 프로젝트에서는 선택적 적용 가능

섹션별 세부 요약

1. 가이드 철학

  • TypeScript의 강력한 타이핑, 현대 문법, 내장 보안 기능을 중심으로 설계
  • AI/코드 생성 도구와 호환 가능한 구조 제공
  • 3대 핵심 원칙: 안정성, 일관성, 개발자 만족도

2. 주요 지침

  • 타입 안전 강화: any 사용 제한, Promise 명시적 처리, for-in 사용 금지
  • 코드 일관성: 단일 따옴표, 2칸 들여쓰기, 줄바꿈 쉼표 등 표준화된 포맷
  • 현대 TypeScript 패턴: 네임스페이스 대신 모듈 사용, as const 추천

3. 자동화 도구

  • ESLint: 논리 검증 및 타입스케이프 오류 감지
  • Prettier: 100자 줄 길이, 2칸 들여쓰기 등 포맷 강제
  • 설치 예시: @mozayk/eslint-config-*, @mozayk/prettier-config 패키지 사용

4. React/JSX 구성

  • 액세스 가능성(Accessibility) 검사, Hook 사용 지침 포함
  • React 프로젝트에서만 적용 가능, 비-React 프로젝트는 생략 가능

5. 구현 방법

  • npm/yarn 설치 명령: ESLint, Prettier, TypeScript v5.8 등 10개 이상 패키지 설치
  • eslint.config.jsprettier.config.js에 Mozayk 설정 적용
  • package.json 스크립트 추가: "lint": "eslint . --max-warnings=0", "format": "prettier . --write"

결론

  • 핵심 팁: ESLint + Prettier 자동화 도구를 사용해 코드 일관성 유지, any 타입 사용 제한
  • 실무 적용: @mozayk 패키지 설치 후 eslint.config.js 설정 파일에 직접 적용
  • MIT 라이선스로 공개: GitHub에서 직접 사용 및 피드백 제안 가능