본문 바로가기

ES6

 (5)
ES6 바벨(babel)을 이용한 트랜스 파일링(es6 개발환경 구축하는 방법, feat.webpack) Babel (바벨 : 트랜스파일링) Babel(바벨)은 ES6문법으로 작성된 js파일을 ES5문법으로 작성된 js파일로 만들어주는 작업을 해주는 도구다.대부분의 브라우저가 ES6문법을 완전히 지원해주지 않기 때문에 ES6문법의 자바스크립트 파일을 사용할 수 없다.따라서 Babel(바벨)을 이용해서 개발은 ES6로 하되 브라우저는 트랜스 파일링된 ES5문법의 js파일을 사용하게 하는 식의 구성을 갖게 해야한다.Babel 환경 설정 방법 바벨을 사용하기 전에 node.js의 NPM에 대해서 알아야한다. (패키지 매니저로 babel-cli등을 설치하기 위함.)1. 프로젝트 디렉토리 생성- mkdir myproject && cd myproject2. package.json 생성- npm init -y // 여기..
ES6 javascript로 자료구조 List 구현하기 (배웠으면 사용해보자!!) DataStructures and Algorithms with javascript 책 "자바스크립트 자료구조와 알고리즘"을 보고 리스트 구현을 ES6로 해보는 연습이다.책에서는 ES5 문법이므로 보고 ES6로 바꾸는 과정이 있다.[전체 코드]12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697//ES6 List 클래스 만들기class List{ constructor(){ this.listSize = 0; this.pos = 0; ..
Rest 파라미터와 Spread 연산자 정리하기 (feat. 함수의 가독성을 높이는 방법) Rest 파라미터 (Rest Parameter) Rest 파라미터는 Spread 연산자(...)를 사용하여 함수의 파라미터를 작성한 형태를 말한다. 즉, Rest 파라미터를 사용하면 함수의 파라미터로 오는 값들을 "배열"로 전달받을 수 있다.(Java에서 public static void func(String... strs){...} 이런식의 가변인자와 유사)사용 방법은 파라미터 앞에 (...)을 붙인다.12345function foo(...rest) { console.log(Array.isArray(rest)); // true console.log(rest); // [ 1, 2, 3, 4, 5 ]}foo(1, 2, 3, 4, 5); * function foo(param1, param2, ...rest)..
ES6 화살표 함수(arrow function) 변경점 요약 (사용법, this등) Arrow function 1. 사용법1234567891011121314151617181920//기존의 function samplevar double = function(x){ return x*2;}//arrow function sampleconst double = (x) => { return x*2;}//매개변수가 1개인 경우 소괄호 생략 가능const double = x => {return x*2}//함수가 한줄로 표현가능하면 중괄호 생략 가능하고 자동으로 return됨const double = x => x * 2//매개변수가 두 개 이상일 때const add = (x,y) => x + y//매개변수가 없을 때() => { ... }//객체변환할 때 중괄호 사용() => {return {a:1};}/..
ES6 문법 배우기 - const, let, Template Literals 왜 ES6를 배워야 하는가? - 개인적인 생각입니다.ES6는 새로운 문법이 생긴 만큼 변경점이 큰 자바스크립트의 버전이다.angular, typescript, react, nodejs등 자바스크립트를 사용하는 곳에서 ES6를 이용한 개발이 주를 이루고 코드도 많이 나오고 있다.게다가 자바스크립트의 비약적인 발전으로 어느곳에서든 자바스크립트를 이용해 프로그래밍을 할 가능성이 높다.따라서 자바스크립트를 사용하든 하지 않든 자바스크립트(ES6)를 공부하는 것은 많은 도움이 될 것이다.* 다만 현재 모든 브라우저 버전에서 ES6를 지원해주지 않고 있다.const, let기존 자바스크립트에서 변수 선언을 var로 했었다.ES6부터는 var뿐만 아니라 const와 let이 생겼다.var vs const, letco..

티스토리툴바