목차

• 개요
• create-react-app 템플릿 프로젝트 생성
• React 프로젝트의 커스텀화
• package-lock.json 파일과 node_modules
• template 폴더
• gitignore
• template.json
• 테스트
• 배포 준비
• 배포
• 완료

개요

create-react-app을 사용하면 간단하게 React 프로젝트를 생성하는 것이 가능합니다. create-react-app은 --template 옵션을 제공하여 미리 제작된 템플릿을 활용할 수 있는 기능을 제공하고 있습니다.

create-react-app은 기본적으로 TypeScript용 템플릿을 제공하고 있습니다.

• cra-template-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에 배포하는 방법에 대해서는 다음 블로그 포스트를 참고하시기 바랍니다.

• NPM에 자신의 라이브러리 배포하기

완료

이것으로 create-react-app으로 React 프로젝트를 생성할 때, 사용할 수 있는 커스텀 템플릿을 생성하는 방법에 대해서 알아보았습니다. 여러분도 자신만의 템플릿을 제작하여 create-react-app으로 React 프로젝트를 생성할 때, 자신만의 템플릿을 활용해 보시기 바랍니다.

Github Sponsor Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

지금 보고 계신 블로그를 작성하는 Deku가 개발한 앱을 한번 사용해보세요.
Deku가 개발한 앱은 Flutter로 개발되었습니다.

관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.

어린이용 단어 공부 앱

블라부

세상의 모든 정보를 모아보다

씨로그

JLPT 일본어 단어앱

일단 공부

토익 영어 단어앱

토익 단어앱

중고등 영어 단어앱

중고등 영단어앱

HSK 중국어 단어앱

중국어 단어앱

독일어 단어앱

독일어 단어장

러시아어 단어앱

러시아어 단어장

아랍어 단어앱

아랍어 단어장

인도네시아 단어앱

인도네시아 단어장

프랑스어 단어앱

프랑스어 단어장

스페인어 단어앱

스페인어 단어장

책 홍보

블로그를 운영하면서 좋은 기회가 생겨 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

• 쿠팡: 구매하기
• yes24: 구매하기
• 교보문고: 구매하기
• 알라딘: 구매하기

• 쿠팡: 구매하기
• yes24: 구매하기
• 교보문고: 구매하기
• 알라딘: 구매하기

• 쿠팡: 구매하기
• yes24: 구매하기
• 교보문고: 구매하기
• 알라딘: 구매하기