2nd/01_Archive/2026-04-20/React 및 Next.js 개발 환경.md

# [[React 및 Next.js 개발 환경|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|ESLint]], [[Prettier|Prettier]], [[Turborepo|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*