react-boilerplate - GitLite

KO | EN

gitlite — search

#javascript #python #react #ai #go #android #rust #linux #docker #awesome #cli #vue #awesome-list #mcp

react-boilerplate

(★ 29,494)

🔥 최고의 개발자 경험을 제공하고 성능과 모범 사례에 중점을 둔, 확장성이 뛰어나고 오프라인 우선(offline-first)인 기반(foundation).

파일 탐색기

최종 버전 다운로드 (.zip)

- - bug_report.md
  - feature_request.md
- issue-close-app.yml
- lock.yml
- PULL_REQUEST_TEMPLATE.md
- - favicon.ico
  - icon-512x512.png
- - i18n.test.js
  - store.test.js
- - de.json
  - en.json
- - checkStore.js
  - constants.js
  - history.js
  - injectReducer.js
  - injectSaga.js
  - loadable.js
  - reducerInjectors.js
  - request.js
  - sagaInjectors.js
- .htaccess
- .nginx.conf
- app.js
- configureStore.js
- global-styles.js
- i18n.js
- index.html
- reducers.js
- - linting.md
  - README.md
  - remove.md
  - sanitize.md
- - README.md
- - commands.md
  - components.md
  - debugging.md
  - deployment.md
  - editor.md
  - faq.md
  - files.md
  - gotchas.md
  - introduction.md
  - README.md
  - remove.md
  - server-configs.md
  - webstorm-debug.png
  - webstorm-eslint.png
  - workflow.png
- - async-components.md
  - i18n.md
  - immer.md
  - README.md
  - redux-saga.md
  - redux.md
  - remove.md
  - reselect.md
  - routing.md
- - dependency.md
- - component-testing.md
  - README.md
  - remote-testing.md
  - unit-testing.md
- README.md
- - index.js
- - cssModule.js
  - image.js
- - analyze.js
  - clean.js
  - extract-intl.js
  - generate-templates-for-linting.js
  - npmcheckversion.js
  - setup.js
- - app.js
  - configureStore.js
  - global-styles.js
  - i18n.js
  - index.html
  - reducers.js
- - test-bundler.js
- - webpack.base.babel.js
  - webpack.dev.babel.js
  - webpack.prod.babel.js
- - addDevMiddlewares.js
  - addProdMiddlewares.js
  - frontendMiddleware.js
