<div id="readability-page-1" class="page"><article><div id="contents_list"><h2 id="section">목차</h2><ul><li><a href="#%EA%B0%9C%EC%9A%94">개요</a></li><li><a href="#create-react-app-%ED%85%9C%ED%94%8C%EB%A6%BF-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%83%9D%EC%84%B1">create-react-app 템플릿 프로젝트 생성</a></li><li><a href="#react-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%9D%98-%EC%BB%A4%EC%8A%A4%ED%85%80%ED%99%94">React 프로젝트의 커스텀화</a></li><li><a href="#package-lockjson-%ED%8C%8C%EC%9D%BC%EA%B3%BC-node_modules">package-lock.json 파일과 node_modules</a></li><li><a href="#template-%ED%8F%B4%EB%8D%94">template 폴더</a></li><li><a href="#gitignore">gitignore</a></li><li><a href="#templatejson">template.json</a></li><li><a href="#%ED%85%8C%EC%8A%A4%ED%8A%B8">테스트</a></li><li><a href="#%EB%B0%B0%ED%8F%AC-%EC%A4%80%EB%B9%84">배포 준비</a></li><li><a href="#%EB%B0%B0%ED%8F%AC">배포</a></li><li><a href="#%EC%99%84%EB%A3%8C">완료</a></li></ul></div><h2 id="개요">개요</h2><code>create-react-app</code>을 사용하면 간단하게 <code>React</code> 프로젝트를 생성하는 것이 가능합니다. <code>create-react-app</code>은 <code>--template</code> 옵션을 제공하여 미리 제작된 템플릿을 활용할 수 있는 기능을 제공하고 있습니다.<code>create-react-app</code>은 기본적으로 <code>TypeScript</code>용 템플릿을 제공하고 있습니다.<ul><li><a href="https://github.com/facebook/create-react-app/tree/main/packages/cra-template-typescript" rel="nofollow noreferrer" target="_blank">cra-template-typescript</a></li></ul>그래서 우리는 <code>create-react-app</code> 명령어를 사용하여 다음과 같이 <code>TypeScript</code>가 적용된 <code>React</code> 프로젝트를 간단하게 생성할 수 있습니다.<div><pre><code>npx create-react-app [YOUR_PROJECT_NAME] --template typescript
</code></pre></div>이번 블로그 포스트에서는 <code>create-react-app</code>의 템플릿 기능을 활용하여 나만의 템플릿을 만드는 방법에 대해서 알아보도록 하겠습니다.<ul><li>공식 문서: <a href="https://create-react-app.dev/docs/custom-templates/" rel="nofollow noreferrer" target="_blank">Custom Templates</a></li></ul><h2 id="create-react-app-템플릿-프로젝트-생성">create-react-app 템플릿 프로젝트 생성</h2><code>create-react-app</code>의 템플릿을 만들기 위해서는 프로젝트를 생성할 때 <code>cra-template-</code> prefix를 붙여서 <code>React</code> 프로젝트를 생성할 필요가 있습니다.<div><pre><code>npx create-react-app cra-template-[템플릿명]
</code></pre></div>저는 <code>cra-template-deku</code>라는 이름으로 프로젝트를 생성하였습니다.<div><pre><code>npx create-react-app cra-template-deku
</code></pre></div>이렇게 생성한 템플릿 프로젝트는 <code>NPM(Node Package Manager)</code>에 배포할 예정입니다. 따라서 다음 명령어를 실행하여 중복된 이름의 패키지가 배포되었는지 확인합니다.<div><pre><code>npm info cra-template-[템플릿명]
</code></pre></div>만약 다음과 같이 동일한 이름의 패키지가 이미 존재한다면, 다른 이름으로 프로젝트를 생성할 필요가 있습니다.<div><pre><code><a href="/cdn-cgi/l/email-protection" data-cfemail="533021327e27363e233f3227367e3736382613637d637d61">[email&nbsp;protected]</a> | MIT | deps: none | versions: 2
DeKu template for create-react-app
https://github.com/dev-yakuza/cra-template-deku

keywords: react, create-react-app, cra, template

dist
.tarball: https://registry.npmjs.org/cra-template-deku/-/cra-template-deku-0.0.2.tgz
.shasum: 89c7f5797c9bf12cfa45dee3de7c29867cc8e371
.integrity: sha512-9HAfk9OkBVfaJHcoIjuCZhQry64UU4OOlNNmUYvhtXrr0xoxzeq6jo1OgjU97Fav2kkyjmYupgmy4GYNAWWFHQ==
.unpackedSize: 275.8 kB

