[React] Create React App에서 제공하는 Custom Templates 활용하기

CRA에서 제공하는 Custom Templates으로 나만의 템플릿 만들기 

 

Create-react-app에서는 사용자 정의 템플릿을 사용하여 CRA의 기능을 유지하면서 템플릿을 제작할 수 있는 서비스를 제공하고 있다. 

사용자가 원하는 형태로 제작할 수 있기 때문에 npm 사이트에 cra-template을 이를 활용한 다양한 템플릿을 볼 수 있다. 

자신이 잘 사용하는 리액트 폴더 구조가 있다면 템플릿을 직접 제작하여 사용하는 것도 좋은 방법이고, 또는 다양한 기능을 만들어 오픈 소스로 활용할 수도 있다.

---

📎 생성 방법

1. create-react-app으로 새 프로젝트를 생성한다.

npx create-react-app cra-template-폴더명

⚠️ 이 때 cra-template으로 프로젝트 이름이 시작해야 적용되기 때문에 꼭 붙여줘야 한다.

 

2. 원하는 형태로 폴더를 구성한다. 

my-app
 ┣ node_modules
 ┃ ┗ ...
 ┣ public
 ┃ ┗ index.html
 ┣ src
 ┃ ┣ App.js
 ┃ ┗ index.js
 ┣ README.md
 ┣ package-lock.json
 ┗ package.json

나는 이러한 형태로 폴더 구조를 만들었다. 

불필요한 요소는 제외하고 기본 파일만 설정하여 편리하게 리액트를 시작할 수 있도록!

 

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

// template.json 
{
  "package": {
    "dependencies": {
      "eslint-plugin-jsx-a11y": "^6.2.3",
      "serve": "^11.2.0"
    },
    "scripts": {
      "serve": "serve -s build",
      "build-and-serve": "npm run build && npm run serve"
    },
    "eslintConfig": {
      "extends": ["react-app", "plugin:jsx-a11y/recommended"],
      "plugins": ["jsx-a11y"]
    }
  }
}

package.json에 있는 "dependencies", "devDependencies", "scripts","config"를 복사해서 template.json에 붙여주면 된다.

위에는 공식 문서에 있는 예시이기 때문에 필요에 따라 수정하면 된다.

 

 

4. template 폴더를 생성한다. 

💡 이 때 template 폴더와 template.json은 프로젝트 루트에 위치하고 있어야 한다. 

cra-template-basic-react
 ┣ template
 ┃ ┣ public
 ┃ ┃ ┗ index.html
 ┃ ┣ src
 ┃ ┃ ┣ App.js
 ┃ ┃ ┗ index.js
 ┃ ┣ README.md
 ┃ ┗ gitignore
 ┣ README.md
 ┣ package.json
 ┗ template.json

내가 만든 템플릿은 이러한 구조를 가지고 있다.

template 내부에 있는 폴더가 사용자들이 이 템플릿을 설치했을 때 만나는 폴더 구조!

 

5. gitignore 파일 생성

위 폴더 구조에서 보면 .gitignore에서 .(dot)이 빠진 gitignore로 되어있는 것을 볼 수 있다.

그냥 원래 있던 .gitignore의 위치만 바꾸고 .(dot)만 제거해주면 간편하게 완료!!

---

여기까지 했다면 이제 프로젝트는 끝났고 배포만 하면 나의 템플릿이 npm에 게시된다.

 

6. npm 회원가입하기

일단 본인이 만든 템플릿을 게시하기 전 npmjs에서 회원가입부터 호다닥...

회원가입 되어있는 상태라면 바로 다음 단계로 넘어가면 된다.

 

7. 터미널에서 npm 로그인하기

npm login

vscode를 쓰고있었다면 control+`로 터미널을 열거나 폴더 자체로 터미널을 들어간 후, 위 명령어를 치면 된다.

- username : 등록한 닉네임
- password : 비밀번호 (입력 시, 입력이 안되는 것 같지만 입력되고 있는 중이니 계속 입력하면 된다)
- email : 이메일
- authenticator : 이메일 주소로 온 인증번호 입력 

이렇게 순서대로 입력 후 로그인 완료 메시지가 뜨면 배포하면 끝!

 

8. npm에 배포하기

npm publish --access public

위 명령어를 치면 배포가 진행된다.

만약 재배포를 할 것이라면 꼭 package.json에서 버전을 바꿔서 배포해야 한다.

배포 성공 명령어가 뜨면 끝!

 

설치할 때는 아래 명령어로 설치하면 된다.

npx create-react-app 폴더명 --template 템플릿명

CRA 활용하여 나만의 템플릿 만들기 끝! 

 

✌️ 이것은 내가 만든 Custom Templates