import, webpack, class

Import

import > ES6 에서 새로 나온 기능

원래는 

var React = require('react')

var Component = React.Component 

하지만 웹브라우저에서 실행되는 것이기 때문에 Node.js 기능은 제공되지 않습니다. 

---

Webpack

보통 웹브라우저는 script 태그를 사용하여 여러 파일을 불러오곤 합니다. 하지만 이런 특징을 웹브라우저에서도 비슷하게 사용할 수 있는 방법이 있는데 그것이 번들링(Bundling) 도구를 이용하는 것입니다. ("번들링은 묶는다" 뜻 입니다.)

번들링 도구는 Browserify, RequireJs, webpack 이 있는데 React, Vue에서는 webpack이 추세입니다. 

require 또는 import 로 모듈을 불러왔을 때 번들링되면서 모듈들을 파일 하나로 합쳐줍니다. 

SVG, CSS 파일도 webpack으로 불러올수 있습니다. 이렇게 파일들을 불러오는 것은 webpack 로더(loader)가 담당합니다. 로더 종류는 여러가지 입니다. 

css-loader는 CSS 파일을 file-loader 는 웹폰트나 미디어 파일 등을 불러올 수 있습니다. babel-loader는 js파일들을 불러오면서 ES6로 작성된 코드를 ES5로 변환해 줍니다. 

---

Class

ES6 클래스 문법

function Dog(name){

this.name = name;

}

Dog.prototype.say = function(){

console.log(this.name +': 멍멍');

}

var dog = new Dog("검둥이");

dog.say();

///////////////////////////////////////////////

Class Dog{

constructor(name){

this.name = name;

}

say(){

console.log(this.name +"멍멍");

}

}

const dog = new Dog("흰둥이");

dog.say();

위에 두개의 표현법은 동일한 결과를 가져옵니다. 

class 대신에 prototype 을 사용했습니다.