개요
개발을 진행하면서 반복적인 수작업을 줄이고, 작업 효율을 높이기 위해 자바스크립트 package.json의 scripts 섹션을 활용한 자동화를 고려할 수 있다. 이 문서는 프론트엔드 개발자들이 자신만의 작업 흐름을 프로세스화하고, 다양한 작업을 간소화할 수 있도록 하는 방법을 설명한다.
Scripts를 활용한 작업 자동화
package.json의 scripts 섹션을 사용하면 자주 사용하는 명령어들을 정의하고, 이를 간단한 명령어로 실행할 수 있다. 반복적인 작업을 효율적으로 처리하기 위해 빌드, 배포, 테스트, 코드 포맷팅 등 다양한 작업을 프로세스화할 수 있다.
스크립트 문법 및 명령어 설명
📌 스크립트 내 문법
- &&: 여러 명령어를 순차적으로 실행할 때 사용된다. 앞의 명령어가 성공적으로 완료되면 다음 명령어를 실행한다.
- --noinput: 사용자 입력을 요구하지 않고 명령어를 실행할 때 사용된다.
- 사용자 입력을 생략하고 기본 값을 사용해 명령어를 실행한다. 예를 들어, 파일 덮어쓰기 여부나 데이터베이스 초기화 시 사용자에게 확인을 요구하는 경우, 이 옵션을 사용하면 자동으로 'yes'와 같은 기본 선택으로 진행한다.
📌 터미널에서 스크립트 실행
- npm run [script-name]:
package.json의scripts섹션에 정의된 스크립트를 실행한다. 예를 들어npm run build는scripts에 정의된build명령어를 실행하는 것이다.
예시 상황
다음은 package.json의 scripts 섹션을 활용하여 다양한 작업을 자동화하는 예시들이다.
📌 빌드 및 정적 파일 반영 통합
웹팩을 사용하여 개발 모드에서 빌드를 수행한 뒤, Django의 collectstatic을 실행해 정적 파일을 반영하는 과정을 하나의 명령어로 통합할 수 있다.
{
"scripts": {
"build:dev": "webpack --mode development && docker compose exec main_web ./manage.py collectstatic --noinput"
}
}- 설명:
build:dev명령어는 개발 모드에서 webpack 빌드를 수행한 후, 자동으로 Django의collectstatic명령어를 실행하여 정적 파일을 서버에 반영한다.
📌 테스트와 빌드 통합
코드 수정 후 테스트를 먼저 실행하고, 테스트가 성공하면 빌드를 수행하는 작업을 자동화할 수 있다.
{
"scripts": {
"test-and-build": "npm run test && npm run build"
}
}- 설명:
test-and-build명령어는 테스트를 실행한 후 성공 시 빌드를 수행하여 코드가 정상적으로 동작하는지 확인하면서 빌드를 진행한다.
📌 코드 린트 및 포맷팅 자동화
코드 스타일을 유지하기 위해 린터와 포맷터를 통합하여 실행할 수 있다.
{
"scripts": {
"lint-and-format": "eslint . && prettier --write ."
}
}- 설명:
lint-and-format명령어는 ESLint로 코드 린트를 수행하고, Prettier로 코드를 포맷팅하여 코드 품질을 유지한다.
📌 서버 재시작 자동화
개발 서버를 자동으로 재시작하여 변경 사항을 실시간으로 반영하도록 설정할 수 있다.
{
"scripts": {
"restart-server": "docker compose restart main_web"
}
}- 설명:
restart-server명령어는 Docker Compose를 사용하여 서버를 재시작하고, 변경된 내용을 바로 반영할 수 있도록 한다.
📌 배포 전 테스트 및 빌드
실제 배포 전에 테스트와 빌드를 연속적으로 수행하여 안정성을 확보할 수 있다.
{
"scripts": {
"predeploy": "npm run test && npm run build"
}
}- 설명:
predeploy명령어는 배포 전에 테스트와 빌드를 수행하여 문제가 없는지 확인하고, 안정적인 배포가 가능하도록 한다.
📌 개발 환경 초기 설정 자동화
프로젝트를 처음 시작할 때 필요한 모든 초기 설정을 하나의 명령어로 처리할 수 있다.
{
"scripts": {
"setup": "npm install && npm run build && npm run lint-and-format"
}
}- 설명:
setup명령어는 프로젝트 초기 설정을 위한 모든 과정을 한 번에 처리하여, 새로운 개발 환경을 빠르게 구성할 수 있다.
결론
package.json의 scripts 섹션은 개발자들이 반복적인 작업을 자동화하고, 효율성을 높이는 데 매우 유용하다. 각자의 개발 환경에 맞게 스크립트를 정의하여 빌드, 배포, 테스트, 코드 포맷팅 등의 과정을 간소화할 수 있으며, 이를 통해 더 빠르고 효율적인 개발이 가능하다. 원하는 작업을 명령어 하나로 프로세스화하여 작업 흐름을 개선하고, 생산성을 극대화할 수 있다.
