1.Babel
익스플로러 사용 멈춰🤚
바벨은 트랜스파일러이다.
C나 JAVA같은 언어는 컴파일러를 활용한다.
바벨이란 트랜스 파일러는 활용해 코드를 추상화 시켜 다운그레이드 하는 것이 바벨이다.
왜 우리는 바벨을 사용할까?
대부분의 프론트엔드 개발자들은 ES6이후의 문법을 사용할 것이다.
그런데 아직 구형 브라우저들은 ES6이후에 추가된 문법을 지원하지 않는다. ex. I.E
그런 상황 때문에 우리는 구형 브라우저도 지원하기 위해 최신 문법을 활용해도 바벨의 트랜스파일링으로 다운그레이드된 문법을 배포하기 때문에 문제가 되지 않는다.
2.Polyfill
충전솜이라는 의미를 가지고 있단다.
브라우저에서 지원하지 않는 코드를 사용 가능한 코드나 플러그인으로 만들어준다.
바벨이 있는데 이건 또 왜 필요한데?
바벨만 사용한다고 해서 ES6 이후의 최신 문법이 모두 적용되는 것이 아니다.
즉 바벨이 슈퍼 짱짱맨이 아니라서 바벨의 트랜스파일링 이후에 브라우저에서 지원하지 않는 문법을 서포팅 해주는 친구이다.
3. Node.js
자바스크립트는 Node.js의 등장 이전에는 브라우저에서만 구동이 가능했다.
그러나 Node.js라는 것이 등장하므로 런타임 환경에서도 구현이 가능해졌다.
node.js는 백엔드 구현할 때만 필요한 거 아니야?
아니다.
우리가 간편한 최신 문법으로 개발할 때 사용하는 문법을 웹팩이나 바벨 같은 것들을 활용해서 개발하려면 이 모든 것들이 node.js 위에서 구동되기 때문에 가히 필수적이다.
또한 빌드 자동화를 지원하기 때문에 가히 필수적이다.
4. ESLint && Prettier
ESLint
EcmaScript의 Lint를 제거하기 위한 라이브러리.
Find and fix problems in your JavaScript code (공홈의 소개 문구)
React를 개발하다 보면 useEffect가 어쩌고 저쩌고 ,,, 얘가 선언 됐는데 but never used! 라고 귀찮지만 고맙게 해주는 친구가 얘다.
코드의 퀄리티와 포멧팅을 함께 지원해준다.
Prettier
코드를 더 pretty하게 만들어준다.
prettier랑 ESLint는 사실 겹치는 부분이 있다. ESLint의 코드 포멧팅의 기능과 동일한데,
더 나은 가독성을 제공한다. 그러나 코드의 퀄리티는 확인하지 않는 게 특징이다.
never Used... 어쩌고 저쩌고 하지 않는다.
5. ES6
ES6의 문법을 사용하지 않는 프론트엔드 개발자가 있을까?
감히 자바스크립트의 큰 획을 그은 혁신이라고 장담한다. (킹님갓고)
arrow funtion
이전의 함수 선언
function ugly() {
alert('TT');
}
After ES6
const handsome = () => {
alert('Hi :) ');
}
생긴 것부터 다르다. 처음에 보고는 굳이 쓰고 싶다는 생각도 들지 않았고,
기존의 함수와 다르게 생겨 거부감이 있었지만 현재는 함수 대부분을 arrow로 작성한다.
lexical scope와 hoisting등 기존의 함수와 다른 점이 존재한다.
Class
// Prototype
function Animal(type, name, sound) {
this.type = type;
this.name = name;
this.sound = sound;
}
Animal.prototype.say = function() {
console.log(this.sound);
};
Animal.prototype.sharedValue = 1;
const dog = new Animal('개', '멍멍이', '멍멍');
const cat = new Animal('고양이', '야옹이', '야옹');
dog.say();
cat.say();
console.log(dog.sharedValue);
console.log(cat.sharedValue);
// After ES6
class Animal {
constructor(type, name, sound) {
this.type = type;
this.name = name;
this.sound = sound;
}
say() {
console.log(this.sound);
}
}
const dog = new Animal('개', '멍멍이', '멍멍');
const cat = new Animal('고양이', '야옹이', '야옹');
dog.say();
cat.say();
이렇게 기존에 활용하던 prototype의 상위호환 문법인 셈인 class가 등장했다.
기존의 프로토타입과 클래스로 나뉘던 이념전쟁에서 프로토타입이 패배하고,
클래스 문법을 추가하게 됐다. 그러나 클래스 문법도 사실은 프로토타입을 베이스로 구현됐다.
enhanced object literals
// Before ES6
const data = {
id: id,
password: '42'
}
// AfterES6
const data = {
id,
password: '42'
}이렇게 같은 key와 value가 같다면 생략할 수 있다.
Destructuring
객체에서 필요한 부분만 뽑아낼 때 편리하다. 함수에서 매개변수 일부만 입력으로 받고 싶을 때 유용하다.
const {data} = state.data;
function doneLogin ({name, age, onSuccess, onFail}) {...}
doneLogin({name: "jamie", onSuccess: () => alert("Welcome ")})
