타입스크립트 스타일 가이드의 합리적인 작성 방식
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
개발 툴
대상자
- 타겟: 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.js
및prettier.config.js
에 Mozayk 설정 적용package.json
스크립트 추가:"lint": "eslint . --max-warnings=0"
,"format": "prettier . --write"
결론
- 핵심 팁: ESLint + Prettier 자동화 도구를 사용해 코드 일관성 유지,
any
타입 사용 제한 - 실무 적용:
@mozayk
패키지 설치 후eslint.config.js
설정 파일에 직접 적용 - MIT 라이선스로 공개: GitHub에서 직접 사용 및 피드백 제안 가능