본문으로 건너뛰기
Ihab Khaled
메뉴
모든 프로젝트

오픈소스 프로젝트

NextRanger

아키텍처 결정을 문서화 후 잊혀지게 두는 대신 도구로 강제하는 엄격한 Next.js 엔지니어링 기반입니다.

개요

NextRanger는 진지한 프론트엔드 작업을 위해 제가 사용하는 출발점입니다. 팀이 동의는 하지만 강제할 수 없는 컨벤션은 결국 무너진다는 전제에서 출발했기 때문에, 중요한 규칙은 모두 README의 한 문단이 아니라 린트 규칙, 타입, 또는 실패하는 테스트로 표현됩니다.

아키텍처

Server Components를 기본으로 하는 Next.js App Router, 엄격한 TypeScript, 그리고 단방향 의존성을 가진 모듈 우선 구조입니다: 라우트는 모듈에, 모듈은 공유 코드에, 공유 코드는 벤더 래퍼에 의존하며 그 반대는 없습니다. 모든 서드파티 패키지는 정확히 하나의 책임 래퍼를 가지므로, 업그레이드와 에러 처리가 리뷰된 단일 파일에 모여 있습니다.

엔지니어링

커스텀 ESLint 플러그인이 레이어 정책, 패키지 소유권, TSX로 제한된 컴포넌트, 번역 커버리지를 강제합니다. Vitest와 Playwright가 단위, 통합, 엔드투엔드, 접근성, 시각적 테스트를 다루며, RTL을 지원하는 국제화, nonce 기반 CSP, 그리고 병합 전에 전체 테스트 세트를 실행하는 CI 게이트도 갖추고 있습니다.

역할
저자. 아키텍처 모델, 커스텀 ESLint 규칙 세트, 품질 게이트를 설계했습니다.
카테고리
풀스택
기술 스택
Next.jsReactTypeScriptESLintVitestPlaywrightTailwind CSS
언어
TypeScript