create-react-app

KO | EN

gitlite — search

#javascript #hacktoberfest #react #typescript #llm #deep-learning #linux #macos #java #windows #cli #kubernetes #vue #open-source

create-react-app

(★ 103,294)

명령어 하나로 최신 웹 앱을 설정하세요.

create-react-app 최신버젼 다운로드

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## Create React App [![Build & Test](https://github.com/facebook/create-react-app/actions/workflows/build-and-test.yml/badge.svg?branch=main)](https://github.com/facebook/create-react-app/actions/workflows/build-and-test.yml) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](https://github.com/facebook/create-react-app/blob/main/CONTRIBUTING.md)

> [!CAUTION]
>
> ## 지원 중단 (Deprecated)
>
> Create React App은 2017~2021년에 React 프로젝트를 시작하고 실행하기 위한 핵심 도구 중 하나였으나, 현재는 장기 정체 상태에 접어들었습니다. [Start a New React Project](https://react.dev/learn/start-a-new-react-project)에 문서화된 React 프레임워크 중 하나로 마이그레이션할 것을 권장합니다.
>
> React 학습을 위해 튜토리얼을 따라가는 중이라면 계속 진행하는 것도 여전히 가치가 있지만, Create React App을 기반으로 프로덕션 앱을 시작하는 것은 권장하지 않습니다.

빌드 설정 없이 React 앱을 만드세요.

- [앱 만들기](#creating-an-app) – 새로운 앱을 만드는 방법입니다.
- [사용자 가이드](https://facebook.github.io/create-react-app/) – Create React App으로 부트스트랩된 앱을 개발하는 방법입니다.

Create React App은 macOS, Windows, Linux에서 작동합니다. 
작동하지 않는 부분이 있다면 [이슈를 제기해 주세요](https://github.com/facebook/create-react-app/issues/new). 
질문이 있거나 도움이 필요하시면 [GitHub Discussions](https://github.com/facebook/create-react-app/discussions)에 문의해 주세요.

## 빠른 개요

```sh
npx create-react-app my-app
cd my-app
npm start
```

만약 이전에 `npm install -g create-react-app`을 통해 `create-react-app`을 전역(global)으로 설치한 적이 있다면, npx가 항상 최신 버전을 사용하도록 `npm uninstall -g create-react-app` 또는 `yarn global remove create-react-app`을 사용하여 패키지를 제거하는 것을 권장합니다.

_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b)는 npm 5.2 이상과 함께 제공됩니다. [이전 npm 버전용 안내](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f)를 참조하세요)_

그런 다음 [http://localhost:3000/](http://localhost:3000/)을 열어 앱을 확인하세요. 
프로덕션에 배포할 준비가 되면 `npm run build`로 압축(minified)된 번들을 만드세요.

### 즉시 시작하기

webpack이나 Babel 같은 도구를 설치하거나 설정할 필요가 **없습니다**. 
코너에만 집중할 수 있도록 사전에 설정되어 숨겨져 있습니다.

프로젝트를 만들면 바로 시작할 수 있습니다.

## 앱 만들기

**로컬 개발 머신에 Node 14.0.0 이상 버전이 설치되어 있어야 합니다** (서버에는 필수가 아닙니다). 최신 LTS 버전을 사용하는 것을 권장합니다. 프로젝트 간에 Node 버전을 전환하려면 [nvm](https://github.com/creationix/nvm#installation)(macOS/Linux) 또는 [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows)를 사용할 수 있습니다.

새 앱을 만들려면 다음 방법 중 하나를 선택할 수 있습니다.

### npx

```sh
npx create-react-app my-app
```

_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b)는 npm 5.2 이상에 포함된 패키지 실행 도구입니다. [이전 npm 버전용 안내](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f)를 참조하세요)_

### npm

```sh
npm init react-app my-app
```

_`npm init <initializer>`는 npm 6 이상에서 사용할 수 있습니다._

### Yarn

```sh
yarn create react-app my-app
```

_[(`yarn create <starter-kit-package>`)](https://yarnpkg.com/lang/en/docs/cli/create/)는 Yarn 0.25 이상에서 사용할 수 있습니다._

현재 폴더 안에 `my-app`이라는 디렉토리를 생성합니다. 
해당 디렉토리 내부에 초기 프로젝트 구조가 생성되고 트랜스티브 의존성(transitive dependencies)이 설치됩니다.

```
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js
```

설정이나 복잡한 폴더 구조 없이 앱을 빌드하는 데 필요한 파일만 생성됩니다. 
설정이 완료되면 프로젝트 폴더로 이동할 수 있습니다.

```sh
cd my-app
```

새로 생성된 프로젝트 내부에서 제공되는 내장 명령어들을 실행할 수 있습니다.

### `npm start` 또는 `yarn start`

개발 모드로 앱을 실행합니다. 
브라우저에서 확인하려면 [http://localhost:3000](http://localhost:3000)을 여세요.

코드에 변경 사항을 적용하면 페이지가 자동으로 새로고침됩니다. 
콘솔에서 빌드 에러와 린트 경고를 확인할 수 있습니다.

### `npm test` 또는 `yarn test`

인터랙티브 모드로 테스트 워처를 실행합니다. 
기본적으로 마지막 커밋 이후 변경된 파일과 관련된 테스트를 실행합니다.

[테스트에 대해 자세히 알아보세요.](https://facebook.github.io/create-react-app/docs/running-tests)

### `npm run build` 또는 `yarn build`

프로덕션을 위해 앱을 `build` 폴더에 빌드합니다. 
프로덕션 모드로 React를 올바르게 번들링하고 최적의 성능을 위해 빌드를 최적화합니다.

빌드 결과물은 압축되며 파일 이름에는 해시가 포함됩니다.

이제 앱을 배포할 준비가 되었습니다.

## 사용자 가이드

Create React App 사용에 대한 자세한 지침과 다양한 팁은 [공식 문서](https://facebook.github.io/create-react-app/)에서 확인할 수 있습니다.

## 새 버전으로 업데이트하는 방법

이 내용 및 기타 정보는 [사용자 가이드](https://facebook.github.io/create-react-app/docs/updating-to-new-releases)를 참조하세요.

## 철학

- **단일 의존성(One Dependency):** 빌드 의존성은 단 하나입니다. webpack, Babel, ESLint 및 기타 훌륭한 프로젝트를 사용하지만, 그 위에 응집력 있고 엄선된 경험을 제공합니다.

- **설정 불필요(No Configuration Required):** 아무것도 설정할 필요가 없습니다. 개발 및 프로덕션 빌드 모두에 합리적으로 훌륭한 설정이 처리되어 있으므로 코드 작성에만 집중할 수 있습니다.

- **종속성 없음(No Lock-In):** 언제든지 커스텀 설정으로 "추출(eject)"할 수 있습니다. 단일 명령어를 실행하면 모든 설정과 빌드 의존성이 프로젝트 내부로 직접 이동하므로, 중단했던 지점에서 바로 이어서 작업을 진행할 수 있습니다.

## 포함된 기능

현대적인 싱글 페이지 React 앱을 빌드하는 데 필요한 모든 환경이 갖춰져 있습니다.

- React, JSX, ES6, TypeScript 및 Flow 문법 지원.
- 객체 전개 연산자(object spread operator)와 같은 ES6 이상의 언어 확장 기능.
- `-webkit-` 등의 접두사를 붙일 필요가 없는 자동 완성된(Autoprefixed) CSS.
- 커버리지 리포팅 기능이 내장된 빠른 대화형 유닛 테스트 러너.
- 일반적인 실수를 경고해주는 라이브 개발 서버.
- 해시 및 소스 맵이 포함된, 프로덕션용 JS, CSS, 이미지를 번들링하는 빌드 스크립트.
- 오프라인 우선 [서비스 워커(service worker)](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) 및 [웹 앱 매니페스트(web app manifest)](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/), 모든 [프로그레시브 웹 앱(Progressive Web App)](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 기준 충족. (_참고: 서비스 워커 사용은 `react-scripts@2.0.0` 이상부터 선택 사항(opt-in)입니다_)
- 단일 의존성을 통한 위 도구들의 간편한 업데이트.

이 도구들이 어떻게 어우러지는지에 대한 개요는 [이 가이드](https://github.com/nitishdayal/cra_closer_look)를 확인하세요.

단점은 **이 도구들이 특정 방식으로 작동하도록 사전에 설정되어 있다**는 점입니다. 프로젝트에 더 많은 커스터마이징이 필요한 경우, ["eject"](https://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject)를 통해 커스텀할 수 있지만, 이후에는 이 설정을 직접 유지 관리해야 합니다.

## 인기 있는 대안

Create React App은 다음과 같은 경우에 아주 적합합니다.

- 편안하고 기능이 풍부한 개발 환경에서 **React를 학습**할 때.
- **새로운 싱글 페이지 React 애플리케이션을 시작**할 때.
- 라이브러리와 컴포넌트를 위한 React **예제 코드를 만들** 때.

다른 도구를 시도해 볼 수 있는 일반적인 경우는 다음과 같습니다.

- 수백 개의 트랜스티브 빌드 도구 의존성 없이 **React를 사용해보고** 싶다면, [대신 단일 HTML 파일이나 온라인 샌드박스 사용](https://reactjs.org/docs/getting-started.html#try-react)을 고려해보세요.

- Rails, Django, Symfony 같은 **서버 측 템플릿 프레임워크와 React 코드를 통합**해야 하거나, **싱글 페이지 앱을 빌드하지 않는 경우**, 좀 더 유연한 [nwb](https://github.com/insin/nwb) 또는 [Neutrino](https://neutrino.js.org/)를 고려해보세요. 특히 Rails의 경우 [Rails Webpacker](https://github.com/rails/webpacker)를 사용할 수 있습니다. Symfony의 경우 [Symfony's webpack Encore](https://symfony.com/doc/current/frontend/encore/reactjs.html)를 시도해보세요.

- **React 컴포넌트를 게시**해야 하는 경우, [nwb](https://github.com/insin/nwb) [또한 이를 수행할 수 있으며](https://github.com/insin/nwb#react-components-and-libraries), [Neutrino의 react-components 프리셋](https://neutrino.js.org/packages/react-components/)도 사용할 수 있습니다.

- React와 Node.js로 **서버 렌더링**을 하고 싶다면 [Next.js](https://nextjs.org/)나 [Razzle](https://github.com/jaredpalmer/razzle)을 확인해보세요. Create React App은 백엔드에 구애받지 않으며, 오직 정적 HTML/JS/CSS 번들만 생성합니다.

- 웹사이트가 **대체로 정적**인 경우(예: 포트폴리오 또는 블로그), [Gatsby](https://www.gatsbyjs.org/)나 [Next.js](https://nextjs.org/)를 고려해보세요. Create React App과 달리 Gatsby는 빌드 시점에 웹사이트를 HTML로 사전 렌더링합니다. Next.js는 서버 렌더링과 사전 렌더링을 모두 지원합니다.

- 마지막으로 **더 많은 커스터마이징**이 필요한 경우, [Neutrino](https://neutrino.js.org/)와 해당 [React 프리셋](https://neutrino.js.org/packages/react/)을 확인해보세요.

위의 모든 도구는 별다른 설정 없이 또는 최소한의 설정으로 작동할 수 있습니다.

빌드 설정을 직접 구성하고 싶다면 [이 가이드를 따르세요](https://reactjs.org/docs/add-react-to-a-website.html).

## React Native

비슷하지만 React Native용 도구를 찾고 계신가요? 
[Expo CLI](https://github.com/expo/expo-cli)를 확인해보세요.

## 기여하기

`create-react-app`에 여러분의 손길을 더해 주세요! 우리가 찾고 있는 것과 시작하는 방법에 대한 자세한 내용은 [CONTRIBUTING.md](CONTRIBUTING.md)를 참조하세요.

## Create React App 지원하기

Create React App은 커뮤니티에서 유지 관리하는 프로젝트이며 모든 기여자들은 자원봉사자입니다. Create React App의 향후 개발을 지원하고 싶다면 [Open Collective](https://opencollective.com/create-react-app)에 기부를 고려해 주세요.

## 크레딧

이 프로젝트는 [기여해 주신](CONTRIBUTING.md) 모든 분들 덕분에 존재합니다. 
<a href="https://github.com/facebook/create-react-app/graphs/contributors"><img src="https://opencollective.com/create-react-app/contributors.svg?width=890&button=false" /></a>

문서 호스팅을 제공해 주신 [Netlify](https://www.netlify.com/)에 감사드립니다.

## 감사의 말

아이디어와 협력을 제공해 주신 기존 관련 프로젝트의 작성자분들께 감사드립니다.

- [@eanplatter](https://github.com/eanplatter)
- [@insin](https://github.com/insin)
- [@mxstbr](https://github.com/mxstbr)

## 라이선스

Create React App은 [MIT 라이선스](https://github.com/facebook/create-react-app/blob/main/LICENSE)에 따라 허가된 오픈 소스 소프트웨어입니다. Create React App 로고는 [크리에이티브 커먼즈 저작자표시 4.0 국제 라이선스](https://creativecommons.org/licenses/by/4.0/)에 따라 라이선스가 부여됩니다.

create-react-app

create-react-app 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

create-react-app

create-react-app 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README