maintainers:
- dev-yakuza &lt;<a href="/cdn-cgi/l/email-protection" data-cfemail="a0c4c5d68ed9c1cbd5dac1e0c7cdc1c9cc8ec3cfcd">[email&nbsp;protected]</a>&gt;

dist-tags:
latest: 0.0.2

published yesterday by dev-yakuza &lt;<a href="/cdn-cgi/l/email-protection" data-cfemail="d2b6b7a4fcabb3b9a7a8b392b5bfb3bbbefcb1bdbf">[email&nbsp;protected]</a>&gt;
</code></pre></div>만약 다음과 같이 <code>404</code> 에러가 나온다면, 해당 이름으로 프로젝트를 진행하면 됩니다.<div><pre><code>npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/cra-template-yakuza - Not found
npm ERR! 404
npm ERR! 404 'cra-template-yakuza@*' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in: /.npm/_logs/2023-10-22T06_20_21_911Z-debug-0.log
</code></pre></div><h2 id="react-프로젝트의-커스텀화">React 프로젝트의 커스텀화</h2>이렇게 생성된 프로젝트에 필요한 라이브러리를 설치하고, 예제 코드, 폴더 구조 등 자신이 원하는 스타일로 프로젝트를 구성합니다.저는 다음과 같은 라이브러리를 설치하였습니다.<ul><li>React UI library: <a href="https://mui.com/" rel="nofollow noreferrer" target="_blank">MUI</a>, <a href="https://emotion.sh/" rel="nofollow noreferrer" target="_blank">Emotion</a></li><li>Component driven development: <a href="https://storybook.js.org/" rel="nofollow noreferrer" target="_blank">Storybook</a></li><li>Calling API: <a href="https://axios-http.com/" rel="nofollow noreferrer" target="_blank">Axios</a>, <a href="https://tanstack.com/query/v4/" rel="nofollow noreferrer" target="_blank">React Query</a></li><li>State management: <a href="https://recoiljs.org/" rel="nofollow noreferrer" target="_blank">Recoil</a></li><li>Routing: <a href="https://reactrouter.com/" rel="nofollow noreferrer" target="_blank">React Router</a></li><li>i18n: <a href="https://github.com/i18next/react-i18next" rel="nofollow noreferrer" target="_blank">react-i18next</a></li></ul>그리고 다음과 같이 폴더를 구성하였습니다.<div><pre><code>cra-template-deku
├── public
├── src
│&nbsp;&nbsp; ├── api
│&nbsp;&nbsp; ├── components
│&nbsp;&nbsp; │&nbsp;&nbsp; ├── atoms
│&nbsp;&nbsp; │&nbsp;&nbsp; ├── molecules
│&nbsp;&nbsp; │&nbsp;&nbsp; ├── organisms
│&nbsp;&nbsp; │&nbsp;&nbsp; ├── pages
│&nbsp;&nbsp; │&nbsp;&nbsp; └── templates
│&nbsp;&nbsp; ├── data
│&nbsp;&nbsp; ├── locales
│&nbsp;&nbsp; ├── types
│&nbsp;&nbsp; ├── utils
│&nbsp;&nbsp; └── ...
└── ...
</code></pre></div><h2 id="package-lockjson-파일과-node_modules">package-lock.json 파일과 node_modules</h2>템플릿 구성이 완료되었다면, 이제 불필요한 파일과 폴더를 삭제할 필요가 있습니다. <code>package-lock.json</code>와 <code>node_modules</code> 폴더는 더 이상 필요 없으므로 다음 명령어를 실행하여 삭제합니다.<div><pre><code>rm -rf package-lock.json node_modules
</code></pre></div><h2 id="template-폴더">template 폴더</h2>현재 <code>React</code> 프로젝트를 템플릿으로 제공하기 위해서는 <code>template</code> 폴더를 생성하고 모든 파일, 폴더들을 이동 시킬 필요가 있습니다.<code>template</code> 폴더를 만들고 <code>package.json</code> 파일 이외에 모든 내용을 해당 폴더로 이동 시킵니다. 그럼 템플릿 프로젝트는 다음과 같은 구조를 가지게 될 것입니다.<div><pre><code>cra-template-deku
├── package.json
└── template
 &nbsp;&nbsp; ├── README.md
 &nbsp;&nbsp; ├── .gitignore
 &nbsp;&nbsp; ├── public
 &nbsp;&nbsp; ├── src
 &nbsp;&nbsp; └── tsconfig.json
