서론

react 작업 시 client와 server의 서버를 각각 실행해야 하는 불편함이 있었습니다. 당연히 저만 느낀 불편함이 아니었기 때문에 해결하는 방법이 나와있었으며 추후에 다시 살펴볼 수 있도록 해당 글에 정리했습니다.

---

nodemon

기존 방식대로 node를 사용해 node index.js와 같이 서버를 실행할 경우 해당 코드가 변경될 시 서버를 종료한 뒤 다시 실행해야 하는 불편함이 있습니다. nodemon을 사용할 경우 코드에 변경이 있을 때마다 서버를 자동으로 다시 실행해줍니다.

설치

nodemon같은 경우에는 온 누리를 널리 이롭게 하기 때문에 -g 옵션을 부여해 global로 설치합니다.

npm install -g nodemon

사용법

기존에 사용하던 node 명령어 대신 nodemon으로 서버를 실행하면 됩니다.

nodemon index.js

재시작

수동으로 서버를 다시 시작하고 싶을 경우 서버가 실행된 상태에서 rs 입력 후 enter 키를 누르면 됩니다.

makerseok@DESKTOP-VMB7775:~/study/toodo$ nodemon server/index.ts
[nodemon] 2.0.16
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: ts,json
[nodemon] starting `ts-node server/index.ts`

  ##################################
    Server listening on port: 5000
  ##################################
  
rs
[nodemon] starting `ts-node server/index.ts`

  ##################################
    Server listening on port: 5000
  ##################################

딜레이

여러개의 파일을 동시에 수정하는 등의 이유로 서버 재시작에 딜레이를 주고 싶다면 --delay 옵션을 사용해 해당하는 초만큼 시간이 지난 뒤 재시작하도록 설정할 수 있습니다.

nodemon index.js --delay 10

디렉토리 지정 실행

기본적으로 옵션을 주지 않을 경우 현재 디렉토리를 모니터링합니다. 모니터링을 원하는 디렉토리를 추가하고 싶을 경우 --watch 옵션을 사용해 경로 또는 파일을 추가하면 됩니다.

nodemon index.js --watch ./readme.md

---

concurrently

동시에 여러 명령을 실행해주는 패키지입니다.

설치

개발 환경에서만 사용할 것이기 때문에 -D 또는 --save-dev 옵션을 부여합니다.

npm install -D concurrently

사용법

동시에 실행하고 싶은 명령어들을 concurrently 명령어 뒤에 \"로 감싸 실행하면 됩니다.

"scripts": {
  "server": "nodemon server/index.ts",
  "start": "concurrently \"npm run server\" \"npm run start --prefix client\""
}

위와 같이 실행할 시 npm run server를 통해 server측 서버가 구동되며 npm run start --prefix client를 통해 client측 서버가 구동됩니다.