목차
개요
create-react-app을 사용하면 간단하게 React 프로젝트를 생성하는 것이 가능합니다. create-react-app은 --template 옵션을 제공하여 미리 제작된 템플릿을 활용할 수 있는 기능을 제공하고 있습니다.
create-react-app은 기본적으로 TypeScript용 템플릿을 제공하고 있습니다.
그래서 우리는 create-reat-app 명령어를 사용하여 다음과 같이 TypeScript가 적용된 React 프로젝트를 간단하게 생성할 수 있습니다.
npx create-react-app [YOUR_PROJECT_NAME] --template typescript
이번 블로그 포스트에서는 create-react-app의 템플릿 기능을 활용하여 나만의 템플릿을 만드는 방법에 대해서 알아보도록 하겠습니다.
- 공식 문서: Custom Templates
create-react-app 템플릿 프로젝트 생성
create-react-app의 템플릿을 만들기 위해서는 프로젝트를 생성할 때 cra-template- prefix를 붙여서 React 프로젝트를 생성할 필요가 있습니다.
npx create-react-app cra-template-[템플릿명]
저는 cra-template-deku라는 이름으로 프로젝트를 생성하였습니다.
npx create-react-app cra-template-deku
이렇게 생성한 템플릿 프로젝트는 NPM(Node Package Manager)에 배포할 예정입니다. 따라서 다음 명령어를 실행하여 중복된 이름의 패키지가 배포되었는지 확인합니다.
npm info cra-template-[템플릿명]
만약 다음과 같이 동일한 이름의 패키지가 이미 존재한다면, 다른 이름으로 프로젝트를 생성할 필요가 있습니다.
[email protected] | 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 <[email protected]>
dist-tags:
latest: 0.0.2
published yesterday by dev-yakuza <[email protected]>
만약 다음과 같이 404 에러가 나온다면, 해당 이름으로 프로젝트를 진행하면 됩니다.
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
React 프로젝트의 커스텀화
이렇게 생성된 프로젝트에 필요한 라이브러리를 설치하고, 예제 코드, 폴더 구조 등 자신이 원하는 스타일로 프로젝트를 구성합니다.
저는 다음과 같은 라이브러리를 설치하였습니다.
- React UI library: MUI, Emotion
- Component driven development: Storybook
- Calling API: Axios, React Query
- State management: Recoil
- Routing: React Router
- i18n: react-i18next
그리고 다음과 같이 폴더를 구성하였습니다.
cra-template-deku
├── public
├── src
│ ├── api
│ ├── components
│ │ ├── atoms
│ │ ├── molecules
│ │ ├── organisms
│ │ ├── pages
│ │ └── templates
│ ├── data
│ ├── locales
│ ├── types
│ ├── utils
│ └── ...
└── ...
package-lock.json 파일과 node_modules
템플릿 구성이 완료되었다면, 이제 불필요한 파일과 폴더를 삭제할 필요가 있습니다. package-lock.json와 node_modules 폴더는 더 이상 필요 없으므로 다음 명령어를 실행하여 삭제합니다.
rm -rf package-lock.json node_modules
template 폴더
현재 React 프로젝트를 템플릿으로 제공하기 위해서는 template 폴더를 생성하고 모든 파일, 폴더들을 이동 시킬 필요가 있습니다.
template 폴더를 만들고 package.json 파일 이외에 모든 내용을 해당 폴더로 이동 시킵니다. 그럼 템플릿 프로젝트는 다음과 같은 구조를 가지게 될 것입니다.
cra-template-deku
├── package.json
└── template
├── README.md
├── .gitignore
├── public
├── src
└── tsconfig.json
.gitignore
template 폴더안의 .gitignore 파일은 gitignore로 이름을 변경할 필요가 있습니다. 이름을 변경하지 않으면 해당 템플릿을 사용하여 프로젝트를 생성할 때, 다음과 같은 에러가 발생합니다.
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'
따라서 .gitignore 파일명에서 반드시 .을 제거한 gitignore로 변경해야 합니다.
cra-template-deku
├── package.json
└── template
├── README.md
├── gitignore
├── public
├── src
└── tsconfig.json
template.json
템플릿 프로젝트를 구성하기 위해 설치한 라이브러리들은 현재 package.json 파일안에 기록되어 있습니다. 이 내용들을 template.json 파일을 생성하고 해당 파일 안으로 옮길 필요가 있습니다.
template.json 파일을 생성하고 다음과 같이 수정합니다.
{
"package": {
}
}
그리고 package.json 파일 안에서 커스텀화 한 부분을 잘라서 다음과 같이 template.json 파일안에 붙여 넣습니다.
{
"package": {
"scripts": {
...
},
"dependencies": {
...
},
"devDependencies": {
...
},
"eslintConfig": {
...
},
"jest": {
...
}
}
}
저는 템플릿 프로젝트를 생성할 때, 특정 명령어(ex> ESLint, Prettier 등)를 추가하였기 때문에 package.json 파일안에 scripts도 잘라서 붙여넣었습니다.
또한, 개발에 필요한 라이브러리, 프로젝트를 구성하기 위해 여러 라이브러리를 설치하였으므로, dependencies와 devDependencies도 잘라서 붙여넣었습니다.
마지막으로 package.json 파일안에 설정한 내용(eslintConfig와 jest)도 잘라서 붙여넣었습니다.
이렇게 template.json 파일로 필요한 내용을 옮기고 나면 package.json 파일은 다음과 같은 내용이 남게 됩니다.
{
"name": "cra-template-deku",
"version": "0.1.0",
"private": true,
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
이제 파일 폴더 구조는 다음과 같은 형태를 가지게 됩니다.
cra-template-deku
├── package.json
├── template
│ ├── README.md
│ ├── gitignore
│ ├── public
│ ├── src
│ └── tsconfig.json
└── template.json
테스트
이것으로 create-react-app용 커스텀 템플릿 준비가 끝났습니다. 이제 이 템플릿이 정상적으로 동작하는지 확인할 필요가 있습니다.
현재 작업중인 폴더 밖에서 다음 명령어를 실행하여 커스텀 템플릿이 잘 동작하는지 확인합니다.
npx create-react-app [YOUR_REACT_PROJECT_NAME] --template file:./cra-template-deku
그럼 다음과 같이 프로젝트가 잘 생성되는 것을 확인할 수 있습니다.
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/[email protected]: 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!
만약, 위와 같이 프로젝트가 제대로 생성되지 않고 에러가 발생한다면, 해당 에러를 해결할 필요가 있습니다. 해당 에러를 해결하지 않으면 커스텀 템플릿을 배포해도 제대로 동작하지 않게 됩니다.
배포 준비
create-react-app용 커스텀 테플릿이 완성되었습니다. 이제 이 프로젝트를 NPM에 배포하여 사용할 수 있도록 할 필요가 있습니다.
다음은 배포를 위한 파일들을 추가한 폴더 구조입니다.
cra-template-deku
├── CHANGELOG.md
├── LICENSE
├── README.md
├── package.json
├── template
│ ├── README.md
│ ├── gitignore
│ ├── public
│ ├── src
│ └── tsconfig.json
└── template.json
루트 폴더에 있는 package.json과 README.md 파일은 NPM에 배포하기 위한 파일입니다. --template 옵션으로 프로젝트를 생성할 때에는 이 내용들은 포함되지 않습니다.
반대로 template 폴더안에 있는 README.md 파일은 --template 옵션으로 생성된 React 프로젝트에 포함되게 됩니다.
배포
오픈소스를 NPM에 배포하는 방법에 대해서는 다음 블로그 포스트를 참고하시기 바랍니다.
완료
이것으로 create-react-app으로 React 프로젝트를 생성할 때, 사용할 수 있는 커스텀 템플릿을 생성하는 방법에 대해서 알아보았습니다. 여러분도 자신만의 템플릿을 제작하여 create-react-app으로 React 프로젝트를 생성할 때, 자신만의 템플릿을 활용해 보시기 바랍니다.
제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!
앱 홍보
Deku가 개발한 앱을 한번 사용해보세요.Deku가 개발한 앱은 Flutter로 개발되었습니다.관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.
![[심통]현장에서 바로 써먹는 리액트 with 타입스크립트 : 리액트와 스토리북으로 배우는 컴포넌트 주도 개발, 심통](https://img1c.coupangcdn.com/image/affiliate/banner/7cba8cb0601eebaf88a17a0c3cf65a63@2x.jpg)