</code></pre></div><h2 id="gitignore">.gitignore</h2><code>template</code> 폴더안의 <code>.gitignore</code> 파일은 <code>gitignore</code>로 이름을 변경할 필요가 있습니다. 이름을 변경하지 않으면 해당 템플릿을 사용하여 프로젝트를 생성할 때, 다음과 같은 에러가 발생합니다.<div><pre><code>Error: ENOENT: no such file or directory, open '/projects/temp/gitignore'
 at Object.openSync (node:fs:592:3)
 at Object.readFileSync (node:fs:460:35)
 at module.exports (/projects/temp/node_modules/react-scripts/scripts/init.js:260:21)
 at [eval]:3:14
 at Script.runInThisContext (node:vm:122:12)
 at Object.runInThisContext (node:vm:298:38)
 at node:internal/process/execution:83:21
 at [eval]-wrapper:6:24
 at runScript (node:internal/process/execution:82:62)
 at evalScript (node:internal/process/execution:104:10) {
 errno: -2,
 syscall: 'open',
 code: 'ENOENT',
 path: '/projects/temp/gitignore'
</code></pre></div>따라서 <code>.gitignore</code> 파일명에서 반드시 <code>.</code>을 제거한 <code>gitignore</code>로 변경해야 합니다.<div><pre><code>cra-template-deku
├── package.json
└── template
 &nbsp;&nbsp; ├── README.md
 &nbsp;&nbsp; ├── gitignore
 &nbsp;&nbsp; ├── public
 &nbsp;&nbsp; ├── src
 &nbsp;&nbsp; └── tsconfig.json
</code></pre></div><h2 id="templatejson">template.json</h2>템플릿 프로젝트를 구성하기 위해 설치한 라이브러리들은 현재 <code>package.json</code> 파일안에 기록되어 있습니다. 이 내용들을 <code>template.json</code> 파일을 생성하고 해당 파일 안으로 옮길 필요가 있습니다.<code>template.json</code> 파일을 생성하고 다음과 같이 수정합니다.그리고 <code>package.json</code> 파일 안에서 커스텀화 한 부분을 잘라서 다음과 같이 <code>template.json</code> 파일안에 붙여 넣습니다.<div><pre><code>{
 "package": {
 "scripts": {
 ...
 },
 "dependencies": {
 ...
 },
 "devDependencies": {
 ...
 },
 "eslintConfig": {
 ...
 },
 "jest": {
 ...
 }
 }
}
</code></pre></div>저는 템플릿 프로젝트를 생성할 때, 특정 명령어(ex&gt; ESLint, Prettier 등)를 추가하였기 때문에 <code>package.json</code> 파일안에 <code>scripts</code>도 잘라서 붙여넣었습니다.또한, 개발에 필요한 라이브러리, 프로젝트를 구성하기 위해 여러 라이브러리를 설치하였으므로, <code>dependencies</code>와 <code>devDependencies</code>도 잘라서 붙여넣었습니다.마지막으로 <code>package.json</code> 파일안에 설정한 내용(<code>eslintConfig</code>와 <code>jest</code>)도 잘라서 붙여넣었습니다.이렇게 <code>template.json</code> 파일로 필요한 내용을 옮기고 나면 <code>package.json</code> 파일은 다음과 같은 내용이 남게 됩니다.<div><pre><code>{
 "name": "cra-template-deku",
 "version": "0.1.0",
 "private": true,
 "browserslist": {
 "production": [
 "&gt;0.2%",
 "not dead",
 "not op_mini all"
 ],
 "development": [
 "last 1 chrome version",
 "last 1 firefox version",
 "last 1 safari version"
 ]
 }
}
</code></pre></div>이제 파일 폴더 구조는 다음과 같은 형태를 가지게 됩니다.<div><pre><code>cra-template-deku
├── package.json
├── template
│&nbsp;&nbsp; ├── README.md
│&nbsp;&nbsp; ├── gitignore
│&nbsp;&nbsp; ├── public
│&nbsp;&nbsp; ├── src
│&nbsp;&nbsp; └── tsconfig.json
└── template.json
</code></pre></div><h2 id="테스트">테스트</h2>이것으로 <code>create-react-app</code>용 커스텀 템플릿 준비가 끝났습니다. 이제 이 템플릿이 정상적으로 동작하는지 확인할 필요가 있습니다.현재 작업중인 폴더 밖에서 다음 명령어를 실행하여 커스텀 템플릿이 잘 동작하는지 확인합니다.<div><pre><code>npx create-react-app [YOUR_REACT_PROJECT_NAME] --template file:./cra-template-deku
</code></pre></div>그럼 다음과 같이 프로젝트가 잘 생성되는 것을 확인할 수 있습니다.<div><pre><code>Creating a new React app in /projects/temp.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-deku...


added 1463 packages in 2m

242 packages are looking for funding
 run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...
npm WARN deprecated @babel/<a href="/cdn-cgi/l/email-protection" data-cfemail="b9c9d5ccded0d794c9cbd6c9d6cad8d594c9cbd0cfd8cddc94c9cbd6c9dccbcdc094d0d794d6dbd3dcdacdf98e978b88978888">[email&nbsp;protected]</a>: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.

added 1139 packages, and changed 4 packages in 2m

514 packages are looking for funding
 run `npm fund` for details

Removing template package using npm...


removed 1 package, and audited 2603 packages in 8s

514 packages are looking for funding
 run `npm fund` for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
 npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created temp at /projects/temp
Inside that directory, you can run several commands:

 npm start
 Starts the development server.

 npm run build
 Bundles the app into static files for production.

 npm test
 Starts the test runner.

 npm run eject
 Removes this tool and copies build dependencies, configuration files
 and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

 cd temp
 npm start

Happy hacking!
</code></pre></div>만약, 위와 같이 프로젝트가 제대로 생성되지 않고 에러가 발생한다면, 해당 에러를 해결할 필요가 있습니다. 해당 에러를 해결하지 않으면 커스텀 템플릿을 배포해도 제대로 동작하지 않게 됩니다.<h2 id="배포-준비">배포 준비</h2><code>create-react-app</code>용 커스텀 테플릿이 완성되었습니다. 이제 이 프로젝트를 <code>NPM</code>에 배포하여 사용할 수 있도록 할 필요가 있습니다.다음은 배포를 위한 파일들을 추가한 폴더 구조입니다.<div><pre><code>cra-template-deku
├── CHANGELOG.md
├── LICENSE
├── README.md
├── package.json
├── template
│&nbsp;&nbsp; ├── README.md
│&nbsp;&nbsp; ├── gitignore
│&nbsp;&nbsp; ├── public
│&nbsp;&nbsp; ├── src
│&nbsp;&nbsp; └── tsconfig.json
└── template.json
</code></pre></div>루트 폴더에 있는 <code>package.json</code>과 <code>README.md</code> 파일은 <code>NPM</code>에 배포하기 위한 파일입니다. <code>--template</code> 옵션으로 프로젝트를 생성할 때에는 이 내용들은 포함되지 않습니다.반대로 <code>template</code> 폴더안에 있는 <code>README.md</code> 파일은 <code>--template</code> 옵션으로 생성된 <code>React</code> 프로젝트에 포함되게 됩니다.<h2 id="배포">배포</h2>오픈소스를 <code>NPM</code>에 배포하는 방법에 대해서는 다음 블로그 포스트를 참고하시기 바랍니다.<ul><li><a href="https://deku.posstree.com/ko/share/deploy-npm-library/" target="_blank">NPM에 자신의 라이브러리 배포하기</a></li></ul><h2 id="완료">완료</h2>이것으로 <code>create-react-app</code>으로 <code>React</code> 프로젝트를 생성할 때, 사용할 수 있는 커스텀 템플릿을 생성하는 방법에 대해서 알아보았습니다. 여러분도 자신만의 템플릿을 제작하여 <code>create-react-app</code>으로 <code>React</code> 프로젝트를 생성할 때, 자신만의 템플릿을 활용해 보시기 바랍니다.<code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code><h2>앱 홍보</h2><div> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요. <code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다. 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</div><h2>책 홍보</h2></article></div>

dev-yakuza

나만의 create-react-app용 커스텀 템플릿을 제작하고 이를 활용하여 React 프로젝트를 생성해봅시다.