나는 매번 리액트 프로젝트를 생성할 때마다 쓸모 없는 파일들을 지우는게 너무나도 귀찮았다 진짜 매우
그래서 좋은 방법이 없을까 떠올랐다.
npx create-react-app ... 을 했을때 쓸모 없는 파일들이 없어진채로 나타날 수 있을까, 그런 형식이 존재한다면 받아오고 만들고 배포할 수 있는게 있지 않을까

찾아보던중 공식문서가 존재했다.

https://create-react-app.dev/docs/custom-templates/

이 문서에 의하면 커스텀 템플릿을 통하여 프로젝트를 다운받을 수 도 있고, 내가 직접 배포할 수 도 있고, 배포하기 위해서 어떤 형식 파일구조를 만들어놔야하는지 적혀있다!

Ceate React App 이란 ?

약자로 CRA라고도 불리며 리액트를 설치할때 사용하는 명령어이다. 이를 커스텀하여 환경셋팅에 걸리는 시간과 자원을 절약할 수 있다!

1. 커스텀 템플릿을 만들기 위한 CRA 프로젝트 생성하기

CRA 커스텀 템플릿을 만들기 위해선 조건이 있다.

npx create-react-app cra-template-[템플릿명]

cra-template-[템플릿명]이라는 이름으로 프로젝트를 설치한다.
cra-template가 붙는 것이 특징이며, 이후 커스텀 시작이다!
cra-template- 접두어를 붙여줘야 CRA 템플릿이라는걸 알 수 있다.

2. 프로젝트 커스텀하기

공식문서에 의하면 다음과 같은 파일구조가 있어야한다

저는 public 폴더 안에 index.html만,
src 폴더 안에 app.js, index.js만 남기고 다른 파일들은 모두 삭제했습니다.

그리고 자주 쓰는 모듈인 styled-components,react-router-dom,axios 모듈을 설치했습니다.

이후 과정은 https://sypear.tistory.com/51 링크를 보며 따라했습니다.

로컬 테스트하기

npx create-react-app [프로젝트명] --template file:/[cra-template-폴더의_경로]

이코드를 이용하면 배포하기 전에 정상적으로 작동하는지 테스트가 가능하다.

npm에 모듈 배포하기

우선 npm에 로그인을 해주고,

npm login

로그인 중에 one-time password를 입력하라고 뜨는데, OTP는 이메일로 옵니다.

아래와 같이 뜨면 로그인이 된거다.

Logged in as 유저네임 on https://registry.npmjs.org/.

public으로 모듈을 배포하기 위해 아래와 같이 명령어를 입력했습니다.

npm publish --access public

이때 이런 에러 메시지가 뜬다면 package.json에 "private": true 설정 값을 제거해주면 됩니다.

npm ERR! code EPRIVATE
npm ERR! This package has been marked as private
npm ERR! Remove the 'private' field from the package.json to publish it.

에러 메시지가 뜨지 않고 아래와 같은 메시지가 떴다면 배포 성공입니다! 🎉

npm notice Publishing to https://registry.npmjs.org/

배포한 모듈 다운로드 받기

공식문서에 따르면 커스텀 템플릿 모듈을 다운로드 받은 명령어는 아래와 같습니다.

npx create-react-app [프로젝트명] --template [템플릿명]

이때 템플릿명에는 cra-template-이 빠져야 한다는 것을 주의해야 합니다.

만약 처음에 만들었던 프로젝트명이 cra-template-apple이라면 apple만 입력해야 합니다.

---

실제 테스트 장면

저는 저만의 프로젝트 환경을 세팅하고 jodan 이름으로 템플릿을 배포했습니다.

을 입력하면 나만의 템플릿이 설치됩니다. ( jodan이라는 템플릿 이름으로 jodantest 프로젝트이름을 생성하겠다!)

설치가 성공적으로 이루어진 모습.

index.css파일 하나 안지웠다고 에러가 나네요. ( 깜빡했다;;;;;)

index.css파일 하나만 지우면 정삭적으로 작동되는 모습.
지우고 다시 재배포를 해야한다!

jodan_v2 라는 이름으로 템플릿을 다시 만들고, 수정 한 후, jodan_v2라는 이름으로 배포하였다!

잘되는 것을 볼 수 있다.

추후에 파일구조와 ESLint, Prettier을 적용한 템플릿으로 업데이트할 예정이다

---

2023/10/06 jodan_v3 으로 업데이트 : 파일구조 생성
2023/10/06 jodan_v5 으로 업데이트 :
.eslintrc.json
.prettierrc.json
파일 추가하여 ESLint, Prettier 추가완료.

npm install eslint
npm install -g -E prettier
npm install -D eslint-config-prettier
npm install -D eslint-plugin-prettier

입력후 이용하면 됌!!
이후 간단한 에러를 수정하는 작업을 거친 후 시작!

실제 npm에 등록된 사진

참고자료:
https://create-react-app.dev/docs/custom-templates/
https://sypear.tistory.com/51
https://mesh.dev/front-end-engineering/cra-custom-template