Antigravity Agent
3.7 KiB
3.7 KiB
React 및 Next.js 개발 환경
📌 Brief Summary
React 및 Next.js 개발 환경은 코드의 일관성과 품질을 유지하기 위해 정적 분석 도구와 포맷터를 적극적으로 활용하는 생태계이다 [1, 2]. 주로 ESLint를 통해 React 및 Next.js 특화 문법과 구조적 오류를 검사하고, Prettier를 통해 코드 스타일을 통일한다 [3, 4]. 대규모 프로젝트에서는 Turborepo와 같은 모노레포 도구와 Husky, lint-staged를 결합하여 개발 생산성을 높이고 효율적인 린팅 파이프라인을 구축한다 [5-7].
📖 Core Content
- React 및 Next.js 특화 ESLint 설정:
React 컴포넌트 개발을 위해서는 컴포넌트 생명주기와 훅(Hooks) 규칙, JSX 접근성 검사를 지원하는
eslint-plugin-react,eslint-plugin-react-hooks,eslint-plugin-jsx-a11y등의 전용 플러그인 설치가 필요하다 [8-10]. Next.js 프로젝트의 경우eslint-config-next플러그인을 사용하여 코어 웹 바이탈(core web vitals) 및 서버 컴포넌트 패턴과 같은 프레임워크 특화 규칙을 손쉽게 적용할 수 있다 [4, 11]. - JSX 변환(Transform) 규칙 처리:
최신 JSX 변환을 지원하는 개발 환경에서는 파일 내에 React 객체를 직접 import하지 않아도 되므로, ESLint에서 발생하는
'React' must be in scope when using JSX에러를 방지하기 위해'react/react-in-jsx-scope': 'off'규칙을 추가로 설정하여 불필요한 경고를 없앨 수 있다 [4, 12, 13]. - 포맷터(Prettier)와의 충돌 제어:
ESLint의 스타일 규칙과 Prettier의 포맷팅 규칙이 충돌하는 것을 방지하기 위해
eslint-config-prettier패키지를 도입하여 포맷팅과 중복되거나 충돌하는 ESLint 측의 규칙들을 비활성화해야 한다 [14-16]. - 모노레포(Turborepo) 환경에서의 구성:
여러 개의 Next.js 애플리케이션과 공유 라이브러리가 공존하는 Turborepo 모노레포 환경에서는 구성 파일의 무분별한 중복을 막기 위해 중앙 집중식 ESLint 설정 패키지(예:
@repo/eslint-config)를 구축하는 것이 매우 효과적이다 [5, 17]. Base, Next.js, Library용 프리셋을 모듈화하여 구성하고, 루트 레벨의 오케스트레이션(orchestration) 설정을 통해 파일 패턴별로 각 패키지에 맞는 적절한 규칙이 적용되도록 제어한다 [4, 17, 18]. - Git Hooks를 통한 자동화 (Husky & lint-staged):
코드 저장소에 푸시되거나 커밋되기 전에 React 및 Next.js 코드 컨벤션이 강제되도록
Husky를 활용하여 Git 훅(pre-commit 등)을 설정한다 [19-21]. 여기에lint-staged를 결합하면 변경되어 스테이징된 파일들에만 한정하여 ESLint와 Prettier를 실행하므로, 방대한 코드베이스에서도 1~2초 만에 검사를 완료하여 개발 흐름의 지연을 막을 수 있다 [6, 22].
🔗 Knowledge Connections
- Related Topics: ESLint, Prettier, Turborepo, Husky 및 lint-staged
- Projects/Contexts: Next.js 애플리케이션 및 모노레포 구축, React 컴포넌트 개발 환경
- Contradictions/Notes: ESLint와 Prettier를 함께 사용할 때
eslint-plugin-prettier를 사용하여 Prettier 규칙을 ESLint 내에서 실행하는 방식이 존재하나, 에디터상에 오류 밑줄이 과도하게 표시되거나 단독 실행보다 처리 속도가 느려지는 단점이 있어 Prettier 공식 문서 및 일부 실무 환경에서는 이를 지양하고eslint-config-prettier만 적용할 것을 권장하기도 한다 [12, 23].
Last updated: 2026-04-19