> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/learning-react-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/learning-react-app/tip-and-references/create-react-app/usage-custom-template.md).

# 커스텀 템플릿

## cra-template-ko

[기본 템플릿](https://github.com/facebook/create-react-app/tree/master/packages/cra-template) 대신, **사용자 정의 템플릿을 사용해 새로운 프로젝트를 구성** 할 수도 있습니다.

{% embed url="<https://www.npmjs.com/package/cra-template-ko>" %}

이 프로젝트는 [Create React App](https://github.com/facebook/create-react-app)의 템플릿에 따라 제작 된 한국어 `cra-template-ko` 입니다.

{% tabs %}
{% tab title="커스텀 템플릿으로 프로젝트 생성" %}

```bash
npx create-react-app <프로젝트_이름> --template ko
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
CRA 커스텀 템플릿 이름은 cra-template- 접두사로 시작하지만, **템플릿 이름만으로도 설치가 가능**합니다.
{% endhint %}

#### 추가된 항목

기본 템플릿 `cra-template`에 추가된 항목입니다.

* `sass` 패키지 추가
* `classnames` 패키지 추가
* `serve` 패키지 및 빌드 실행 명령 추가
* `jsconfig.json` 절대 경로 및 Webpack 별칭(alias) 설정
* Browserslist 배포(production) 한국(KR) 환경으로 수정 및 IE 11 이상 지원 설정

#### 템플릿 구조

커스텀 템플릿 구조는 [GitHub 저장소](https://github.com/yamoo9/cra-template-ko)에서 자세히 살펴볼 수 있습니다.

```python
.
├── template/ # 템플릿 디렉토리
│   ├── public/ # 정적 에셋 디렉토리
│   │   ├── assets/ # 정적 자산 관리
│   │   │   ├── favicon.png
│   │   │   ├── logo192.png
│   │   │   ├── logo512.png
│   │   │   └── og-image.jpg
│   │   ├── index.html # 스태틱 엔트리 파일
│   │   ├── manifest.json
│   │   └── robots.txt
│   ├── src/ # 프로젝트 소스 디렉토리
│   │   ├── app/ # 앱 컴포넌트 디렉토리
│   │   │   ├── App.css
│   │   │   ├── App.js
│   │   │   └── App.test.js
│   │   ├── assets/ # 동적 자산 디렉토리
│   │   │   └── logo.svg
│   │   ├── components/ # 컴포넌트 디렉토리
│   │   │   └── empty
│   │   ├── containers/ # 컨테이너 디렉토리
│   │   │   └── empty
│   │   ├── styles/ # 스타일 디렉토리
│   │   │   ├── common.module.css
│   │   │   ├── custom-reset.css
│   │   │   └── index.css
│   │   ├── index.js # 엔트리 파일
│   │   ├── reportWebVitals.js
│   │   └── setupTests.js
│   ├── README.md
│   ├── gitignore
│   ├── jsconfig.json # jsconfig 구성 파일
│   ├── package-lock.json
│   └── package.json # 패키지 관리 파일
├── README.md
├── package.json # 템플릿 패키지 관리 파일
└── template.json # 템플릿 구성 파일
```

## 커스텀 템플릿 <a href="#custom-template" id="custom-template"></a>

커스텀 템플릿(Custom Templates)을 사용하면 Create React App의 모든 기능 위에 프로젝트에 필요한 도구를 추가한 템플릿을 만들어 활용할 수 있습니다. 공식적으로 지원하는 기본 템플릿은 2가지이지만, NPM에서 검색하면 [매우 다양한 커스텀 템플릿이 검색](https://www.npmjs.com/search?q=cra-template-*) 될 정도로 만들기 쉽고 여러 곳에서 커스텀 템플릿이 사용됩니다.

### 템플릿 구성 <a href="#template-structure" id="template-structure"></a>

템플릿을 만들기 위한 구조는 다음과 같습니다. 템플릿 디렉토리에 기본적으로 다음의 파일이 필요합니다. ([참고](https://github.com/facebook/create-react-app/tree/master/packages/cra-template))

{% tabs %}
{% tab title="cra-template-\[템플릿-이름]/" %}

```python
template/ # 템플릿 디렉토리
├── public/ # 정적 에셋 디렉토리
│   └── index.html # 스태틱 엔트리 파일
├── src/ # 프로젝트 소스 디렉토리
│   └── index.js # 엔트리 파일 (또는 index.tsx)
├── README.md # NPM 용 
├── gitignore
└── package.json # 패키지 관리 파일
```

{% endtab %}
{% endtabs %}

| 디렉토리 / 파일                   | 설명                                                                                                                                        |
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| template                    | Create React App이 설치 될 때 사용자의 앱 디렉토리에 복사됩니다.                                                                                              |
| <p>template.json</p><p></p> | <p>템플릿의 구성 파일입니다. <code>package</code> 키를 사용하면 <code>package.json</code> 템플릿 종속성, <br>NPM 스크립트 등 새 프로젝트에 추가 하려는 모든 키/값을 제공 할 수 있습니다 .</p> |

{% tabs %}
{% tab title="template.json 예제" %}

```javascript
{
  "package": {
    "dependencies": {
      "eslint-plugin-jsx-a11y": "^6.2.3",
      "serve": "^11.2.0"
    },
    "scripts": {
      "serve": "serve -s build",
      "build-and-serve": "npm run build && npm run serve"
    },
    "eslintConfig": {
      "extends": ["react-app", "plugin:jsx-a11y/recommended"],
      "plugins": ["jsx-a11y"]
    }
  }
}
```

{% endtab %}
{% endtabs %}

`template.json` 파일의 `dependencies`, `scripts` 항목에 추가한 모든 값들은 Create Rect App의 기본 설정과 병합되며 Create React App 기본 값과 일치하는 모든 값은 대체됩니다.

### 템플릿 테스트 <a href="#test-template" id="test-template"></a>

템플릿을 로컬에서 테스트하려면 `file:` 접두사 뒤에 템플릿 디렉토리 파일 경로를 전달합니다.

```python
npx create-react-app <테스트> --template file:../cra-template-[템플릿-이름]
```

### NPM 회원가입/로그인 <a href="#npm-account-sign-in" id="npm-account-sign-in"></a>

NPM에 커스텀 템플릿 패키지를 배포하려면 먼저 [가입](https://www.npmjs.com/signup)한 후, 이메일 인증을 받아야 합니다. 이미 가입, 인증 완료 된 사용자라면 로그인 하여 커스템 템플릿 루트 위치에서 다음 명령을 실행해 배포할 수 있습니다. ([참고](https://heropy.blog/2019/01/31/node-js-npm-module-publish/))

{% tabs %}
{% tab title="NPM 명령어" %}

```bash
npm whoami  # 로그인 여부 확인
npm login   # 로그인 | 로그오프 npm logout
```

{% endtab %}
{% endtabs %}

### NPM 패키지 버전 관리 <a href="#npm-semver" id="npm-semver"></a>

배포 할 때는 [시멘틱 버전(Semantic Versioning)](https://semver.org/lang/ko/)을 참고한 후 업데이트 합니다. 다음의 NPM 명령을 사용하면 손쉽게 버전을 업데이트 할 수 있습니다. ( `patch` ▸ `minor` ▸ `major` )

```bash
npm version patch # 0.0.1 +
npm version minor # 0.1.0 +
npm version major # 1.0.0 +
```

### NPM 패키지 배포 <a href="#publish-npm" id="publish-npm"></a>

`publish` NPM 명령을 사용해 패키지를 배포합니다.

```bash
npm publish # 패키지 모듈 배포
```

배포에 성공하면 잠시 뒤 NPM 사이트에 올라간 커스텀 템플릿 모듈 페이지를 확인할 수 있습니다.

![](/files/-MVIlhKhvWzD1dwCZkZr)