ExpressJS 기본 셋팅(ES6, NodeDemon, Jest)

ExpressJS ES6 설정

Node.js는 common.js 방식을 따릅니다.

ES6 사용이유

Fat Arrow Function, 템플릿 리터럴 (Template Literal) 등 사용하기 쉬운 문법들이 ES6에 포함 되어 있다.

CommonJS -> ES6

1. 폴더 및 파일 구조 변경
   1. "server"폴더를 생성한다. create a folder
   2. "bin", "routes" 폴더 와 "app.js" 파일을 "server"폴더에 이동시킨다.
   3. "bin > www" 파일을 www.js로 변경한다.
   4. "public" 폴더를 프로젝트 루트에 그대로 둡니다.
2. bin/www.js > ES6 코드로 변환

TIP! 생성된 코드를 ES6로 변환하는 작업은 조금 번거롭기 때문에 여기에 코드를 게시하고 자유롭게 복사하여 붙여넣습니다.
이제 파일 구조를 수정했기 때문에 시작 서버 스크립트가 작동하지 않습니다.
해결 방법은 다음과 같습니다.
package.json 파일에서 시작 스크립트의 이름을 "scripts"라는 JSON 개체에 있는 서버로 바꿉니다.

// package.json
{
  "name": "your-project-name",
  // ....other details
  "scripts": {
    "server": "node ./server/bin/www"
  }
}

app.js 에서 프로젝트 루트에 public/ 을 남겨두었기 때문에 Express 정적 경로를 한 폴더 위로 변경해야 합니다.
'public' 경로가 '../public' 이 되었습니다.

1. Setting up Scripts(스크립트 셋팅)

스크립트를 설정할 때 각 스크립트는 다른 역할을 수행합니다.
그리고 각 npm 스크립트를 재사용합니다.
개발 및 프로덕션 환경의 경우 구성이 다릅니다.
(거의 동일합니다. 나중에 볼 수 있습니다.) 그렇기 때문에 같은 내용을 반복해서 입력하지 않고 사용할 수 있도록 스크립트를 작성해야 합니다.

  # 1. npm-run-all
  # 일부 터미널 명령은 Windows cmd에서 작동하지 않으므로 이라는 패키지를 설치해야 이 스크립트가 모든 환경에서 작동합니다.

  npm install --save npm-run-all

  # Install babel, nodemon, and rimraf
  # Babel은 최신 JavaScript 트랜스파일러입니다. 
  # 트랜스파일러는 최신 JavaScript 코드가 Node.js가 이해할 수 있는 이전 형식으로 변환됨을 의미합니다. 
  # 터미널 프로젝트 루트에서 이 명령을 실행합니다.
  npm install --save @babel/core @babel/cli @babel/preset-env nodemon rimraf

1. Adding transpile script

   // SCript도 수정합니다.
   "scripts": {
    "server": "node ./server/bin/www",
    "start": "node ./server/bin/www",
    "transpile": "babel ./server --out-dir dist-server"
   },
   "babel": {
    "presets": ["@babel/preset-env"]
   },

babel이 코드 변환을 시작하기 전에 코드의 어느 부분을 번역할지 알려줘야 합니다.
babel은 모든 종류의 목적을 위해 많은 JS 구문을 변환할 수 있기 때문에 사용 가능한 구성이 많다는 점에 유의하십시오.
운 좋게도 사용 가능한 기본값이 있기 때문에 그것에 대해 생각할 필요가 없습니다.
우리는 package.json 파일에서 프리셋-env(이전에 설치한 것)라는 기본 구성을 사용하여 코드를 변환하는 형식을 Babel에 알립니다.
package.json 파일 내에서 "babel" 개체를 만들고 이 설정을 입력합니다.

2. 명령어 실행

이제 여기서 무슨 일이 일어났습니까?
먼저 cli 명령 babel 을 실행하고 변환할 파일(이 경우에는 server/의 파일)을 지정하고 변환된 내용을 프로젝트 루트의 dist-server라는 다른 폴더에 넣어야 합니다.

2. 결과

transpile 명령어를 실행 시키면 dist-server 폴더가 생성되고 그안에 common.js로 변환된 파일들이 생성됩니다.

