Rockpack: SSR, 번들링, 린팅 및 테스트를 지원하는 경량 React 설정 솔루션

Rockpack은 서버 사이드 렌더링 (SSR), 번들링 (bundling), 린팅 (linting) 및 테스트 (testing)를 완벽하게 지원하며, React 애플리케이션을 빠르게 설정할 수 있는 가볍고 설정이 필요 없는 (zero-configuration) 솔루션입니다. 단 5분 만에 성능과 모범 사례 (best practices)에 최적화된 현대적인 React 앱을 시작할 수 있습니다. 설정을 건너뛰고 앱 구축에 집중하고 싶은 개발자에게 완벽합니다!

즉각적인 SSR: 더 나은 SEO와 더 빠른 초기 페이지 로딩을 위해 서버 사이드 렌더링을 원활하게 통합합니다. 스마트 번들링: 최적의 성능을 갖춘 번들링을 즉시 지원합니다. 자동 린팅: 내장된 린팅 및 스타일 체크를 통해 코드 품질을 유지합니다. 테스트 준비 완료: Jest와 같은 인기 도구가 포함된 사전 구성된 테스트 환경을 제공합니다.

설정이 필요 없는 (Zero-config) 설정: 최소한의 설정으로 즉시 구축을 시작하세요. React, SSR 및 Webpack 통합: 효율적인 개발을 위해 모든 것이 하나의 패키지에 담겨 있습니다. 프로덕션 최적화: 모범 사례에 따라 번들링, 린팅, 테스트 및 렌더링을 수행합니다. 확장 가능성: 더 고급 사용 사례를 위해 쉽게 커스텀할 수 있습니다.

지금 바로 Rockpack으로 시작하여 React 앱 개발을 간소화하세요!

Rockpack은 다음과 같은 경우에 도움이 됩니다:

초보자. Rockpack의 도움을 받으면 React 초보자도 webpack, eslint, jest 등이 구성된 어떤 복잡성의 프로젝트도 몇 분 만에 배포할 수 있습니다. Rockpack은 프로젝트 구조, 서버 사이드 렌더링 (Server Side Rendering), 최적화와 함께 가장 인기 있는 유형의 React 애플리케이션을 지원하며 필요한 의존성 (dependencies)을 갖추고 있습니다. 대규모 프로젝트의 초기 구축. Rockpack은 대부분의 webpack 모범 사례 구성, eslint 규칙, jest, typescript를 지원하며 대규모 프로젝트에서도 훌륭하게 작동할 것입니다. 스타트업. 프로젝트를 펼치고 설정하는 데 시간을 낭비하지 않고 아이디어를 빠르게 확인해야 하는 경우. 라이브러리 또는 React 컴포넌트. esm/cjs 빌드뿐만 아니라 압축된 (minified) 버전을 지원하며 UMD 라이브러리 또는 React 컴포넌트를 작성하고 싶은 경우.

레거시 프로젝트 또는 모듈형 사용. Rockpack은 모듈형 플랫폼이므로 필요한 것만 사용할 수 있습니다. 각 모듈의 readme를 참조해 주세요.

또한, iSSR 모듈에 주목해 주세요. 이 작은 모듈은 React 애플리케이션을 서버 사이드 렌더링 (Server-Side Rendering, SSR)으로 전환하는 데 도움을 줍니다. 다음 문서들을 참조하세요:

많은 React 프로젝트를 작업하면서, 우리는 동일한 유형의 반복적인 작업들에 직면해 왔습니다. 우리는 매번 다음과 같은 질문들에 답해야 했습니다:

*우리가 필요로 하는 다양한 포맷과 TypeScript를 지원하는 효율적인 빌드 시스템을 어떻게 구축할 것인가?**편안한 작업을 위해 프로젝트에 어떤 린터 (Linter) 규칙을 적용해야 하는가?**Babel 또는 TypeScript와 함께 작동하도록 Jest를 어떻게 설정할 것인가?**Redux, Apollo 및 기타 기존 솔루션들과 서버 사이드 렌더링 (SSR)이 함께 작동하게 하려면 어떻게 해야 하는가?*서버 사이드 렌더링을 위한 Webpack을 설정하고, 프로덕션 준비가 된 결과물 (artifact)과 멋진 개발 서버 (dev server)를 어떻게 얻을 것인가?

매번 우리는 이러한 반복적인 작업들에 몇 주를 소비하곤 했습니다.

Rockpack을 사용하면 몇 분 만에 프로젝트를 배포하고 정말 유용한 코드를 작성하기 시작할 수 있습니다.

Rockpack은 모듈로 구성되어 있습니다. 더 자세히 살펴보겠습니다:

이것은 강화된 버전의 create-react-app입니다.

Rockpack은 애플리케이션을 설정하기 위한 베스트 프랙티스 (best practice)를 제공합니다. 프로젝트 구조는 기능 기반 접근 방식 (feature based approach)을 따릅니다 (관련 문서 참조).

다음과 같은 유형의 애플리케이션을 지원합니다:

