> 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="" %} 이 프로젝트는 [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 # 템플릿 구성 파일 ``` ## 커스텀 템플릿 커스텀 템플릿(Custom Templates)을 사용하면 Create React App의 모든 기능 위에 프로젝트에 필요한 도구를 추가한 템플릿을 만들어 활용할 수 있습니다. 공식적으로 지원하는 기본 템플릿은 2가지이지만, NPM에서 검색하면 [매우 다양한 커스텀 템플릿이 검색](https://www.npmjs.com/search?q=cra-template-*) 될 정도로 만들기 쉽고 여러 곳에서 커스텀 템플릿이 사용됩니다. ### 템플릿 구성 템플릿을 만들기 위한 구조는 다음과 같습니다. 템플릿 디렉토리에 기본적으로 다음의 파일이 필요합니다. ([참고](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이 설치 될 때 사용자의 앱 디렉토리에 복사됩니다. | |

template.json

|

템플릿의 구성 파일입니다. package 키를 사용하면 package.json 템플릿 종속성,
NPM 스크립트 등 새 프로젝트에 추가 하려는 모든 키/값을 제공 할 수 있습니다 .

| {% 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 기본 값과 일치하는 모든 값은 대체됩니다. ### 템플릿 테스트 템플릿을 로컬에서 테스트하려면 `file:` 접두사 뒤에 템플릿 디렉토리 파일 경로를 전달합니다. ```python npx create-react-app <테스트> --template file:../cra-template-[템플릿-이름] ``` ### NPM 회원가입/로그인 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 패키지 버전 관리 배포 할 때는 [시멘틱 버전(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 패키지 배포 `publish` NPM 명령을 사용해 패키지를 배포합니다. ```bash npm publish # 패키지 모듈 배포 ``` 배포에 성공하면 잠시 뒤 NPM 사이트에 올라간 커스텀 템플릿 모듈 페이지를 확인할 수 있습니다. ![](/files/-MVIlhKhvWzD1dwCZkZr) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://yamoo9.gitbook.io/learning-react-app/tip-and-references/create-react-app/usage-custom-template.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.