Show GN: eslint-plugin-import-boundary - ESLint Rule을 통해 javascript 프로젝트에서
요약
JavaScript/TypeScript 프로젝트의 아키텍처 품질을 유지하기 위해 import 경계를 강제하는 ESLint 플러그인을 소개합니다. 폴더 구조를 기반으로 모듈 간 참조 규칙을 단순하게 설정할 수 있도록 설계되었습니다.
핵심 포인트
- ESLint를 통해 프로젝트 내 import 경계를 정적으로 강제 가능
- 부모 디렉토리는 자식의 public entry만 import하도록 제한
- 공용 파일 및 폴더를 지정하여 공유 모듈 범위 설정 가능
- 복잡한 설정 없이 폴더 구조를 기반으로 아키텍처 규칙 적용
최근 인턴십을 하며 제품의 거대한 코드베이스를 처음 경험했습니다. 변경의 영향 범위를 가늠하기 어렵고, “이 코드는 어디서 참조해야 하는지”가 반복적으로 고민됐습니다. 정적 분석(ESLint)으로 import 경계를 강제하면 아키텍처 품질을 더 안정적으로 유지할 수 있겠다고 생각했습니다.
eslint-plugin-boundaries로도 비슷한 규칙을 만들 수 있다는 건 알고 있었습니다. 다만 프론트엔드에서 적용하려면 설정이 복잡해졌고, 허용된 target이라도 import path 형태까지 강제하기는 어려웠습니다.
그래서 단순한 설정으로 JS(TS) 프로젝트의 폴더 구조가 규칙이 되는 eslint-plugin-import-boundary를 만들었습니다.
- 기본적으로 부모는 직계 자식 디렉토리의 public entry만 import 가능
- public entry 파일 형식 지정 가능 (기본값: index)
- 공용 파일(폴더)를 지정해, 해당 범위 안에서만 공유 모듈을 자신과 하위 디렉토리 영역에서 import할 수 있습니다.
아직 초기 단계인 만큼 피드백과 반응을 환영합니다. 감사합니다!
- 문서: https://nayounsang.github.io/eslint-plugin-import-boundary/
- 설치:
pnpm add -D eslint-plugin-import-boundary eslint
AI 자동 생성 콘텐츠
본 콘텐츠는 GeekNews의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기