'JavaScript' 카테고리의 글 목록 (6 Page)

자바스크립트 네임스페이스 패턴 - namespace pattern

자바스크립트 설계 패턴 - Namespace Pattern 네임스페이스는 프로그램에서 필요로 하는 전역 변수의 개수를 줄이는 동시에 과도한 접두어를 사용하지 않고도 이름이 겹치지 않게 해줍니다. 자바스크립트의 언어 문법에 내장되어 있지는 않지만, 네임스페이스는 꽤 쉽게 구현할 수 있는 기능입니다. 네임스페이스 패턴 대개 애플리케이션이나 라이브러리를 위해 전역 유효 범위에 수많은 함수, 객체, 변수들로 어지럽히지 않도록 하기 위해 전역 객체를 하나 만들고(단 하나만 만드는 것이 이상적이다) 모든 기능을 이 객체에 추가하는 패턴을 네임스페이스 패턴이라고 합니다. 다음의 예제는 안티 패턴입니다. JavaScript // 수정 전 : 전역 변수 5개 // 경고 : 안티 패턴 // 생성자 함수 2개 functio..

JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:38

prototype, constructor, 인스턴스

프로토타입, 생성자, 인스턴스 이 글에서는 인스턴스와 생성자의 prototype 속성, 프로토타입 객체의 constructor 속성에 대해 알아봅니다. 생성자, 프로토타입 객체, 인스턴스 관계도 함수 모델 일반적으로 모든 함수를 정의하면 다음과 같은 모델이 구성됩니다. javascript function fn() { var x = 10; var y = 20; return x + y; } fn(); 위의 그림에서는 함수가 정의될 때 그 함수와 연결된 프로토타입이라는 객체가 함께 정의되는 것을 보여주고 있습니다. 생성자도 함수로서 이와 동일한 구조로 생성됩니다. 생성자 모델 이제 다음과 같이 정의된 생성자 Person을 봅니다. javascript function Person(name) { this.name..

JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:37

멤버 접근 제어 구조

객체지향 언어에서의 멤버에 대한 접근 제어 일반 객체지향 언어에서는 멤버에 대한 접근을 제어하기 위해 public, private 같은 한정자를 제공합니다. 그러나 자바스크립트에서는 멤버에 대한 접근 제어 및 정보 은닉을 위한 특별한 키워드를 언어 차원에서 제공하지 않습니다. 자바스크립트에서의 공개 속성은 "값을 직접 가지고 있는 변수"와 같습니다. 따라서 객체의 내부 상태를 속성을 통해 그대로 노출하는 것입니다. 이것은 "정보 은닉"이 되지 않는다는 의미입니다. 때로는 변수의 값을 외부에 노출시키기도 하지만 값을 외부에서 직접 접근하지 못하도록 비공개 멤버(private member)를 만들고 싶은 경우도 있습니다. 하지만 자바스크립트에서는 이러한 비공개 멤버를 만드는 방법을 지원하지 않으므로 개발자가..

JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:36

자바스크립트의 클래스 상속 #1

클래스 상속 소개 클래스 상속을 사용하면 기존 코드를 변경하지 않고도 기능을 추가하거나 수정할 수 있습니다. 이 글에서는 클래스 상속 개념에 대해 간략히 알아봅니다. 클래스 상속이란? 객체지향 프로그래밍에서 상속의 개념은 현실에서 사용되는 상속이란 단어의 뜻과 유사합니다. 예를 들어, 자식이 부모로부터 유산을 상속받았다면 자식은 상속받은 재산을 사용할 수 있게 됩니다. 부모의 재산이 집, 땅, 현금 1억이 있다면 그 자식은 이를 물려 받을 수 있으며 자식은 부모로부터 상속받은 재산과 직접 만든 재산(자동차, 주식등..)을 가지고 있을 수 있습니다. 이러한 사전적인 상속의 개념은 프로그래밍에서도 상속이라고도 부르고 확장이라고도 부릅니다. 프로그래밍적으로 적용해 보면 특정 클래스(부모 클래스)의 속성과 메서..

JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:36

객체 확장

멤버 확장 확장이라 함은 부모 객체의 멤버를 모두 자식 객체로 전달하고 자식만의 멤버를 추가하는 것을 말합니다. 일반 객체지향 언어에서는 확장의 방법으로 대개 상속을 이용하는데 이 글에서 소개하는 방법은 실용적이면서도 간단한 자바스크립트만의 확장 방법에 대해 알아봅니다. 다음과 같은 순서로 상속을 구현하는 방법에 대해 소개합니다.프로토타입 멤버 상속인스턴스 멤버 상속멤버 확장 프로토타입 멤버 상속 구현 - prototype 여기서 소개하는 프로토타입 멤버 상속은 자바스크립트에서 흔히 이용되는 방법입니다. Person을 상속하는 Korean을 정의해 보도록 합니다. 다음은 먼저 Person 생성자의 코드입니다. javascript function Person() { // 인스턴스 멤버 정의는 없음 } //..

JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:35

자바스크립트 상속 사용 예제

javaScript 상속 자바스크립트의 상속은 기존의 객체나 생성자 함수를 기반으로 새로운 객체나 생성자 함수를 생성하는 것을 말합니다. 기존의 객체를 바탕으로 만들어지므로 상속을 통해 새로 만들어지는 객체에는 기존 객체의 특성을 모두 가지고 있습니다. 이를 기존의 객체에서 유산(속성과 메서드)을 물려받는 것과 비슷하다고 하여 상속이라는 말을 사용합니다. 다시 말해, 상속을 사용하면 이전에 만들었던 객체와 비슷한 객체를 쉽게 생성할 수 있습니다. 상속 활용 예제 코드 javascript function Rectangle(w , h) { var width = w; var height = h; this.getWidth = function () { return width; }; this.getHeight = ..

JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:35

Function 상속과 call,apply

Function prototype member Object 처럼 Function도 function 또는 new Function 으로 생성된 모든 함수 객체가 상속할 프로토타입 멤버를 정의하고 있습니다. Object의 프로토타입 멤버를 모든 객체에서 상속하듯이 Function의 프로토타입 멤버는 모든 함수에서 상속합니다. Function 생성자도 다른 함수처럼 프로토타입 객체를 갖는데, 이 프로토타입 객체의 실체는 Object 타입의 인스턴스입니다. 따라서 Function 인스턴스는 모두 Object의 프로토타입 멤버를 상속하게 됩니다. Function 프로토타입 멤버 Function의 프로토타입 객체에서 정의한 멤버를 정리하면 다음과 같습니다. Function 프로토타입의 속성 멤버 속성 : protot..

JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:34

생성자 함수 상속- inheritance

자바스크립트 - 생성자 함수 상속 기능 이 포스팅에서는 자바스크립트에서 생성자 함수를 이용하여 상속 기능을 어떤 방법으로 구현하는가를 간단한 예제를 보면서 정리해 봅니다. 상속은 다음과 같이 세 가지 기능을 가지고 있습니다.코드의 재사용중복코드 제거확장위의 기능을 어떻게 구현하는지에 대한 과정을 예제를 통해 알아봅니다. 생성자 함수의 상속 코드의 재사용과 상속을 하기에 앞서 다음과 같은 코드가 있다가 가정해 봅니다. javascript // ConstructorA function ConstructorA() { this.num01 = 1234; } ConstructorA.prototype.func01 = function () { console.log('this.num01 은 ' + this.num01); ..

JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:34

자바스크립트 객체지향 프로그래밍의 다형성

다형성 알아보기 다형성은 객체지향 프로그래밍 특징 중 가장 핵심적인 기능이라고 할 수 있습니다. 다형성의 개념을 학습하고 자바스크립트에서 다형성을 사용하는 방법에 대해 알아봅니다. 다형성이란? 다형성(polymorphism)은 특정 기능을 선언(설계)부분과 구현(동작)부분으로 분리한 후 구현부분을 다양한 방법으로 만들어 선택해서 사용할 수 있게 하는 기능힙니다. 여기서 선언부분은 인터페이스라고도 합니다. 좀더 자세히 설명하면 선언부분은 구현코드가 전혀 없는 텅 빈 상태이며 일종의 지켜야 할 약속(규약)으로 가득 찬 일종의 규약 문서입니다. 개발자는 문제를 해결하는 구현 코드를 선언부분에 맞게 구현하기만 하면 됩니다. 즉, 선언부분과 구현 부분은 1 : N 의 다형성 관계가 형성됩니다. 이해를 돕기 위해 ..

JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:33

객체 지향 프로그래밍의 추상화

객체 지향 프로그래밍 - OOP 객체지향 프로그래밍이란 캡슐화, 다형성, 상속을 이용하여 코드 재사용을 증가시키고, 유지보수를 감소시키는 장점을 얻기 위해서 객체들을 연결시켜 프로그래밍 하는 것 입니다. 이 내용은 책, 검색을 통해서 무수히 나오는 개념들입니다. 하지만 퍼블리셔란 직군에서 스타트한 제게는 이런 개념이 생소하기만 하며 어렵게 느껴집니다. 이 포스팅에서는 간단히 퍼블리셔 직군에서 자바스크립트를 사용하여 OOP 에 좀 더 가깝게 다가가 보자란 의미로 접근해 보도록 하겠습니다. 먼저 객체란 무엇인가? 객체는 실제 세계(real world) 를 모델링 하는 것입니다. OOP 는 실세계르 모델링 하기 위해 추상화(Abstraction)을 사용하는 프로그래밍 패러다임입니다. 추상화란 말 그대로 상세한..

JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:32

객체지향 프로그래밍의 캡슐화, 상속, 다형성

캡슐화란? 은닉성이다!!! 캡슐화는 중요한 데이터를 보존,보호하는 것입니다. 캡슐화(encapsulation)는 일반적으로 연관 있는 변수와 함수를 클래스로 묶는 작업을 말합니다. 그런데 이 작업은 클래스 만드는 작업과 비슷하다고 여길 수도 있습니다. 하지만 캡슐화에는 은닉성이란게 있어서 클래스에 담는 내용 중 중요한 데이터나 기능을 외부에서 접근하지 못하게 할 수 있습니다. 일반 OOP에서 지원하는 캡슐화 일반 OOP 언어에서는 접근지정자를 제공publicprotectedprivate 자바스크립트에서 캡슐화기본 publicprivate,protected 에 _ 붙여 선언 JavaScript function MyClass() { //public 프로퍼티 this.프로퍼티이름 = 값; //private/p..

JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:31

객체 지향 프로그래밍의 상속과 다형성

상속(Inheritance) 현실 세계에서 상속이란 부모가 가지고 있는 재산을 자식에게 물려주는 행위를 말합니다. @ 객체지향 프로그래밍에서 상속 상위(부모) 객체의 필드(속성)와 메소드를 하위(자식) 객체에게 물려주는 행위 하위 객체는 상위 객체를 확장해서 추가적인 필드(속성)와 메소드를 가질 수 있음 상속 대상: 필드(속성)와 메소드 @ 상속의 효과 상위 객체를 재사용해서 하위 객체를 빨리 개발할 수 있도록 한다. 반복된 코드의 중복을 줄여준다 유지 보수의 편리성을 제공해 준다. 객체의 다형성을 구현할 수 있다. 즉, 하위 객체에서 상위객체의 필드와 메소드를 따로 또 만들어서 사용할 필요가 없으며 상위 객체의 메소드에 문제가 있을 경우 상위 객체에서의 수정으로 인해 하위객체에서 문제가 있었던 메소드를..

JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:31

추상 클래스

추상클래스(Abstract Class) 추상 클래스 개념 추상(abstract)실체들 간에 공통되는 특성을 추출한 것을 말합니다. 예를 들어 새, 곤충, 물고기를 동물이라고 일컫는 것과 같이 공통되는 특성을 추출하여 의미론적으로 접근한 것입니다. 삼성, 현대, LG => 회사(추상) 추상 클래스실체 클래스들의 공통되는 필드와 메소드를 정의한 클래스를 말합니다. 추상 클래스는 실체 클래스의 부모 클래스 역할을 할 수 있습니다. 추상 클래스는 단독으로 객체 생성을 할 수 없고, 부모 클래스로만 사용됩니다. 추상 클래스의 용도 실체 클래스의 공통된 필드와 메소드의 이름을 통일할 목적실체 클래스를 설계하는 사람이 여러 사람일 경우, 실체 클래스마다 필드와 메소드가 제각기 다른 이름을 가질 수 있습니다. 실체 클..

JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:30

객체 리터럴 방식의 클래스

객체(Object) 리터럴 방식의 클래스 문법 var 인스턴스 = { 프로퍼티 : 초기값, . . . 메서드 : function(){ . . . } } 특징 (객체 리터럴일 경우를 일컫는다.) 1) 인스턴스를 만드는 구문을 작성하지 않아도 되는 장점이 있습니다. 인스턴스를 만드는 구문 var 인스턴스 = new 클래스이름(); 객체 리터럴 방식은 정의함과 동시에 인스턴스가 자동으로 만들어지기 때문에 인스턴스를 만드는 구문을 작성하지 않아도 되는 장점이 있습니다. 2) 이에 반면 인스턴스를 여러 개 만들 수 없는 단점이 있습니다. 예를 들어 여러 개의 탭 메뉴가 있을 경우 객체 리터럴 방식의 클래스 방법을 사용할 경우 인스턴스가 자동으로 생성되기 때문에 코드의 재사용성이 떨어지는 단점을 가지고 있습니다. ..