create-danver-app 으로 초기 설정 시간 단축

들어가며

내 목표는 여러 개의 서비스를 빠르게 만들고, 그중 사용자 반응이 좋은 서비스에 집중하는 것이다. 그러나 매번 새 프로젝트를 시작할 때마다 초기 설정 과정에 많은 시간을 소모하고 있었다. 반복되는 작업의 비효율을 줄이고자 create-danver-app을 만들게 되었다.

아이디어는 create-react-app에서 얻었다. 하나의 명령어로 프로젝트의 초기 환경 설정을 간편하게 마칠 수 있다는 점에서 큰 효율성을 느꼈으며, 이를 내 프로젝트에도 적용하여 생산성을 높이고자 했다.

구현 계획

react, go 등 템플릿 이름을 활용해 다양한 프로젝트 템플릿을 손쉽게 선택하고 설치할 수 있도록 지원한다.
react 템플릿의 기본 환경은 React, Vite, TailwindCSS, TypeScript로 구성한다.
배포 방식으로는 react는 Cloudflare Pages를 이용하며, go는 개인 Harbor 레지스트리에 Docker 이미지를 올리고, GitHub Actions 및 Docker Swarm으로 배포한다.
프로젝트의 표준 폴더 구조를 사전에 제공한다.
초기 테스트를 위한 샘플 API 및 페이지를 포함한다.
손쉬운 자동 배포를 위한 기본 배포 스크립트를 제공한다. 공개 프로젝트의 특성상 보안 관리를 위해 secret 값은 .env 파일에 키(KEY)만 미리 생성한다.

표준 API 응답(response) 타입을 미리 지정한다.

{
  "status": "success",
  "error": null,
  "data": {}
}

기본적인 .gitignore 파일을 제공하여 불필요한 파일이 Git에 올라가지 않도록 관리한다.

진행 과정

새 디렉토리 생성

mkdir create-danver-app
cd create-danver-app

Node.js 초기화
```
npm init -y
```
- -y 옵션을 통해 기본값으로 package.json을 생성한다.
필요한 패키지 설치
```
npm install commander fs-extra
```

템플릿 폴더에 복사할 파일을 저장

템플릿 폴더에 있는 파일들이 그대로 복사되는 구조이기 때문에, 이후에는 각 템플릿을 구성하면 마무리된다. 아래는 디렉토리 구조이다.

create-danver-app
├── package.json
├── index.js              
└── templates
    ├── go-template  # Go 템플릿
    │   ├── main.go
    │   └── ...              
    └── react-template # React 템플릿
        ├── package.json
        ├── public
        └── src
            └── ...

로컬 테스트 설정
- package.json에 다음 내용을 추가하고 npm link 명령어를 실행하여 로컬 환경에서 바로 명령어를 테스트할 수 있다.
```
"bin": {
  "create-danver-app": "./index.js"
}
```

모든 코드는 공개되어 있습니다. 이해하기 어려운 내용이 있으면 Github에서 코드를 확인할 수 있습니다.

npm 저장소 링크도 함께 공유합니다.

기타 메모

npm install create-danver-app은 패키지를 로컬에 영구적으로 설치하는 방식이지만, npx create-danver-app은 임시 디렉토리에 설치하여 사용 후 자동 삭제하는 방식으로, 패키지 관리 부담을 덜어준다.
npm은 public 저장소는 무료로 제공하나, private 저장소 사용 시 비용이 발생하므로 프로젝트의 공개 여부와 비용을 고려해 관리 방식을 결정할 필요가 있다.

들어가며

구현 계획

진행 과정

기타 메모

댓글