덕's IT Story

자바스크립트는 기존 C++이나 자바 같은 객체지향 프로그래밍 언어와는 다른 프로토타입 기반의 객체지향 프로그래밍을 지원한다. 자바스크립트에서 객체는 자기 자신의 프로퍼티뿐만 아니라, 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티 또한 마치 자신의 것처럼 접근하는게 가능하다. 이것을 가능케 하는 게 바로 프로토타입 체이닝 이다. 이전 글에 정리한 함수, this만 이해하면 프로토타입 체이닝은 딱히 어려운 점은 없다. [JavaScript] 4. 함수와 프로토타입 체이닝 (1) - 함수란 [JavaScript] 4. 함수와 프로토타입 체이닝 (2) - this란 객체 리터럴 방식으로 생성된 객체의 프로토타입 체이닝 var myObject = { name: 'foo', sayName: function()..

인사이드 자바스크립트국내도서저자 : 고현준,송형주출판 : 한빛미디어 2014.01.02상세보기 함수 호출과 this arguments 객체C와 같은 엄격한 언어와 달리, 자바스크립트에서는 함수를 호출할 때 함수 형식에 맞춰 인자를 넘기지 않더라도 에러가 발생하지 않는다. 정의된 함수의 인자보다 적게 함수를 호출했을 경우, 넘겨지지 않은 인자에는 undefined 값이 할당된다. 이와 반대로 정의된 인자 개수보다 많게 호출했을 경우 초과된 인수는 무시된다.이러한 특성 때문에, 런타임 시에 호출된 인자의 개수를 확인하고 이에 따라 동작을 다르게 해줘야 할 경우가 있다. 이를 가능케 하는게 함수를 호출할 때 암묵적으로 전달되는 arguments 객체다. 이 객체는 실제 배열이 아닌 유사 배열 객체이다. fun..

이 글은 4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them를 번역한 글입니다. 번역 문서를 읽는 중, 오타나 어색한 문장이 있으면 부담없이 댓글 부탁드립니다. 이번 글에서 클라이언트단 JavaScript 코드의 일반적인 메모리 누수 유형에 대해 살펴보겠습니다. 또한 크롬 개발 도구(Chrome DevTools)를 사용하여 메모리 누수를 찾는 방법에 대해서도 알아보겠습니다. Introduction 메모리 누수(Memory leaks)는 모든 개발자들이 직면하는 문제입니다. 심지어 메모리를 관리해주는 프로그래밍 언어(Java, C# 등)를 사용하는 경우에도 메모리 누수 문제에서 벗어날 수 없습니다. 메모리 누수는 어플리케이션의 속도 저하, 충..

인사이드 자바스크립트국내도서저자 : 고현준,송형주출판 : 한빛미디어 2014.01.02상세보기 함수 정의 자바스크립트에서 함수를 생성하는 방법은 3가지가 있다. 이들 방식은 모두 같은 함수를 생성하지만, 각각의 방식에 따라 함수 동작이 미묘하게 차이가 난다. 함수 선언문(function statement) 함수 표현식(function expression) Function() 생성자 함수 함수 선언문이나 함수 표현식 방법은 함수 리터럴 방식으로 함수를 생성한다.1. 함수 선언문 방식 function add(x, y) { return x + y; } console.log(add(3, 4)); // 7 2. 함수 표현문 방식 var add = function (x, y) { return x + y; } var..

1. Vuetify 7천개 이상의 star를 받은 프로젝트로, Vuetifyjs는 메터리얼 디자인(material design) 스펙에 따른 UI 레이아웃을 제공합니다. v1.0 알파 버전은 80개의 재사용 가능한 컴포넌트들을 제공합니다. 2. Element 2만 1천개 이상의 star를 받은 가장 인기가 많은 프로젝트 중 하나로, Element는 다양한 커스터마이징 가능한 컴포넌트들을 제공합니다. 또한 다양한 생태계를 가지고 있어 차기 Vue UI 라이브러리로 선택해볼만 합니다. 3. Keen UI 3천개 이상의 star를 받은 Keen UI는 Material UI에 영감을 받아 만들어진 프로젝트로, 실제 Material UI 라이브러리는 아닙니다. CSS 프레임워크가 아니며 grid system 혹은..

ECMAScript 6 이 문서는 https://github.com/lukehoban/es6features 를 번역한 내용입니다. 번역 문서를 읽는 중, 오타나 어색한 문장이 있으면 이슈를 등록해주세요! Introduction ECMAScript 2015로도 알려져 있는 ECMAScript 6는 ECMAScript 표준의 가장 최신 버전입니다. ES6는 새로운 언어 기능이 포함된 주요 업데이트이며, 2009년도에 표준화된 ES5 이후로 언어 기능에 대한 첫 업데이트이기도 합니다. 현재 주요 JavaScript 엔진들에서 ES6 기능들을 구현 중에 있습니다. ECMAScript 6 언어의 전체 스펙을 확인하시려면 ES6 Standard를 확인하세요. ES6는 아래의 새로운 기능들을 포함하고 있습니다. ar..

foreach 반복문 foreach 반복문은 오직 Array 객체에서만 사용가능한 메서드입니다.(ES6부터는 Map, Set 등에서도 지원됩니다) 배열의 요소들을 반복하여 작업을 수행할 수 있습니다. foreach 구문의 인자로 callback 함수를 등록할 수 있고, 배열의 각 요소들이 반복될 때 이 callback 함수가 호출됩니다. callback 함수에서 배열 요소의 인덱스와 값에 접근할 수 있습니다. var items = ['item1', 'item2', 'item3']; items.forEach(function(item) { console.log(item); }); // 출력 결과: item, item2, item3 for …in 반복문 for in 반복문은 객체의 속성들을 반복하여 작업을 수..

Vue.js로 만든 어플리케이션이 규모가 커지게 되면 컴포넌트들을 분리함으로써 복잡성을 제어할 수 있습니다. 이를 통해 재사용성, 테스트 및 유지보수 용이라는 장점을 누릴 수 있습니다. 하지만 컴포넌트를 분리하면 각 컴포넌트 간의 통신은 더 불편해지게 됩니다. 이제 이벤트 버스(event bus)를 통해 이벤트 기반의 컴포넌트 간의 통신하는 방법을 살펴보겠습니다. Vue.js 이벤트 인터페이스 Vue.js에는 다음과 같은 이벤트 인터페이스가 존재합니다. $on(eventName) : 이벤트 감지 $emit(eventName) : 이벤트 트리거 동일 컴포넌트 내에서는 $on과 $emit을 이용하여 이벤트를 주고 받을 수 있습니다. 하지만 부모-자식 관계에서 $on을 이용하여 자식 컴포넌트에서 호출한 이벤트..