npm run 자동화

npm run 을 치는게 귀찮다..

현재 프로젝트에서는

StoryBook + msw 를 사용중이다.

이것들을 모두 실행하려면?


npm run mock
npm run storybook
npm run dev

이렇게 긴 타이핑이 필요하다

또한 각각의 쉘에 로그가 뜨는것을 원하기 때문에

쉘을 하나하나 켜줘야한다.

팀원 모두가 타이핑하는 시간을 아낀다면 프로젝트에 집중할 시간이 길어지지 않을까?

위의 경우 타이핑하고 쉘을 키는데 나는 10~15초 정도 걸린다.

5초 이내에 해당 작업을 완료 할 수 있다면 5~10초를 아낄 수 있고,

현재 팀원이 4명이니, 한번 프로젝트를 실행하는데 15초로 가정하면 40초를 세이브할 수 있으며,

보통 쉘을 재실행하는 경우도 많기때문에 하루 5번정도로 쉘을 재시작한다고 가정하면

하루 3분 이상을 아낄 수 있다.

어떻게 해결해야할까?


"dev-all": "start /B npm run dev & start /B npm run storybook & start /B npm run mock"

단순히 모두 연결해서 실행하면 안될까..?

→ 콘솔에 storybook과 msw의 로그가 출력되지 않음.

방법1.

concurrently 라이브러리

npm: concurrently

Run commands concurrently. Latest version: 8.2.2, last published: 7 months ago. Start using concurrently in your project by running `npm i concurrently`. There are 1682 other projects in the npm registry using concurrently.

https://www.npmjs.com/package/concurrently


"scripts" : {
	"local": "concurrently \"next dev\" \"storybook dev -p 6006\" \"npx tsx watch ./src/mocks/http.ts\"",
}

이렇게하면 모든 명령어를 병렬로 실행할 수 있다.

하지만… ⇒한 쉘에서 병렬로 스크립트를 실행하기때문에 모든 로그가 하나의 쉘에 출력됨, (내가 원하는 방향은 아니다!)

이또한 장점이, 단점이 될 수 도 있음.

방법2.

start.ps1



Start-Process "powershell" -ArgumentList "npm run storybook"
Start-Process "powershell" -ArgumentList "npm run mock"
Start-Process "powershell" -ArgumentList "npm run dev"


"scripts" :  {
	"start-all": "powershell -File ./start.ps1"
}

조금 무식하지만 파워쉘 스크립트로 실행시키기,

외부 파워셸로 실행되기 때문에 단점일수도 장점일수도있음.

맥에서는 sh 파일로 만들어줘야함

방법3.

vscode task사용하기

vscode 환경에서만 동작한다는 단점.


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Next.js Dev Server",
      "type": "shell",
      "command": "npm run dev",
      "group": "build",
      "isBackground": true,
      "problemMatcher": []
    },
    {
      "label": "Storybook",
      "type": "shell",
      "command": "npm run storybook",
      "group": "build",
      "isBackground": true,
      "problemMatcher": []
    },
    {
      "label": "msw",
      "type": "shell",
      "command": "npm run mock",
      "group": "build",
      "isBackground": true,
      "problemMatcher": []
    },
    {
      "label": "Run All",
      "dependsOn": ["Next.js Dev Server", "Storybook", "TSX Watch"],
      "group": "build"
    }
  ]
}

위와같이 설정하면

ctrl+shift+p 를 입력후 task를 겁색

작업실행을 선택하고

runAll을 선택하면 각각의 쉘에서 모든 스크립트가 실행된다!!

하지만 이조차도 귀찮다!

아래처럼 설정하면 vscode의 키바인드를 연결해줄 수 있다고 하는데…


[
  {
    "key": "ctrl+alt+t",
    "command": "workbench.action.tasks.runTask",
    "args": "start servers",
    "when": "editorTextFocus"
  }
]

vscode 키바인드 설정이 제대로 동작하지 않는 문제가 있음 ㅠㅠ…

위의 방법중 파워쉘을 사용하는 방법과

vscode task를 사용하는 방법 둘다 병행해서 사용했는데 나름 장단점이 있는것같다.

powershell은 외부 독립적인 쉘에 실행되어서 다중 모니터 사용시 편한 부분이 존재하나

vscode하단에 쉘이 존재해 즉각적으로 확인하는 장점도 무시못한다!

결론.

프로젝트 초반이야 모두 실행해야하는 경우가 많았지만

프로젝트 중반에 들어서서 해당 명령어를 모두 실행하는 경우는 극히 드물어졌다…

당연하지만 뭔가 자동화를 할때는 이것을 만들어서 실제 아낄 수 있는 시간과 이것을 만드는데 소요되는시간을 잘 가늠해야한다..