React SPA – React를 사용하는 싱글 페이지 애플리케이션 (Single Page Application)을 위한 프리셋 (Preset).
React SPA + SSR – 서버 사이드 렌더링 (SSR)이 포함된 React 싱글 페이지 애플리케이션을 위한 프리셋.
React Component – 재사용 가능한 React 컴포넌트를 NPM에 배포하기 위한 프리셋.
UMD Library – NPM 배포에 적합한 바닐라 자바스크립트 (vanilla JavaScript) UMD 라이브러리를 위한 프리셋.

모든 유형의 애플리케이션은 다음을 지원합니다:

• 다양한 파일 형식의 임포트 (Import). 형식 목록
• 이미지 최적화 (Image optimization), SVG 최적화 (SVG Optimization)
• SVG 파일을 React 컴포넌트로 로드
• CSS/SCSS/Less 모듈
• Babel 또는 TS; CSS/SCSS/Less 모듈에 대한 TS 지원
• PostCSS: autoprefixer, postcss-custom-media, postcss-media-minmax
• SEO 최적화 (SEO Optimizations), React 최적화 (React optimizations), Antd 최적화 (Antd optimizations)
• Dotenv 및 Dotenv safe를 통한 설정 지원
• 번들 분석기 (Bundle Analyzer), Statoscope
• GraphQL 지원

전체 기능 목록은 여기에서 확인하세요.

또한, 각 애플리케이션 유형에 대해 다음을 설치할 수 있습니다:

• 베스트 프랙티스 규칙이 적용된 설정된 ESLint @rockpack/codestyle
• 추가 기능이 포함된 맞춤형 Jest @rockpack/tester

이것은 필요한 로더 (loaders)와 플러그인 (plugins) 세트를 사용하고, 즉시 사용 가능한 베스트 프랙티스를 활용하는 (Webpack 기반의) React 번들러 (bundler)입니다.

@rockpack/compiler는 다음을 도와줄 수 있습니다:

• React 애플리케이션 컴파일 (TS/Babel)
• React 컴포넌트 또는 바닐라 자바스크립트 (VanillaJS) UMD 라이브러리 컴파일 (TS/Babel)
• Node.js 백엔드 (TS/Babel)
• HTML 마크업 파일
• 동형 (isomorphic, 서버 사이드 렌더링 (Server-side rendering)) 애플리케이션 컴파일 (TS/Babel)
• 번들 분석기 (Bundle Analyzer), Statoscope (TS/Babel)

이것은 멋진 설정과 애드온 (add-ons)이 포함된 Jest이며, TS / Babel과 완전히 호환됩니다.

이것은 많은 실용적인 규칙과 추가 기능이 포함된 효율적으로 맞춤화된 ESLint입니다.

더 자세한 정보를 얻으려면 각 모듈 링크를 따르십시오.

Rockpack은 완전히 무료인 프로젝트입니다. 저희는 항상 협업과 기여자(contributors)에게 열려 있습니다.

Rockpack 프로젝트는 다음에서 영감을 받았습니다:

...우리에게 create-react-app이나 다른 것이 있을까요?

Rockpack은 @rockpack/starter를 통해 매우 쉽게 시작할 수 있는 방법을 제공합니다. 단 하나의 명령만으로 TypeScript, Jest, ESLint, SSR 등을 지원하는 애플리케이션을 설정할 수 있습니다. Rockpack은 매우 유연합니다. 아키텍처를 원하는 대로 설계할 수 있으며, 상태 관리 (state management)를 위해 서로 다른 라이브러리와 솔루션을 사용할 수 있습니다. Rockpack은 어떠한 마법(magic)도 추가하지 않습니다. 이는 프로젝트의 시작을 자동화하기 위한 베스트 프랙티스 (best practices)와 라이브러리들의 집합입니다. Rockpack은 기존 프로젝트 (legacy project)에 모듈 방식으로 통합할 수 있는 옵션을 제공합니다. 또한 Rockpack을 업데이트할 수 있는 능력을 유지하면서, "eject" 없이도 webpack.config를 수정할 수 있는 기능을 갖추고 있습니다. Rockpack은 기존의 모듈과 접근 방식을 사용하며 바퀴를 다시 발명하지 않습니다.

Copyright (c) Sergey Aleksandrov

본 소프트웨어 및 관련 문서 파일(이하 "소프트웨어")의 복사본을 입수하는 모든 사람에게, 소프트웨어를 제한 없이 다룰 수 있는 권한을 무상으로 허용합니다. 여기에는 소프트웨어의 복사본을 사용, 복제, 수정, 병합, 게시, 배포, 하위 라이선스 부여 및/또는 판매할 수 있는 권한과 소프트웨어를 제공받은 사람에게 동일한 권한을 부여하는 것이 포함되며, 다음 조건에 따릅니다:

본 소프트웨어는 상품성, 특정 목적에의 적합성 및 비침해성에 대한 보증을 포함하되 이에 국한되지 않고, 명시적이든 묵시적이든 어떠한 종류의 보증 없이 "있는 그대로" 제공됩니다. 어떠한 경우에도 저자 또는 저작권자는 계약상의 행위, 불법 행위 또는 기타 방식에 관계없이 소프트웨어와 관련하여 또는 소프트웨어의 사용 또는 기타 거래로 인해 발생하는 어떠한 청구, 손해 또는 기타 책임에 대해서도 책임을 지지 않습니다.