[네이버 부스트캠프] 단일 레포지토리에서 스크립트 관리 하기

단일 레포지토리에서의 효율적인 스크립트 관리: 백엔드와 프론트엔드 통합

들어가며

최근 네이버 부스트캠프에서 진행한 프로젝트에서 백엔드와 프론트엔드를 하나의 레포지토리에서 관리하게 되었습니다. 이 과정에서 package.json의 스크립트 관리에 대한 고민이 생겼고, 이를 효율적으로 구성하는 방법에 대해 알아보았습니다. 이 글에서는 제가 찾은 해결책과 그 과정에서 얻은 인사이트를 공유하고자 합니다.

프로젝트 구조

먼저, 제 프로젝트의 폴더 구조는 다음과 같습니다:

📦src
 ┣ 📂backend
 ┃ ┗ 📜app.js
 ┗ 📂frontend
   ┣ 📂core
   ┃ ┗ 📜framework.js
   ┣ 📜App.js
   ┣ 📜index.html
   ┗ 📜index.js

이 구조는 백엔드와 프론트엔드 코드가 하나의 src 디렉토리 안에 함께 위치하고 있습니다. 이런 구조에서 효율적인 스크립트 관리가 필요했습니다.

스크립트 관리 전략

1. 명명 규칙

스크립트의 이름을 지을 때, 다음과 같은 형식을 따르기로 했습니다:

[동작]:[대상]

예를 들면:

• start:frontend
• start:backend
• build:frontend
• build:backend

이 규칙을 통해 각 스크립트의 목적과 대상을 명확히 알 수 있습니다.

Conventional Scripts

스크립트 작성 규칙에 대해 더 자세히 알아보던 중, Conventional Scripts라는 흥미로운 자료를 발견했습니다. 이 사이트는 npm 스크립트 작성에 대한 표준화된 규칙을 제안하고 있어, 제 스크립트 구성에 큰 도움이 되었습니다.

Conventional Scripts에서 제안하는 주요 규칙은 다음과 같습니다:

1. 기본 스크립트: start, build, test, lint 등의 기본적인 스크립트 이름 사용
2. 복합 스크립트: 여러 작업을 연결할 때는 :를 사용 (예: lint:fix)
3. 병렬 실행: 병렬로 실행되는 스크립트는 :로 구분 (예: test:unit:watch)
4. 환경 구분: 개발, 스테이징, 프로덕션 환경을 구분할 때는 :를 사용 (예: start:prod)

이러한 규칙을 참고하여 제 프로젝트의 스크립트를 더욱 체계적으로 구성할 수 있었습니다.

2. package.json 구성

프로젝트 루트의 package.json에 다음과 같이 스크립트를 구성했습니다:

{
  "scripts": {
    "start": "npm-run-all --parallel start:frontend start:backend",
    "start:frontend": "cd src/frontend && node index.js",
    "start:backend": "node src/backend/app.js",
    "build": "npm-run-all build:frontend build:backend",
    "build:frontend": "cd src/frontend && npm run build",
    "build:backend": "cd src/backend && npm run build",
    "test": "npm-run-all test:frontend test:backend",
    "test:frontend": "cd src/frontend && npm test",
    "test:backend": "cd src/backend && npm test",
    "lint": "npm-run-all lint:frontend lint:backend",
    "lint:frontend": "cd src/frontend && npm run lint",
    "lint:backend": "cd src/backend && npm run lint"
  }
}

이 구성은 Conventional Scripts의 권장사항을 따르면서도, 제 프로젝트의 특성에 맞게 조정할 수 있었습니다. 

3. 스크립트 실행 방법

이렇게 구성된 스크립트는 다음과 같이 실행할 수 있습니다:

1. 전체 애플리케이션 실행: npm run start
2. 프론트엔드만 실행: npm run start:frontend
3. 백엔드만 실행: npm run start:backend
4. 전체 빌드: npm run build
5. 프론트엔드 테스트: npm run test:frontend
6. 전체 린트 검사: npm run lint

장점

1. 명확성: 각 스크립트의 목적과 대상이 이름만으로도 명확히 드러납니다.
2. 유연성: 전체 애플리케이션을 한 번에 실행하거나, 필요에 따라 일부만 실행할 수 있습니다.
3. 일관성: 프로젝트 전반에 걸쳐 통일된 명명 규칙을 사용합니다.
4. 확장성: 새로운 기능이나 모듈이 추가되어도 같은 패턴으로 쉽게 스크립트를 추가할 수 있습니다.
5. 표준화: Conventional Scripts를 참고함으로써 업계 표준에 가까운 방식으로 스크립트를 구성할 수 있었습니다.

주의사항

1. 복잡성 관리: 프로젝트가 커질수록 스크립트의 수가 늘어날 수 있습니다. 필요한 경우 스크립트를 그룹화하거나 문서화할 필요가 있습니다. 
2. 의존성 관리: 백엔드와 프론트엔드의 의존성을 명확히 구분하고 관리해야 합니다.
3. 환경 설정: 개발, 테스트, 프로덕션 환경에 따라 다른 설정이 필요할 수 있으므로, 환경별 스크립트를 추가로 구성하는 것도 고려해볼 만합니다.

결론

단일 레포지토리에서 백엔드와 프론트엔드를 함께 관리할 때, 효율적인 스크립트 관리는 개발 생산성을 크게 향상시킬 수 있다고 생각합니다. Conventional Scripts와 같은 표준화된 가이드라인을 참고하면서, 프로젝트의 특성에 맞게 스크립트를 구성하는 것이 중요합니다.

이 글에서 소개한 방식은 중소규모 프로젝트에 적합하며, 프로젝트의 특성과 팀의 요구사항에 맞게 조정하여 사용할 수 있습니다. 앞으로 프로젝트가 더 복잡해지거나 규모가 커진다면, 모노레포 도구(예: Lerna, Nx)의 도입을 고려해볼 수 있을 것 같습니다. 하지만 현재 구조에서도 이런 스크립트 관리 방식으로 작성을 한다면 이전에 비해서 좀 더 명확하게 파악이 가능한 것 같습니다.