1. Clean script

코드를 새 파일로 변환할 때마다 새 복사본을 만들려면 오래된 파일을 제거하는 스크립트가 필요합니다.
이 스크립트를 package.json에 추가하십시오.

"scripts": {
  "server": "node ./dist-server/bin/www",
  "transpile": "babel ./server --out-dir dist-server",
  // 우리가 만든 이 npm 스크립트는 dist-server/ 폴더를 제거한다는 의미입니다.
  "clean": "rimraf dist-server",
  // 이제 트랜스파일과 정리를 결합하기 위해 두 프로세스를 결합하는 build 라는 스크립트를 추가합니다.
  "build": "npm-run-all clean transpile",
  // 실행 명령어
  // NODE_ENV=development로 환경 설정이 필요한데 
  // vscode -> launch.json -> env { "NODE_ENV": "development"} 를 설정한다.
  // 그외 tool에 따라 달라지니 각자 환경에 따라 셋팅 하면 된다.
  "dev": "npm-run-all build server",
}

여기서 우리는 서버 스크립트에서 실행 중인 파일을 다시 변경했습니다.
우리는 dist-server/에 있는 트랜스파일된 코드로 파일 경로를 실행하고 있습니다.

위의 명령어를 dev 명령어를 사용하여 프로젝트를 실행 하게 되면
package.json의 "type" : "module" 이란 코드는 제거 해도 된다.

1. node demon 사용

코드를 수정할때 마다 일일이 서버를 재시작 하는건 매우 비효율적인 일이다.
이를 편리 하게 하기 위해 nodemon을 사용한다.
nodemon은 프로젝트가 수정 될때 마다 자동으로 서버를 재 실행 해준다.
package.json에 다음 코드를 추가 해 준다.

// package.json
...
"nodemonConfig": { 
  "exec": "npm run dev",
  "watch": ["server/*", "public/*"],
  "ignore": ["**/__tests__/**", "*.test.js", "*.spec.js"]
},
"scripts": { 
  // ... other scripts
  "watch:dev": "nodemon"
}

Nodemon 구성에는 다음과 관련된 설정이 포함되어 있습니다.

• 파일이 변경될 때마다 실행할 명령(우리의 경우 npm run dev)
• 감시할 폴더 및 파일
• 무시할 파일

좀더 다양한 option은 여기에서 확인 하면된다.

1. Bonus: Add tests!

이전 까지만 사용하더라도 충분히 사용가능 하다.
하지만 여기서 Test까지 추가를 할것이다.
jest를 설치 한다.

  // Jest 는 코드가 제대로 동작하는 지 확인하는 test case 를 만드는 '테스팅 프레임워크' 입니다.
  npm i -D jest

이후 package.json에 환경을 설정한다.

// package.json
...
"jest": { 
  "testEnvironment": "node"
},
"scripts": {
  "test": "jest"
}

server 폴더에 "__test__" 폴더를 만들어 준다.
이후 sample.test.js파일을 만들고 테스트 코드를 작성해 주면 사용 가능하다.
사용 방법은 여기를 확인하여 사용 하면된다.

오류

• ES6로 실행이 되질 않을때
  • package.json에 "type": "module" properties를 설정한다.
• import를 찾지 못할때
  • path 끝에 .js(각 파일의 확장자)를 붙여 준다.
• app.js에서 __dirname을 찾지 못할떄
  • const __dirname = path.resolve(); 코드를 붙여준다.
  • es6에서는 그냥 __dirname을 사용하지 못한다고 한다.

추가적인 수정 내용

es6로 변경시 jade의 css path를 찾지 못하는 404 에러가 뜬다.
이부분은 좀더 확인 해야 한다.

---

참고

• ES6를 사용하는 이유를 찾기 위해
• How to enable ES6 (and beyond) syntax with Node and Express

dependency version

 "dependencies": {
    "@babel/cli": "^7.19.3",
    "@babel/core": "^7.20.2",
    "@babel/preset-env": "^7.20.2",
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1",
    "nodemon": "^2.0.20",
    "npm-run-all": "^4.1.5",
    "rimraf": "^3.0.2"
  },