custom CRA 템플릿 만들기

프로젝트를 생성할 때마다 자주 사용하는 의존성 패키지들이 있다.

매번 일일이 설치하는 게 귀찮아서 한 번에 해줄 수 있는 방법을 찾다가 CRA(Create-React-App) 템플릿을 직접 만들 수 있다는 정보를 발견하고 바로 만들어보기로 했다. 매번 라이브러리의 공식문서를 찾아보고 설치하는 과정도 귀찮고, cra로 프로젝트를 처음 만들면 불필요한 코드들(ex: css, logo 등)이 많이 포함되는 것도 아쉬웠다.

내가 자주 설치하는 의존성들은 아래와 같다

• typescript
• mui(material ui)
• react-router-dom

이제 템플릿 만드는 방법을 알아보자. 잘게 나누면 총 6단계로 나눌 수 있다.

1. CRA로 프로젝트 생성
2. 의존성 설치
3. template 폴더 생성
4. template.json 파일 생성
5. 메타데이터 작성
6. 배포

1. 먼저 CRA로 리액트 프로젝트를 만든다.

• 이 때 프로젝트 명을 cra-teamplate-[템플릿명]과 같이 작성한다.
  • npx create-react-app create-template-yuni --template typescript
• 난 타입스크립트가 포함된 템플릿으로 프로젝트를 만들었다.
  
  
  
  

2. 자주 하는 설정들을 해준다.

• 의존성 모듈들을 설치하고, 예제 코드를 작성한다.
  
  
  
  

3. 프로젝트 루트 디렉토리에 template 폴더를 만들고 src, public폴더와 여러 설정파일들을 옮긴다.

• gitignore을 복사해 template 폴더 하위에 넣는다.
  
  
  
  

4. template.json 파일을 생성한다.

• package.json의 dependencies, scripts, config들을 복붙한다.
• package 키 밑에 복사한 내용들을 복붙한다.

• 

• 최종 폴더 구조는 아래 그림과 같이 된다.
• 

5. 메타 데이터 작성

• package.json
  • packge.json에 원하는 템플릿 명을 작성한다.
  • 이 때 다른 사람이 이미 올린 템플릿과 이름이 겹치면 배포할 때 에러가 나니 기억하자.
  • "private": false 설정을 true로 바꾸자.
• LICENSE
• README
  • 프로젝트 루트에 있는 README.md가 npm 홈페이지의 설명부분에 들어간다.
    
    
    
    

6. 이제 배포를 하면 된다.

• npm에 로그인한다.
• npm publish를 통해 배포한다.
• 템플릿 명으로 리액트 프로젝트를 만듨 수 있다.

npm login  
npm publish --access public
npx create-react-app --template [템플릿명] # create-react-XXX에서 XXX부분

• 

• 
  
  
  
  

배포 성공 메시지가 뜨면 npm 사이트에 들어가서 내 프로젝트가 제대로 배포되었는지 확인해볼 수 있다.

• 내가 만든 템플릿 https://www.npmjs.com/package/cra-template-yuni
• 테스트용으로 만든거라 이름이 이상한데, 이제 리드미랑 이름을 좀 수정해서 다시 올려야겠다.
• 
• 참고 자료 https://create-react-app.dev/docs/custom-templates/