깔끔한 코드 원칙 및 React + TypeScript 코드 컨벤션
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- *React 및 TypeScript 개발자**
- 난이도: 중간 (팀 협업 및 코드 품질 관리에 초점)
핵심 요약
- 의미 있는 변수명 및 함수명 사용 (
getValues
대신d
등 비유의적 이름 회피) - 단일 책임 원칙 (SRP): UI 로직과 API 로직 분리 (커스텀 훅 또는 서비스 레이어 활용)
- TypeScript 효과적 활용: 명시적 타입 정의 (
props
,state
,return type
) 및 ESLint/Prettier 설정 강제 - 컴포넌트 크기 제한: 200줄 이상은 작은 서브컴포넌트로 분리
- 마법 수/문자열 금지:
STATUS_APPROVED
상수 사용 권장
섹션별 세부 요약
- 의미 있는 이름 지정
- 변수, 함수, 컴포넌트 이름은 명확하고 설명적이어야 함
- 예:
getValues
대신d
와 같은 비유의적 이름은 피함
- 단일 책임 원칙 (SRP)
- 컴포넌트는 하나의 책임만 가져야 함
- 예: UI 렌더링과 API 로직은 커스텀 훅 또는 서비스 레이어로 분리
- 마법 수/문자열 회피
- 상태 코드
2
대신STATUS_APPROVED
상수 사용
- 컴포넌트 크기 제한
- 200줄 이상의 컴포넌트는 작은 서브컴포넌트로 분할
- TypeScript 설정 가이드
- ESLint, Prettier, Husky, Lint-staged 설치 및 구성
.eslintrc.js
및prettier.config.js
파일에 규칙 정의package.json
스크립트 추가 (lint
,lint:fix
,format
)- Pre-commit 훅 추가로 코드 품질 자동 검사
결론
- *ESLint, Prettier, Husky, Lint-staged 도구를 사용하여 코드 품질 자동화하고, 의미 있는 이름, SRP, 타입스크립트 명시적 타입 정의** 등 원칙을 준수해 유지보수 가능한 코드베이스를 구축하라.
npm install -D eslint prettier
및.eslintrc.js
설정이 핵심 도구.