본문 바로가기

es6

 (6)
[TodoMVC] Step 7. ECMAScript2015 Refactoring Step 7. ECMAScript 2015 로 Refactoring하기 Intro ES6 문법이 자리를 잡아가면서, 그 필요성이 증대됬습니다. 이를 연습하기 위해 VanilaJS TodoMVC를 ES6 문법에 맞게 Refactoring 해봤습니다. 이전의 포스팅 단계로 봤을 때, Step 3. RemoveItem 에 해당하는 단계까지만 진행해봤습니다. 그 다음 단계는 똑같은 refactoring의 반복이기에 생략했습니다. 기존의 코드와 비교하면서 보시면 더 이해가 잘 되실겁니다.문법적은 내용에 대한 설명은 이 포스팅에서는 생략하겠습니다.아직 ES6 문법이 익숙하지 않으신 분들은 아래 포스팅을 통해 확인하는 것도 좋을 것 같습니다.>> TodoMVC Project VanilaJS version 포스팅으로 ..
[ES6] 부록. ECMAScript 2015 개발환경 Setting with Webpack, ESLint ECMAScript 2015 개발환경 Setting with Webpack and ESLint ES6 문법으로 자바스크립트 코드를 작성하는 것이 간결하지만, 현재 모든 브라우저에서 완벽하게 ES6 문법을 지원해주지 못하고 있다. 그렇기에 개발자들은 ES6로 작성된 코드를 이전의 문법인 ES5 문법으로 transpile하여 배포해야하는 경우가 발생했다. 이를 도와주는 것이 babel 이라는 npm이 있다. 하지만 여기서 한 발짝 더 나아가 bundle 기능까지 함께 제공하는 ( 원래 주가 bundle 기능이다. ) webpack을 활용하여 transpile 하자. webpack은 이 두 가지 기능 이외에도 정말 다양한 기능을 갖고 있다. 또한 ESLint를 이용하여 보다 우아한 ES6에 맞는 자바스크립트 ..
[ES6] 7. Module system Chater 7. Module System Module이란ES6의 모듈은 Javascript 코드를 담고 있는 파일을 말한다. global scope에서의 변수명 충돌을 방지하기 위해 모듈화 방식을 사용한다.ES6 모듈은 모듈안에서 자동적으로 strict 모드로 처리되며 모듈안에서는 import, export 키워드로 모듈을 노출시키거나 불러올 수 있다. 모든 import와 export 구문은 모듈의 작성된 코드의 top level에만 올 수 있다. 조건적으로 import하거나 export할 수 없으며 import 구문을 함수 스코프에서 사용할 수도 없다. export 구문은 명시적인 이름으로 export 되어야 한다. 배열을 순회한다던가의 방법은 사용할 수 없다. 단 중괄호 안에 한꺼번에 여러 개의 모..
[ES6] 6. Class sugar syntax and Template Strings Chapter 6. Class sugar syntax and Template Strings 기존의 자바스크립트에서는 캡슐화를 하기 위해 constructor function을 사용하였다. 이를 보완하기 위해 class 문법이 등장하였다. class라는 키워드로 말 그대로 클래스를 생성할 수 있게 된 것이다. 이것은 새로운 객체 모델이 아니라 기존에 사용했던 프로토타입 객체 지향의 문법을 class 기반인 것처럼 wrapping 한 문법이다. sugar syntax라고도 한다. ES5>>12345678function SponsorWidget(name, description, url){ this.name = name; this.description = description; this.url = url;}Sp..
[ES6] 5. Collection - Map, Set Chapter 5. Collection - Map, SetMap Maps는 key-value 쌍으로 이루어진 자료구조이다. key들은 중복될 수 없으며, 하나의 키에 하나의 value만 올 수 있다. maps를 이용하여 객체를 사용할 때, 객체의 key들은 항상 string 으로 변환된다. code> 12345678910111213141516//user1, user2라는 다른 두 객체를 생성하자.let user1 = { name : “Sam” };let user2 = { name : “Tyler” }; //그리고 totalReplies라는 객체에 두 객체를 key 값으로 value값을 추가하자.let totalReplies = { };totalReplies[user1] = 5;totalReplies[us..
[ES6] 4. Array, Symbol Chapter 4. Collection - Array, Map and Symbol Array배열의 여러 요소에 접근하기 위해 destructuring을 사용할 수 있다.ES5>>1234567let users = [“Sam”, “Tyler”, “Brook”]; let a = users[0];let b = users[1];let c = users[2]; console.log(a,b,c); // Sam Tyler Brookcs ES6>>12345678910let users = [“Sam”, “Tyler”, “Brook”]; let [a, b, c] = users;console.log(a,b,c); // Sam Tyler Brook let [a, ,b] = users;console.log(a, b); // Sa..

티스토리툴바