- argv.js
- index.js
- logger.js
- port.js
.all-contributorsrc
.editorconfig
.eslintrc.js
.gitattributes
.gitignore
.nvmrc
.prettierignore
.prettierrc
.stylelintrc
.travis.yml
appveyor.yml
babel.config.js
Changelog.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
jest.config.js
LICENSE.md
package-lock.json
package.json
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![react boilerplate banner](https://raw.githubusercontent.com/react-boilerplate/react-boilerplate-brand/master/assets/banner-metal-optimized.jpg)

**단 몇 초 만에 다음 react 프로젝트를 시작하세요**

최고의 DX와 성능 및 모범 사례에 중점을 둔, 확장성이 뛰어나고 오프라인을 우선 지원하는 기반입니다.

[![Dependency Status](https://david-dm.org/react-boilerplate/react-boilerplate.svg)](https://david-dm.org/react-boilerplate/react-boilerplate)

[![devDependency Status](https://david-dm.org/react-boilerplate/react-boilerplate/dev-status.svg)](https://david-dm.org/react-boilerplate/react-boilerplate#info=devDependencies)

[![Build Status](https://travis-ci.org/react-boilerplate/react-boilerplate.svg)](https://travis-ci.org/react-boilerplate/react-boilerplate)

[![Test Coverage](https://coveralls.io/repos/github/react-boilerplate/react-boilerplate/badge.svg)](https://coveralls.io/r/react-boilerplate/react-boilerplate)
[![Chat with us on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/react-boilerplate)

[![Backers](https://opencollective.com/react-boilerplate/backers/badge.svg)](#backers)

[![Sponsors](https://opencollective.com/react-boilerplate/sponsors/badge.svg)](#sponsors)
[![Supported by Thinkmill](https://thinkmill.github.io/badge/heart.svg)](http://thinkmill.com.au/?utm_source=github&utm_medium=badge&utm_campaign=react-boilerplate)

[Max Stoiber](https://twitter.com/mxstbr)가 만들었으며, 훌륭한 [개발자 팀](https://github.com/orgs/react-boilerplate/people)이 ❤️와 함께 유지보수하고 있습니다.

## 주요 기능

빠른 스캐폴딩
:   컴포넌트, 컨테이너, 라우트, 셀렉터, 사가(saga) 및 해당 테스트를 CLI에서 바로 생성하세요!

즉각적인 피드백
:   최고의 DX(Developer eXperience)를 누리며 생각의 속도대로 앱을 코딩하세요! CSS와 JS에 저장된 변경 사항이 페이지를 새로 고치지 않고도 즉시 반영됩니다. 기반 코드의 일부를 업데이트할 때도 애플리케이션 상태가 유지됩니다!

예측 가능한 상태 관리
:   단방향 데이터 흐름을 통해 변경 사항 로깅과 타임 트래블 디버깅이 가능합니다.

차세대 JavaScript
:   템플릿 문자열, 객체 비구조화, 화살표 함수, JSX 구문 등을 사용하세요.

차세대 CSS
:   완벽한 모듈화를 위해 컴포넌트와 함께 배치되는 조합 가능한 CSS를 작성하세요. 고유하게 생성된 클래스 이름은 스타일 충돌을 없애면서 명시성을 낮게 유지합니다. 최고의 성능을 위해 현재 페이지에 있는 스타일만 전송합니다.

업계 표준 라우팅
:   애플리케이션에 페이지(예: `/about`)를 추가하는 것은 자연스러운 일이며, 라우팅을 통해 이를 구현할 수 있습니다.

업계 표준 i18n 국제화 지원
:   확장 가능한 앱은 여러 언어를 지원해야 하며, `react-intl`을 사용해 여러 언어를 쉽게 추가하고 지원할 수 있습니다.

오프라인 우선
:   성능이 뛰어난 웹 앱의 새로운 지평: 사용자가 앱을 로드하는 순간부터 네트워크 연결 없이도 이용할 수 있습니다.

정적 코드 분석
:   포맷팅이나 코드 품질에 대한 걱정 없이 새로운 기능 작성에 집중하세요. 올바른 에디터 설정으로 작업하는 동안 코드가 자동으로 포맷팅되고 린트됩니다.

SEO
:   JavaScript 콘텐츠 색인을 지원하는 검색 엔진을 위해 SEO(문서 헤드 태그 관리)를 지원합니다. (예: Google)

잠깐만요... 아직 더 있습니다!
- \_최고의 테스트 환경:\_ 코드 품질과 기존 기능이 깨지지 않음을 자동으로 보장합니다. (테스트 커버리지 100%인 React 앱을 본 적이 있으신가요?)
- \_네이티브 웹 앱:\_ 앱의 새로운 보금자리가 될 곳은? 바로 사용자의 스마트폰 홈 화면입니다.
- \_가장 빠른 폰트:\_ 빈 텍스트 표시는 이제 안녕입니다.
- \_속도 유지\_: 커맨드라인에서 편안하게 앱의 성능을 프로파일링하세요!
- \_문제 사전 차단:\_ AppVeyor와 TravisCI 설정이 기본적으로 포함되어 있어 Windows와 Unix에서 테스트가 자동으로 실행됩니다.
확장성을 고려하여 React.js 앱을 구조화하는 방법에 대한 [환상적인 동영상](https://vimeo.com/168648012)도 준비되어 있습니다. 이 동영상은 boilerplate의 설계 결정 중 대다수에 대한 근거를 제공합니다.
*Keywords: React.js, Redux, Hot Reloading, ESNext, Babel, react-router, Offline First, ServiceWorker, `styled-components`, redux-saga, FontFaceObserver*
## Quick start
1. Node.js v8.15.1 및 npm v5 이상이 설치되어 있는지 확인하세요.
2. `git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate.git ` 명령어를 사용하여 이 저장소를 복제합니다.
3. 해당 디렉토리로 이동합니다: `cd `.  
4. 의존성을 설치하고 git 저장소를 정리하려면 `npm run setup`을 실행하세요.  
\_이 시점에서 `npm start`를 실행하여 `http://localhost:3000`에서 예제 앱을 확인할 수 있습니다.\_
5. 예제 앱을 삭제하려면 `npm run clean`을 실행하세요.
자, 이제 시작할 준비가 되었습니다!
> 이 boilerplate는 \*\*프로덕션 수준이며 초보자용이 아닙니다\*\*! React나 Redux를 이제 막 시작하셨다면 대신 https://github.com/petehunt/react-howto를 참고해 주세요. React에 대한 경험이 좀 있고, 다음 제품을 구축하기 위한 탄탄하고 검증된 기반을 원하신다면 이보다 더 완벽한 시작점은 없을 것입니다.
## Documentation
- [\*\*The Hitchhiker's Guide to `react-boilerplate`\*\*](docs/general/introduction.md): 이 boilerplate를 처음 접하는 분들을 위한 소개입니다.
- [Overview](docs/general): 포함된 도구들에 대한 간단한 개요
- [\*\*Commands\*\*](docs/general/commands.md): 이 boilerplate를 최대한 활용하기
- [Testing](docs/testing): 내장된 테스트 하네스 작업 방법
- [Styling](docs/css): CSS 도구 사용 방법
- [Your app](docs/js): Routing, Redux, 간단한 비동기 헬퍼 등을 통한 앱 성능 강화
- [\*\*Troubleshooting\*\*](docs/general/gotchas.md): 개발자들이 자주 겪는 문제에 대한 해결책
## Contributors
멋진 기여자분들께 감사드립니다 ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

|  |  |  |  |  |  |  |  |
| --- | --- | --- | --- | --- | --- | --- | --- |
| [Max Stoiber **Max Stoiber**](https://mxstbr.com) [💻](https://github.com/react-boilerplate/react-boilerplate/commits?author=mxstbr "Code") [📖](https://github.com/react-boilerplate/react-boilerplate/commits?author=mxstbr "Documentation") [🤔](#ideas-mxstbr "Ideas, Planning, & Feedback") [👀](#review-mxstbr "Reviewed Pull Requests") [⚠️](https://github.com/react-boilerplate/react-boilerplate/commits?author=mxstbr "Tests") | [Julien Benchetrit **Julien Benchetrit**](https://julien.engineering/) [💻](https://github.com/react-boilerplate/react-boilerplate/commits?author=julienben "Code") [💬](#question-julienben "Answering Questions") [📖](https://github.com/react-boilerplate/react-boilerplate/commits?author=julienben "Documentation") [👀](#review-julienben "Reviewed Pull Requests") [🚧](#maintenance-julienben "Maintenance") | [Sara Federico **Sara Federico**](http://sarafederi.co) [💻](https://github.com/react-boilerplate/react-boilerplate/commits?author=gretzky "Code") [👀](#review-gretzky "Reviewed Pull Requests") [💬](#question-gretzky "Answering Questions") [📖](https://github.com/react-boilerplate/react-boilerplate/commits?author=gretzky "Documentation") [🚧](#maintenance-gretzky "Maintenance") | [Justin Greenberg **Justin Greenberg**](https://justingreenberg.com) [💻](https://github.com/react-boilerplate/react-boilerplate/commits?author=justingreenberg "Code") [👀](#review-justingreenberg "Reviewed Pull Requests") | [Jon Winn **Jon Winn**](https://github.com/jwinn) [💻](https://github.com/react-boilerplate/react-boilerplate/commits?author=jwinn "Code") [👀](#review-jwinn "Reviewed Pull Requests") | [Johan Meester **Johan Meester**](https://meester-johan.info/) [💻](https://github.com/react-boilerplate/react-boilerplate/commits?author=Mensae "Code") [⚠️](https://github.com/react-boilerplate/react-boilerplate/commits?author=Mensae "Tests") [📖](https://github.com/react-boilerplate/react-boilerplate/commits?author=Mensae "Documentation") | [Yaroslav Kiliba **Yaroslav Kiliba**](https://github.com/Dattaya) [💻](https://github.com/react-boilerplate/react-boilerplate/commits?author=Dattaya "Code") | [Glen Ihrig **Glen Ihrig**](https://github.com/gihrig) [💻](https://github.com/react-boilerplate/react-boilerplate/commits?author=gihrig "Code") |
| [Somasundaram Ayyappan **Somasundaram Ayyappan**](https://github.com/somus) [💻](https://github.com/react-boilerplate/react-boilerplate/commits?author=somus "Code") | [Oliver Turner **Oliver Turner**](https://www.codedsignal.co.uk/) [💻](https://github.com/react-boilerplate/react-boilerplate/commits?author=oliverturner "Code") | [Samuel Sharpe **Samuel Sharpe**](https://github.com/samit4me) [💻](https://github.com/react-boilerplate/react-boilerplate/commits?author=samit4me "Code") | [Mihir Karandikar **Mihir Karandikar**](https://karandikarmihir.github.io/) [💻](https://github.com/react-boilerplate/react-boilerplate/commits?author=KarandikarMihir "Code") | [Vaibhav Verma **Vaibhav Verma**](http://www.vverma.net) [💻](https://github.com/react-boilerplate/react-boilerplate/commits?author=v "Code") | [Sébastien Dubois **Sébastien Dubois**](https://imagineclarity.com) [💻](https://github.com/react-boilerplate/react-boilerplate/commits?author=sedubois "Code") | [Chainarong Tangsurakit **Chainarong Tangsurakit**](https://www.chaintng.com) [💻](https://github.com/react-boilerplate/react-boilerplate/commits?author=chaintng "Code") | [Amila Welihinda **Amila Welihinda**](https://amilajack.com) [💻](https://github.com/react-boilerplate/react-boilerplate/commits?author=amilajack "Code") |

이 프로젝트는 [all-contributors](https://github.com/all-contributors/all-contributors) 사양을 따릅니다. 어떠한 형태의 기여든 환영합니다!
## 후원자
이 프로젝트는 멋진 분들의 지원 없이는 불가능했을 것입니다. [**스폰서 되기**](https://opencollective.com/react-boilerplate)를 통해 수천 명의 활발한 react 개발자들에게 회사를 알리고 저희를 도와주세요!
[![](https://opencollective.com/react-boilerplate/bronze-sponsor/0/avatar.svg)](https://opencollective.com/react-boilerplate/bronze-sponsor/0/website)
[![](https://opencollective.com/react-boilerplate/bronze-sponsor/1/avatar.svg)](https://opencollective.com/react-boilerplate/bronze-sponsor/1/website)
[![](https://opencollective.com/react-boilerplate/bronze-sponsor/2/avatar.svg)](https://opencollective.com/react-boilerplate/bronze-sponsor/2/website)
[![](https://opencollective.com/react-boilerplate/bronze-sponsor/3/avatar.svg)](https://opencollective.com/react-boilerplate/bronze-sponsor/3/website)
[![](https://opencollective.com/react-boilerplate/bronze-sponsor/4/avatar.svg)](https://opencollective.com/react-boilerplate/bronze-sponsor/4/website)
[![](https://opencollective.com/react-boilerplate/bronze-sponsor/5/avatar.svg)](https://opencollective.com/react-boilerplate/bronze-sponsor/5/website)
[![](https://opencollective.com/react-boilerplate/bronze-sponsor/6/avatar.svg)](https://opencollective.com/react-boilerplate/bronze-sponsor/6/website)
[![](https://opencollective.com/react-boilerplate/bronze-sponsor/7/avatar.svg)](https://opencollective.com/react-boilerplate/bronze-sponsor/7/website)
[![](https://opencollective.com/react-boilerplate/bronze-sponsor/8/avatar.svg)](https://opencollective.com/react-boilerplate/bronze-sponsor/8/website)
[![](https://opencollective.com/react-boilerplate/bronze-sponsor/9/avatar.svg)](https://opencollective.com/react-boilerplate/bronze-sponsor/9/website)
---
[![](https://opencollective.com/react-boilerplate/backer/0/avatar.svg)](https://opencollective.com/react-boilerplate/backer/0/website)
[![](https://opencollective.com/react-boilerplate/backer/1/avatar.svg)](https://opencollective.com/react-boilerplate/backer/1/website)
[![](https://opencollective.com/react-boilerplate/backer/2/avatar.svg)](https://opencollective.com/react-boilerplate/backer/2/website)
[![](https://opencollective.com/react-boilerplate/backer/3/avatar.svg)](https://opencollective.com/react-boilerplate/backer/3/website)
[![](https://opencollective.com/react-boilerplate/backer/4/avatar.svg)](https://opencollective.com/react-boilerplate/backer/4/website)
[![](https://opencollective.com/react-boilerplate/backer/5/avatar.svg)](https://opencollective.com/react-boilerplate/backer/5/website)
[![](https://opencollective.com/react-boilerplate/backer/6/avatar.svg)](https://opencollective.com/react-boilerplate/backer/6/website)
[![](https://opencollective.com/react-boilerplate/backer/7/avatar.svg)](https://opencollective.com/react-boilerplate/backer/7/website)
[![](https://opencollective.com/react-boilerplate/backer/8/avatar.svg)](https://opencollective.com/react-boilerplate/backer/8/website)
[![](https://opencollective.com/react-boilerplate/backer/9/avatar.svg)](https://opencollective.com/react-boilerplate/backer/9/website)
## 라이선스
이 프로젝트는 MIT 라이선스에 따라 라이선스가 부여되며, Copyright (c) 2019 Maximilian Stoiber입니다. 자세한 내용은 `LICENSE.md`를 참조하세요.