커스텀 템플릿

기본 템플릿 대신 커스텀 템플릿 활용

cra-template-ko

기본 템플릿 대신, 사용자 정의 템플릿을 사용해 새로운 프로젝트를 구성 할 수도 있습니다.

npm: cra-template-konpm

이 프로젝트는 Create React App의 템플릿에 따라 제작 된 한국어 cra-template-ko 입니다.

커스텀 템플릿으로 프로젝트 생성

npx create-react-app <프로젝트_이름> --template ko

CRA 커스텀 템플릿 이름은 cra-template- 접두사로 시작하지만, 템플릿 이름만으로도 설치가 가능합니다.

추가된 항목

기본 템플릿 cra-template에 추가된 항목입니다.

• sass 패키지 추가

• classnames 패키지 추가

• serve 패키지 및 빌드 실행 명령 추가

• jsconfig.json 절대 경로 및 Webpack 별칭(alias) 설정

• Browserslist 배포(production) 한국(KR) 환경으로 수정 및 IE 11 이상 지원 설정

템플릿 구조

커스텀 템플릿 구조는 GitHub 저장소에서 자세히 살펴볼 수 있습니다.

.
├── template/ # 템플릿 디렉토리
│   ├── public/ # 정적 에셋 디렉토리
│   │   ├── assets/ # 정적 자산 관리
│   │   │   ├── favicon.png
│   │   │   ├── logo192.png
│   │   │   ├── logo512.png
│   │   │   └── og-image.jpg
│   │   ├── index.html # 스태틱 엔트리 파일
│   │   ├── manifest.json
│   │   └── robots.txt
│   ├── src/ # 프로젝트 소스 디렉토리
│   │   ├── app/ # 앱 컴포넌트 디렉토리
│   │   │   ├── App.css
│   │   │   ├── App.js
│   │   │   └── App.test.js
│   │   ├── assets/ # 동적 자산 디렉토리
│   │   │   └── logo.svg
│   │   ├── components/ # 컴포넌트 디렉토리
│   │   │   └── empty
│   │   ├── containers/ # 컨테이너 디렉토리
│   │   │   └── empty
│   │   ├── styles/ # 스타일 디렉토리
│   │   │   ├── common.module.css
│   │   │   ├── custom-reset.css
│   │   │   └── index.css
│   │   ├── index.js # 엔트리 파일
│   │   ├── reportWebVitals.js
│   │   └── setupTests.js
│   ├── README.md
│   ├── gitignore
│   ├── jsconfig.json # jsconfig 구성 파일
│   ├── package-lock.json
│   └── package.json # 패키지 관리 파일
├── README.md
├── package.json # 템플릿 패키지 관리 파일
└── template.json # 템플릿 구성 파일

커스텀 템플릿

커스텀 템플릿(Custom Templates)을 사용하면 Create React App의 모든 기능 위에 프로젝트에 필요한 도구를 추가한 템플릿을 만들어 활용할 수 있습니다. 공식적으로 지원하는 기본 템플릿은 2가지이지만, NPM에서 검색하면 매우 다양한 커스텀 템플릿이 검색 될 정도로 만들기 쉽고 여러 곳에서 커스텀 템플릿이 사용됩니다.

템플릿 구성

템플릿을 만들기 위한 구조는 다음과 같습니다. 템플릿 디렉토리에 기본적으로 다음의 파일이 필요합니다. (참고)

cra-template-[템플릿-이름]/

template/ # 템플릿 디렉토리
├── public/ # 정적 에셋 디렉토리
│   └── index.html # 스태틱 엔트리 파일
├── src/ # 프로젝트 소스 디렉토리
│   └── index.js # 엔트리 파일 (또는 index.tsx)
├── README.md # NPM 용 
├── gitignore
└── package.json # 패키지 관리 파일

디렉토리 / 파일	설명
template	Create React App이 설치 될 때 사용자의 앱 디렉토리에 복사됩니다.
template.json	템플릿의 구성 파일입니다. package 키를 사용하면 package.json 템플릿 종속성, NPM 스크립트 등 새 프로젝트에 추가 하려는 모든 키/값을 제공 할 수 있습니다 .

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"]
    }
  }
}

template.json 파일의 dependencies, scripts 항목에 추가한 모든 값들은 Create Rect App의 기본 설정과 병합되며 Create React App 기본 값과 일치하는 모든 값은 대체됩니다.

템플릿 테스트

템플릿을 로컬에서 테스트하려면 file: 접두사 뒤에 템플릿 디렉토리 파일 경로를 전달합니다.

npx create-react-app <테스트> --template file:../cra-template-[템플릿-이름]

NPM 회원가입/로그인

NPM에 커스텀 템플릿 패키지를 배포하려면 먼저 가입한 후, 이메일 인증을 받아야 합니다. 이미 가입, 인증 완료 된 사용자라면 로그인 하여 커스템 템플릿 루트 위치에서 다음 명령을 실행해 배포할 수 있습니다. (참고)

NPM 명령어

npm whoami  # 로그인 여부 확인
npm login   # 로그인 | 로그오프 npm logout

NPM 패키지 버전 관리

배포 할 때는 시멘틱 버전(Semantic Versioning)을 참고한 후 업데이트 합니다. 다음의 NPM 명령을 사용하면 손쉽게 버전을 업데이트 할 수 있습니다. ( patch ▸ minor ▸ major )

npm version patch # 0.0.1 +
npm version minor # 0.1.0 +
npm version major # 1.0.0 +

NPM 패키지 배포

publish NPM 명령을 사용해 패키지를 배포합니다.

npm publish # 패키지 모듈 배포

배포에 성공하면 잠시 뒤 NPM 사이트에 올라간 커스텀 템플릿 모듈 페이지를 확인할 수 있습니다.