주요 문서
-
ES6 In Depth: 서브클래스 만들기 (Subclassing)
ES6 In Depth 시리즈는 ECMAScript 표준 6번째 에디션(줄여서 ES6)을 통해 JavaScript 에 새로 추가된 요소들을 살펴보는 시리즈입니다. 지지난 글에서, 우리는 객체의 생성자를 정의할 때 겪는 번거로움을 해소하기 위해 ES6 에 새로 도입된 클래스 시스템을 알아보았습니다. 그리고 클래스 시스템을 이용해서 아래처럼 코딩하는 방법을 알아보았습니다. class Circle { constructor(radius) { this.radius = radius; Circle.circlesMade++; }; static draw(circle, […]
-
ES6 In Depth: let 과 const
ES6 In Depth 시리즈는 ECMAScript 표준 6번째 에디션(줄여서 ES6)을 통해 JavaScript 에 새로 추가된 요소들을 살펴보는 시리즈입니다. 제가 오늘 이야기하려고 하는 주제는 처음 보기에는 별것 아닌 것 같지만, 아주 중요한 것입니다. Brendan Eich 는 1995년 JavaScript 첫 버전을 설계할 때 많은 잘못을 저질렀습니다. 그가 저지른 잘못은 그 이후로 랭귀지의 일부로 계속 이어져 오고 있습니다. 예를 […]
-
ES6 In Depth: 클래스
ES6 In Depth 시리즈는 ECMAScript 표준 6번째 에디션(줄여서 ES6)을 통해 JavaScript 에 새로 추가된 요소들을 살펴보는 시리즈입니다. 오늘은 지난 글들의 복잡함에서 벗어나 한숨 돌리려고 합니다. 이번 글은 ES6 In Depth: 제너레이터 (이어서) 에서 처럼 한번도 본 적 없는 낯선 이야기를 하지 않을 것입니다. 이번 글은 막강한 프락시 객체 에서 처럼 JavaScript 랭귀지 내부의 동작을 가로채는 […]
-
ES6 In Depth: 프락시 (Proxy)
ES6 In Depth 시리즈는 ECMAScript 표준 6번째 에디션(줄여서 ES6)을 통해 JavaScript 에 새로 추가된 요소들을 살펴보는 시리즈입니다. 오늘 우리가 살펴보려는 것은 다음 코드입니다. var obj = new Proxy({}, { get: function (target, key, receiver) { console.log(`getting ${key}!`); return Reflect.get(target, key, receiver); }, set: function (target, key, value, receiver) { console.log(`setting ${key}!`); return Reflect.set(target, key, value, […]
-
ES6 In Depth: 제너레이터 (이어서)
ES6 In Depth 시리즈는 ECMAScript 표준 6번째 에디션(줄여서 ES6)을 통해 JavaScript 에 새로 추가된 요소들을 살펴보는 시리즈입니다. ES6 In Depth 에 잘 오셨습니다! 지난 글 이후로 편히 쉬셨는지요? 하지만 프로그래머의 삶이 불꽃놀이나 레모네이드로 가득찬 편안한 삶일 수는 없지 않습니까? 이제 다시 남은 주제들을 공부할 시간이 되었습니다. 쉬었다 시작하기에 완벽한 주제를 골라두었습니다. 몇 달 전에 제너레이터에 […]
-
ES6 In Depth: 컬렉션 (Collections)
ES6 In Depth는 ECMAScript 표준의 6번째 에디션(줄여서 ES6)을 맞아 JavaScript에 새로 추가된 요소들을 살펴보는 시리즈입니다. 이번 주 초에(2015년 6월 19일 기준), ECMA-262 6th Edition, ECMAScript 2015 Language Specification 이라고 명명된 ES6 스펙이 마지막 난관을 극복하고 Ecma 표준으로 공식 승인되었습니다. 표준 제정에 기여한 TC39 와 모든 사람들에게 축하를 전합니다. 이제 ES6 는 공식 문서가 되었습니다! 더 […]
-
ES6 In Depth: Babel과 Broccoli로 지금 당장 ES6 이용하기
ES6 In Depth는 ECMAScript 표준의 6번째 에디션(줄여서 ES6)을 맞아 JavaScript에 새로 추가된 요소들을 살펴보는 시리즈입니다. ES6 가 여기 있습니다. 그리고 사람들은 벌써 ES7 을 말하고 있습니다. 사람들은 예정된 미래에 대해, 그리고 새로운 표준의 빛나는 기능에 대해 이야기하고 있습니다. 웹 개발자로서, 우리는 이 모든 것들을 어떻게 활용해야 할까요? 지금까지 ES6 In Depth 시리즈를 통해 당장 ES6 […]
-
ES6 In Depth: 심볼 (Symbol)
ES6 In Depth는 ECMAScript 표준의 6번째 에디션(줄여서 ES6)을 맞아 JavaScript에 새로 추가된 요소들을 살펴보는 시리즈입니다. ES6 심볼(symbol)은 무엇일까요? 심볼은 로고가 아닙니다. 심볼은 당신이 코드에 쓸 수 있는 작은 그림이 아닙니다. let = × ; // SyntaxError 심볼은 무엇인가를 기념하기 위해 만든 건물도 아닙니다. 심볼(Symbol)은 절대로 심벌즈(Cymbals)가 아닙니다. (프로그래밍에 심벌즈를 쓰는 것은 좋은 생각이 아닙니다. 심벌즈는 […]
-
ES6 In Depth: 화살표 함수(Arrow functions)
ES6 In Depth는 ECMAScript 표준의 6번째 에디션(줄여서 ES6)을 맞아 JavaScript에 새로 추가된 요소들을 살펴보는 시리즈입니다. 화살표는 처음부터 JavaScript의 한 부분이었습니다. 첫 JavaScript 튜토리얼은 인라인 스크립트를 HTML 주석으로 감싸라고 조언했습니다. 이는 JS를 지원하지 않는 구식 브라우저가 의도하지 않게 JS 코드를 화면에 표시하는 것을 방지하려는 목적이었습니다. 이 조언에 따라 작성한 코드는 다음과 같은 모습이 될 것입니다. <script […]
-
ES6 In Depth: 디스트럭처링(Destructuring)
ES6 In Depth는 ECMAScript 표준 6번째 에디션(줄여서 ES6)을 맞아 JavaScript에 새로 추가된 요소들을 살펴보는 시리즈입니다. 에디터 노트: 이 글은 원래 Firefox 개발자 도구의 담당 엔지니어 Nick Fitzgerald가 자신의 블로그에 Destructuring Assignment in ES6라는 제목으로 올렸던 글입니다. 디스트럭처링(destructuring) 할당이란 무엇인가요? 디스트럭처링을 이용하면 배열의 요소나 객체의 속성을 배열 리터럴(literal)이나 객체 리터럴과 비슷한 문법을 이용해서 변수에 할당할 수 […]
