Babel

Babel 이란?

babel은 자바스크립트 컴파일러다. 입력은 자바스크립트 코드고 출력도 자바스크립트 코드다.
최신 버전의 자바스크립트 문법은 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다.
ES6, ES7 등의 최신 문법을 사용해서 코딩을 할 수 있기 때문에 생산성이 향상된다.

react로 개발을 하고 있따면 거의 대부분 babel도 함께 사용하고 있을 것이다.
create-react-app 에도 기본으로 들어있고 기타 react 관련된 튜토리얼을 따라 하다 보면 자연스럽게 babel을 설칳게 된다. 굳이 react가 아니더라도 자바스크립트를 많이 사용한다면 babel을 함께 사용할 것을 추천한다.

ES6 문법

1. arrow function

dataList.forEach(item => console.log(item.value))

2. classes
   생성자, 상속 등의 클래스 기능을 사용할 수 있다.

3. enhanced object literals

// 예전 방식
const obj = {
	foo: foo,
    bar: 42
}

// ES6
const obj={
	foo,
    bar: 42
}

4. template strings
   여러 개의 문자열을 +로 붙이는 작업은 상당히 귀찮다. 아래의 방식으로 자연스럽게 표현이 가능해졌다.

const msg = `Hello ${name}, current time is ${time}`

5. destructuring
   object에서 필요한 부분만 뽑아낼 때 편리하다. 특히 함수에서 매개변수의 일부만 입력으로 받고 싶을 때 유용하다.

const {foo} = obj;
function savePerson({name, age, onSuccess, onFail}) {...}
savePerson({name: "berry", onSuccess: () => alert("person saved")})

6. let & const