Node.js
ES6을 사용한 Node.JS

소개

노드 ES6 바벨로 프로젝트 지원 및 생성

전체 ES6 사양은 아직 완전히 구현되지 않았으므로 새로운 기능 중 일부만 사용할 수 있습니다. http://node.green/ 에서 현재 지원되는 ES6 기능 목록을 볼 수 있습니다.

NodeJS v6부터 꽤 좋은 지원이있었습니다. 따라서 NodeJS v6 이상을 사용하는 경우 ES6을 사용하여 즐길 수 있습니다. 그러나 출시되지 않은 기능 중 일부와 그 밖의 기능을 사용할 수도 있습니다. 이것을 위해서 당신은 transpiler를 사용해야 할 것입니다.

런타임에 변환기를 실행하고 빌드하여 모든 ES6 기능 등을 사용할 수 있습니다. 자바 스크립트에서 가장 많이 사용되는 transpiler는 Babel입니다.

Babel을 사용하면 ES6 사양의 모든 기능과 'stage-0'과 함께 ' var thing = require('thing') 대신 import thing from 'thing 과 같은 일부 추가 비표준 기능을 사용할 수 있습니다.

우리가 import와 같은 'stage-0'기능을 사용하는 프로젝트를 만들고 싶다면 Babel을 transpiler로 추가해야합니다. react와 Vue를 사용하는 프로젝트와 다른 commonJS 기반 패턴이 스테이지 0을 자주 구현하는 것을 보게 될 것입니다.

새 노드 프로젝트 만들기

mkdir my-es6-app
cd my-es6-app
npm init

ES6 프리셋과 스테이지 0을 설치하십시오.

npm install --save-dev babel-preset-es2015 babel-preset-stage-2 babel-cli babel-register

server.js 라는 새 파일을 만들고 기본 HTTP 서버를 추가하십시오.

import http from 'http'

http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/plain'})
  res.end('Hello World\n')
}).listen(3000, '127.0.0.1')

console.log('Server running at http://127.0.0.1:3000/')

import http from 'http' 의 import http from 'http' 사용합니다.이 기능은 stage-0 기능이며 작동한다면 transpiler가 올바르게 작동한다는 의미입니다.

node server.js 를 실행하면 가져 오기를 처리하는 방법을 알지 못합니다.

디렉토리 루트에 .babelrc 파일을 만들고 다음 설정을 추가하십시오.

{
  "presets": ["es2015", "stage-2"],
  "plugins": []
}

이제 node src/index.js --exec babel-node 서버를 실행할 수 있습니다. node src/index.js --exec babel-node

프로덕션 응용 프로그램에서 실시간으로 transpiler를 실행하는 것은 좋지 않습니다. 그러나 우리는 package.json에 스크립트를 구현하여보다 쉽게 ​​작업 할 수 있습니다.

"scripts": {
    "start": "node dist/index.js",
    "dev": "babel-node src/index.js",
    "build": "babel src -d dist",
    "postinstall": "npm run build"
  },

위의 내용은 npm install distiled 디렉토리에 transpiled 코드를 빌드합니다. npm start 프로덕션 응용 프로그램을 위해 코드 변환 된 코드를 사용할 수있게합니다.

npm run dev 는 프로젝트를 로컬에서 작업 할 때 좋고 선호되는 서버 및 babel 런타임을 부팅합니다.

한 번 더 가면 nodemon npm install nodemon --save-dev 를 npm install nodemon --save-dev 하여 변경 사항을 감시 한 다음 노드 응용 프로그램을 재부팅 할 수 있습니다.

이것은 바벨 (babel)과 NodeJS로 작업 속도를 향상시킵니다. 당신은 package.json에서 "dev"스크립트를 업데이트하여 nodemon을 사용합니다.

"dev": "nodemon src/index.js --exec babel-node",

NodeJS 앱에서 JS es6을 사용하십시오.

JS es6 (es2015라고도 함)은 OOP를 사용하거나 현대 개발 작업에 직면 할 때 JS 언어 목표를 더욱 직관적으로 만드는 새로운 기능 세트입니다.

선수 과목 :

1. http://es6-features.org에 있는 새로운 es6 기능을 확인하십시오. 다음 NodeJS 앱에서 실제로 사용하려는 경우 명확하게 설명 할 수 있습니다.

2. http://node.green 에서 노드 버전의 호환성 수준을 확인하십시오.

3. 모두 괜찮 으면 - 코드를 작성하자!

다음은 JS es6을 사용한 간단한 hello world 앱의 간단한 샘플입니다.

'use strict'

class Program
{
    constructor()
    {
        this.message = 'hello es6 :)';
    }

    print()
    {
        setTimeout(() =>
        {
            console.log(this.message);
            
            this.print();

        }, Math.random() * 1000);
    }
}

new Program().print();

이 프로그램을 실행하여 같은 메시지를 반복해서 인쇄하는 방법을 관찰 할 수 있습니다.

이제 .. 한 줄씩 나누십시오.

'use strict'

이 줄은 js es6을 사용하려는 경우 실제로 필요합니다. strict 모드는 의도적으로 일반적인 코드와 다른 의미를가집니다 (MDN에 대한 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode 에서 읽어보십시오 )

class Program

믿을 수없는 - class 키워드! 빠른 참조를 위해 - es6 이전에 js의 클래스를 정의하는 유일한 방법은 ... function 키워드를 사용하는 것입니다!

function MyClass() // class definition
{

}

var myClassObject = new MyClass(); // generating a new object with a type of MyClass

OOP를 사용할 때 클래스는 개발자가 시스템의 특정 부분을 표현하는 데 도움이되는 매우 기본적인 기능입니다 (코드가 커질 때 코드 분할이 중요합니다. 예 : 서버 측 코드 작성)

constructor()
{
    this.message = 'hello es6 :)';
}

당신은 인정해야합니다 - 이것은 꽤 직관적입니다! 이것은 내 수업의 핵심입니다.이 독특한 "함수"는이 특정 수업에서 객체가 만들어 질 때마다 발생합니다 (우리 프로그램에서는 한 번만).

print()
{
    setTimeout(() => // this is an 'arrow' function
    {
        console.log(this.message);
        
        this.print(); // here we call the 'print' method from the class template itself (a recursion in this particular case)

    }, Math.random() * 1000);
}

print는 클래스 스코프에 정의되어 있기 때문에 클래스의 객체 나 클래스 자체에서 호출 할 수 있습니다.

그래서 .. 지금까지 우리 클래스를 정의했습니다 .. 사용할 시간 :

new Program().print();

진정으로 다음과 같습니다.

var prog = new Program(); // define a new object of type 'Program'

prog.print(); // use the program to print itself

결론 : JS es6은 코드를 단순화하여 직관적이고 이해하기 쉽게 만듭니다 (이전 버전의 JS와 비교). 기존 코드를 다시 작성하고 차이점을 직접 확인해보십시오

즐겨 :)