CRA Custom Template 생성하기
React를 선택하여 프로젝트를 구성하고자 할 때 CRA (Create React App) 을 활용하면 쉽고 빠르게 React 프로젝트를 시작할 수 있습니다.
만약 typescript로 시작하는것을 원한다면 CRA에서 제공하는 typescript 용 템플릿을 사용하면 됩니다.
이와 더불어 CRA에서는 템플릿을 커스터마이징 하여 배포하는 기능을 제공하고 있어 필요한 설정을 한 뒤 템플릿을 통해 빠르게 해당 환경을 구성 할 수 있게 해줍니다.
이 글에서는 CRA (Create React App) custom template를 구성하는 방법에 대해서 소개하고자 합니다.
프로젝트 생성 및 설정
먼저 CRA 명령어를 사용하며 프로젝트를 생성합니다.
패키지 설치
템플릿에 포함될 패키지들을 설치해줍니다.
- type definition이 필요한 패키지의 경우 추가적으로 설치를 진행해줍니다.
Prettier, ESlint 설정
ESlint의 typescript 지원을 위해
@typescript-eslint/eslint-plugin , @typescript-eslint/parser 패키지를 추가했습니다.스타일 가이드로 airbnb를 적용하기 위해
eslint-config-airbnb 그리고 해당 패키지를 사용하기 위해 필요한 eslint-plugin-import , eslint-plugin-react , eslint-plugin-jsx-a11y , eslint-plugin-react-hooks 를 추가로 설치합니다.ESlint 설정
프로젝트 root 경로에
.eslintrc 파일 생성하고 내부 설정해줍니다.Prettier 설정
eslint와 마찬가지로 root 경로에
.prettierrc 를 생성하여 아래와 같이 작성합니다.custom template 설정
CRA 커스텀 템플릿을 설정하기 위해서는 CRA에서 생성한 기본 프로젝트의 구조를 변경해줄 필요가 있습니다.
template 폴더
template 폴더를 생성 src 및 .eslintrc , .prettierrc, tsconfig.json 을 전부 template 내부로 이동시켜줍니다.template.json 파일
root 경로에
template.json 파일을 생성하여, 템플릿에 필요한 패키지 의존성 및 스크립트를 작성합니다.package.json 수정
이제 아래와 같은 ㄱ
template 활용 프로젝트 생성
마지막으로 template을 활용하여 프로젝트를 생성해보도록 하겠습니다.
처음에 CRA 제공 typescript 템플릿을 활용하여 프로젝트를 생성했던 방법와 비슷하게 명령어를 입력하면 됩니다. 한 가지 달라지는 부분은
--template <name> 이 부분이 달라진다는 것입니다.file:/Users/yjlee/Documents/ts/cra-template/cra-template 경로를 입력해준 이유는 npm 에 배포하지 않은 상태에서 템플릿 활용 테스트를 진행해보기 위해서 입니다.명령어를 실행한 결과 프로젝트도 잘 생성이 되고 start 스크립트 실행 역시 정상적으로 작동하는 것을 확인 할 수 있습니다.
이렇게 템플릿 구성 및 생성 방법에 대해서 알아봤습니다. 부족하지만 도움이 되었으면 좋겠습니다.
다음 글에서는 해당 템플릿을 npm에 배포하는 방법에 대해서 알아보도록 하겠습니다.