AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

깔끔한 코드 원칙 및 React + TypeScript 코드 컨벤션

카테고리

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

서브카테고리

웹 개발

대상자

  • *React 및 TypeScript 개발자**
  • 난이도: 중간 (팀 협업 및 코드 품질 관리에 초점)

핵심 요약

  • 의미 있는 변수명 및 함수명 사용 (getValues 대신 d 등 비유의적 이름 회피)
  • 단일 책임 원칙 (SRP): UI 로직과 API 로직 분리 (커스텀 훅 또는 서비스 레이어 활용)
  • TypeScript 효과적 활용: 명시적 타입 정의 (props, state, return type) 및 ESLint/Prettier 설정 강제
  • 컴포넌트 크기 제한: 200줄 이상은 작은 서브컴포넌트로 분리
  • 마법 수/문자열 금지: STATUS_APPROVED 상수 사용 권장

섹션별 세부 요약

  1. 의미 있는 이름 지정
  • 변수, 함수, 컴포넌트 이름은 명확하고 설명적이어야 함
  • 예: getValues 대신 d와 같은 비유의적 이름은 피함
  1. 단일 책임 원칙 (SRP)
  • 컴포넌트는 하나의 책임만 가져야 함
  • 예: UI 렌더링과 API 로직은 커스텀 훅 또는 서비스 레이어로 분리
  1. 마법 수/문자열 회피
  • 상태 코드 2 대신 STATUS_APPROVED 상수 사용
  1. 컴포넌트 크기 제한
  • 200줄 이상의 컴포넌트는 작은 서브컴포넌트로 분할
  1. TypeScript 설정 가이드
  • ESLint, Prettier, Husky, Lint-staged 설치 및 구성
  • .eslintrc.jsprettier.config.js 파일에 규칙 정의
  • package.json 스크립트 추가 (lint, lint:fix, format)
  • Pre-commit 훅 추가로 코드 품질 자동 검사

결론

  • *ESLint, Prettier, Husky, Lint-staged 도구를 사용하여 코드 품질 자동화하고, 의미 있는 이름, SRP, 타입스크립트 명시적 타입 정의** 등 원칙을 준수해 유지보수 가능한 코드베이스를 구축하라. npm install -D eslint prettier.eslintrc.js 설정이 핵심 도구.