front-end side

web-pack: 리엑트 코드를 브라우저가 이해할 수 있는 코드로 변경해주는 역할을 함.

브라우저가 이해할 수 있게 변경해주기 위해 사용.

prettier / 

eslint: 문법 검사 및 더 나은 자바스크립트 코딩 스타일 적용하기 위해 존재....

var는 function-scoped이고, let, const는 block-scoped입니다.

function-scoped와 block-scoped가 무슨말이냐?

var(function-scoped)

// 이 코드를 실행하면 에러없이 after loop i is 10이 호출된다.

(function() {

  for(i=0; i<10; i++) {

    console.log('i', i)

  }

})()

console.log('after loop i is', i) // after loop i is 10

let, const(block-scoped)

es2015에서는 let, const가 추가 되었다.

하지만 let, const를 사용하면 var를 사용할때보다 상당히 이점이 많다.

두개의 공통점은 var와 다르게 변수 재선언 불가능이다.

let과 const의 차이점은 변수의 immutable여부이다.

let은 변수에 재할당이 가능하지만,

const는 변수 재선언, 재할당 모두 불가능하다.

// let은 선언하고 나중에 값을 할당이 가능하지만

let dd

dd = 'test'

// let

let a = 'test'

let a = 'test2' // Uncaught SyntaxError: Identifier 'a' has already been declared

a = 'test3'     // 가능

// const

const b = 'test'

const b = 'test2' // Uncaught SyntaxError: Identifier 'a' has already been declared

b = 'test3'    // Uncaught TypeError:Assignment to constant variable.

// let은 선언하고 나중에 값을 할당이 가능하지만

let dd

dd = 'test'

// const 선언과 동시에 값을 할당 해야한다.

const aa // Missing initializer in const declaration

https://byseop.github.io/2018/06/11/react-prettier-eslint.html

https://velopert.com/3671

https://www.robinwieruch.de/react-eslint-webpack-babel/

https://github.com/prettier/eslint-config-prettier