나만의 react boilerplate 만들기 - (2) npx, 배포

기존에는 개발환경을 구성하기 위해서 react-boilerplate 리포지토리를 클론하고 .git파일을 삭제해야 했다. 너무 번거로운 작업이라 CRA처럼 npx fe-jhw-create-react-app 명령어 1줄 입력으로 개발환경 구성이 가능하게 만들었다.

패키지 주소: https://www.npmjs.com/package/fe-jhw-create-react-app

명령어: npx fe-jhw-create-react-app [project name]

참고한 글: https://velog.io/@jjunyjjuny/React-TS-boilerplate-%EC%A0%9C%EC%9E%91%EA%B8%B0-%EB%B0%B0%ED%8F%AC-%EB%B0%8F-npx

왜 npx?

npx를 사용하면 최신버전 패키지를 설치해서 실행하고, 삭제해준다.

개발환경 구성 파일은 작업이 끝나면 내 컴퓨터에 남아있을 필요가 없기 때문에 npx가 적합하다

설치 패키지 만들기

// package.json
{
    ///생략
    "name": "fe-jhw-create-react-app",
    "bin": {
      "fe-jhw-create-react-app": "./bin/generate-app.js"  
    },
}

package.json에 bin속성을 활용해서 설치 javascript를 install후 실행되게 한다.

bin 디렉토리와 bin 속성

npm install [모듈]시에 모듈이 설치되고 해당 모듈은 binary 파일로 컴파일되어서 node_modules/[모듈]/bin 디렉토리에 생긴다.

package.json의 bin 속성에 "[패키지 이름]": "[실행 파일 위치]" 이렇게 해주면, npm이 바이너리 실행파일로 자동으로 만들어서 node_modules/bin에 복사해둔다.

npx 명령어 입력시 npm install로 설치하고, 자동으로 실행파일을 실행을 시킨다.

generate-app.js

node를 다룰 줄 몰라서 참고한 글에서 스크립트 전체를 가져왔다.

큰 로직은 다음과 같다.

1. 프로젝트 디렉토리 생성
2. 내 react-boilerplate의 github 리포지토리를 clone
3. yarn install해서 의존성 설치
4. .git 파일을 삭제

아쉬운 점

• 내 react-boilerplate는 husky, git hook을 활용해서 커밋전에 자동으로 린트를 실행한다. 이 떄 문제는 git init이 안되있는 상태이기 때문에 npx fe-jhw-create-react-app후에 yarn dev를 하면, 프리커밋 훅 동작에서 에러가 발생한다. 그래서 git init과 빈 commit을 생성해줘야 한다. 이 2가지를 generate-app.js에 넣으면, git을 강제적으로 사용해야 해서 가볍게 cra를 사용하고 싶은 사람들이 사용할 수 없게 된다. --> 그래서 프리커밋훅 관련 부분은 제거할 예정이다.