Nodejs의 Express사용하기 ( 2 )

babel이란

대상 환경에 필요한 구문 변환 (및 선택적으로 브라우저)를 세부적으로 관리 할 필요없이 최신 JavaScript를 사용할 수있는 스마트 사전 설정입니다.

babel을 설치함으로서 최신 JS코드를 작성할 수 있게 됩니다.

지금은 node에서 사용하는 babel을 설치하여야 하므로 아래와 같이 입력합니다.

 

▶ 설치 방법

 

npm install @babel/node

PS [대상 프로젝트]> npm install babel
npm WARN deprecated babel@6.23.0: In 6.x, the babel package has been deprecated in favor of babel-cli. Check https://opencollective.com/babel to support the Babel maintainers
npm WARN public_recipe@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})    

+ babel@6.23.0
added 1 package from 1 contributor and audited 175 packages in 1.161s

11 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

이후, babel의 기능 중 env기능을 사용하기 위해 아래와 같이 설치합니다.

npm install --save-dev @babel/core @babel/cli @babel/preset-env

PS [프로젝트 폴더]> npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN public_recipe@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})    

+ @babel/core@7.13.10
+ @babel/cli@7.13.10
+ @babel/preset-env@7.13.10
added 294 packages from 142 contributors and audited 472 packages in 16.537s

21 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

설치 후 .babelrc를 작성합니다.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": 3
      }
    ]
  ]
}

 

▶nodemon

nodejs로 서버가 실행되고 있는 중에도 수정을 하면 실시간으로 반영을 할 수 있게 해주는 기능입니다.

npm install nodemon -D

PS [프로젝트 폴더]> npm install nodemon -D

> nodemon@2.0.7 postinstall [프로젝트 폴더]\node_modules\nodemon
> node bin/postinstall || exit 0
npm WARN public_recipe@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})    

+ nodemon@2.0.7
updated 1 package and audited 542 packages in 4.644s

31 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

nodemon을 설치하면 "devDependencies"라는 항목이 생기며 이곳에 "nodemon"의 버전이 기입됩니다.

 

 

 

※body-Parser에 대해서

bodyParser기능을 사용하면 아래와 같이 취소선이 생기는데 stackoverflow에서 동일한 현상의 질문이 있어 참조하여 수정하였습니다.

stackoverflow.com/questions/62396498/tslint-marks-body-parser-as-deprecated

해당 사이트의 설명을 보면 bodyParser는 4.16버전부터 express에 내장되어 있기 때문에 express.json을 하면 bodyparser의 json기능을 사용할 수 있다고 합니다.

4.16ver이하 : bodyParser.json()으로 기능 사용

4.16ver이상(최신버전) : express안에 내장되어 있으므로 express.json()을 사용해 bodyParser의 기능을 사용

 

변경하면 아래와 같은 코드가 됩니다.

실행시키면 아래와 같습니다.

 

 

★지금까지의 코드

app.js

import "core-js";
import express from "express";
import helmet from "helmet";
import cookieParser from "cookie-parser";
import bodyParser from "body-parser";
const app = express();

app.use(cookieParser());
app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(helmet());

export default app;

init.js

import app from "./app.js";

const PORT = 5000;

const handleListening = () => console.log(`Listening on: http://localhost:${PORT}`);

const handleHome = (req,res) => res.send("Hello from home");

app.get("/", handleHome);
app.listen(PORT, handleListening);

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": 3
      }
    ]
  ]
}

package.json

{
  "name": "public_recipe",
  "version": "1.0.0",
  "description": "provides a recipe for Pepole's",
  "author": "Kim Heajin",
  "license": "ISC",
  "type": "module",
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "babel": "^6.23.0",
    "body-parser": "^1.19.0",
    "cookie-parser": "^1.4.5",
    "core-js": "^3.9.1",
    "express": "^4.17.1",
    "helmet": "^4.4.1",
    "morgan": "^1.10.0",
    "pug": "^3.0.2"
  },
  "scripts": {
    "start": "nodemon --exec babel-node init.js"
  },
  "devDependencies": {
    "@babel/cli": "^7.13.10",
    "@babel/core": "^7.13.10",
    "@babel/node": "^7.13.10",
    "@babel/preset-env": "^7.13.10",
    "nodemon": "^2.0.7"
  }
}

 

 

참고 사이트

 

babeljs.io/docs/en/babel-preset-env

Babel · The compiler for next generation JavaScript

stackoverflow.com/questions/62396498/tslint-marks-body-parser-as-deprecated

TSLint marks body-parser as deprecated