본문 바로가기

2017/08

[JavaScript] 자바스크립트 객체지향 프로그래밍 - 합성 ※ 합성이란? 필요한 기능을 직접 구현하는 것이 아니라 필요한 기능을 구현하고 있는 객체와 연결(합성)해서 기능을 사용하는 것. ※ 상속과 합성비교 상속과 합성 모두 기능을 직접 구현하지 않고 사용한다는 공통점이 있지만 각각 상황에 맞게 사용해야 한다. 클래스 상속을 사용할 때 - IS-A 관계가 성립 할때. ex) 요즘 스마트폰과 네비게이션에는 DMB기능이 포함되어 있다. 하지만 스마트폰은 DMB다, 네비게이션은 DMB이다는 잘못된 명제이다. 즉 IS-A 관계가 성립되지 않는다. - 기능을 재사용 하기보단 부모의 기능을 확장하기 위해 주로 사용. 합성을 사용할 때 - IS-A 관계는 신경쓰지 않는다. - 합성은 이미 구현되어 있는 기능을 빌려 쓰듯 재사용하고 싶을 때 주로 사용한다. 위의 네비게이션, .. 더보기
[JavaScript] 자바스크립트 객체지향 프로그래밍 - 다형성 ※ 다형성이란? 다형성은 특정 기능을 선언(설계)부분과 구현(동작)부분으로 분리한 후 구현부분을 다양한 방법으로 만들어 선택하여 사용할 수 있게 하는 기능이다. 몇가지의 예를 들어보자 도형은 여러가지의 모양을 가지고 있다. 만약 다양한 도형을 그리고 싶을 때 삼각형을 그릴때와 사각형을 그릴때, 원형을 그릴때의 방법은 달라야 할 것이다. 그렇다면 각각의 도형을 그리는 메서드들의 선언을 따로 해줘야 할까? 그건 아니다. 아래 그림과 같이 인터페이스나 추상클래스에 Draw()라는 메서드를 선언하여 놓고 해당 기능을 쓰는 Triangle클래스, Square클래스, Circle클래스에서 상속을 받아 해당 클래스에서 클래스에 맞게 기능을 구현해주면 된다는 말이다. 또 다른 예로 콘센트를 생각해보자 콘센트가 선언부분.. 더보기
[JavaScript] 자바스크립트 객체지향 프로그래밍 - 상속 ※ 상속이란? 부모 클래스의 속성과 메서드를 자식 클래스가 물려받는 것. 상속을 받은 자식 클래스는 부모 클래스의 속성과 메서드를 사용할 수 있고 필요한 기능을 추가해 확장할 수 있다. ※ 상속의 기능 코드의 복사 없이 자식클래스는 부모 클래스의 기능과 속성을 사용 가능하므로 다음과 같은 기능을 가질 수 있다. 코드 재사용 중복 코드 제거 확장성 ※ 자바스크립트에서 클래스 상속 자바스크립트에서는 객체지향 프로그래밍 특징 네 가지 중 유일하게 클래스 상속을 지원한다. 자바스크립트 상속은 프로토타입을 이용해 구현한다. function 부모클래스(){ this.프로퍼티 = 값; } 부모클래스.prototype.method = function(){ //기능구현 } function 자식클래스(){} //상속 자식.. 더보기
[JavaScript] 자바스크립트 객체지향 프로그래밍 - 캡슐화 ※ 캡슐화란? 일반적으로 연관 있는 변수와 함수를 클래스로 묶는 작업. 얼핏보면 그냥 클래스를 만드는 작업 이라고 생각 할 수 있다. 캡슐화에는 은닉성이란게 있어서 클래스에 담는 내용 중 외부에서 접근하지 말아야 하는 프로퍼티나 메서드는 외부에서 접근하지 못하게 만들 수 있다. ※ 접근 지정자 일반적으로 객체 내부에 들어있는 메서드와 프로퍼티는 객체 내부, 객체 외부, 자식 객체에서 접근이 가능하다. 하지만 일반 객체지향 프로그래밍에서는 캡슐화를 위해 접근 지정자라는 문법을 제공한다. 접근 지정자는 public, protected, private 가 있고 접근 범위는 public > protected > private 순이다. public - 모든 영역에서 접근 가능 protected - 자신과 자식 객.. 더보기
[JavaScript] 자바스크립트 객체지향 프로그래밍 - 추상화 ※ 추상화란? 객체지향에서 추상화란 객체들의 공통적인 프로퍼티와 메소드를 뽑아내는 작업을 의미 ex) 동물을 추상화 했을때.. 먹다() 메소드와 배설하다() 메소드는 모든 동물들의 공통 메소드가 될 수 있지만 날다()와 같은 메소드는 모든 동물들의 공통된 기능이 아니므로 추상화 작업시 삭제해야된다. ※ 자바스크립트에서 추상화 자바스크립트는 추상 클래스와 인터페이스를 제공하지 않기 때문에 클래스만을 이용하여 추상화 해야한다. 그렇기 때문에 인터페이스에 명시된 메서드를 연결된 클래스가 구현해야 하는 규약을 적용할 수 없다. 더보기
[JavaScript] 자바스크립트 객체지향 프로그래밍 기초 ※ 절차지향 프로그래밍 vs 객체지향 프로그래밍 - 절차지향 프로그래밍 여러개의 작은 함수로 나누어 작성, 함수들을 원하는 순서에 맞게 작성하는 방식 전역데이터를 공유해 사용하므로 데이터가 잘못 처리될 수 있음. 하지만 소규모 프로젝트에선 사용하기 편함 절차지향 프로그래밍의 형태 var 전역데이터1 = 값; var 전역데이터2 = 값; var 전역데이터3 = 값; 함수1(전역데이터1); 함수2(전역데이터1); 함수3(전역데이터2); 함수4(전역데이터3); .... - 객체지향 프로그래밍 여러개의 객체단위로 나눠 작업하는 방식, 클래스를 이용하여 연관있는 함수와 변수를 하나로 묶어 객체(인스턴스)를 생성해 사용. 개발자와 협업하는 규모가 큰 프로젝트에 사용하기 좋다 ※ 객체지향 프로그래밍의 특징 추상화 :.. 더보기
[jQuery] jQuery 플러그인 그룹 ※ 플러그인 그룹이란? - jQuery 플러그인을 만들다 보면 하나 이상의 연관된 플러그인을 만들게 된다. 이런 플러그인들간의 그룹을 플러그인 그룹이라 한다. 앞 글(jQuery 플러그인 제작)에서 jQuery플러그인을 프로토타입 클래스 기반으로 만들때는 아래와 같다고 했다. (function($){ //클래스 생성 function UserClass(selector){ //변수 설정 this.value1 = 값; this.value2 = 값; ... } //메서드 정의 UserClass.prototype.method1 = function(){ //기능구현 } UserClass.prototype.method2 = function(){ //기능구현 } UserClass.prototype.method3 = f.. 더보기
[jQuery] jQuery 플러그인 제작 ※ 유틸리티? 플러그인? 유틸리티 : 인스턴스를 생성하지 않고 클래스에 직접 접근해 도움을 주는 기능 플러그인 : 인스턴스를 생성하여 사용하고 특정 기능을 재사용하고자 할 때 사용하는 포장 기능 ※ jQuery 플러그인 소개 - 접근법 jQuery.유틸리티(); 또는 $.유틸리티(); - 자주 사용하는 유틸리티들 trim() : 공백제거 index() : 인덱스 탐색 extend() : 객체 병합 data() : HTML Element에 형태로 데이터를 저장/조회 jQuery 유틸 참조 : http://api.jquery.com/category/Utilities/ ※ jQuery 유틸리티 만들기 - 구조 (function($){ $.유틸리티 = function(){ //유틸리티 기능 구현 } })(jQu.. 더보기
[JavaScript] 자바스크립트 클래스 (2) ※ 함수단위 코딩 vs 클래스 단위 코딩 - 함수 단위 코딩을 하든 클래스 단위 코딩을 하든 같은 결과물이 나올 수 있다. 하지만 굳이 어려운 클래스 코딩으로 해야하는 이유는 무었일까? 함수단위의 코딩은 동일한 함수가 중복해서 만들어질 수 있다. 아래에서 처럼 tabMenu()함수를 사용하면 똑같은 함수가 중복되서 만들어진다. 이러한 문제점은 프로토 타입으로 클래스를 만들어 작성하면 해결이 된다. ex) $(document).ready(function(){ tabMenu("#tabMenu1"); tabMenu("#tabMenu2"); function tabMenu(selector){ $tabMenu = $(select); //tabMenu 함수의 내부 함수들 function inner1 (){ ... }.. 더보기
[JavaScript] 자바스크립트 클래스 (1) 클래스의 개념은 자바를 해봤다면 알고 있을 것이다. 자바스크립트는 객체지향 프로그래밍 언어에서 기본적으로 제공하는 클래스라는 개념을 제공하지 않는다. 하지만 자바스크립트에서는 클래스처럼 사용할 수 있는 방법을 세가지 지원한다. 이 세가지 방법은 클래스에 관한 개념을 정리한 후에 맨아래 부분 정리해 둔다. ※ 함수와 클래스 비교 함수 - 특정 기능을 하는 변수와 구문으로 이루어져 있다. 기능 단위의 코드 그룹화, 기능 단위의 중복 코드 제거 및 코드 재사용 클래스 - 연관 있는 변수와 함수로 구성되어 있다. 객체 단위의 코드 그룹화, 객체 단위의 중복 코드 제거 및 코드 재사용 ※ 객체 단위의 코드 그룹화? - 위에서 클래스는 연관 있는 변수와 함수로 구성되어 있다고 했다. - 이런식으로 객체 단위로 함수.. 더보기
[jQuery] 좌표 개념, 위치(좌표) 다루기, 크기 다루기 ※ 위치 개념 지역 좌표 : 부모 노드 기준 좌표 전역 좌표 : 최상위 노드인 document의 left, top 위치가 0으로 시작 ※ 위치다루기 지역 좌표 구하기 $대상.position().left / $대상.position().top ex) $("child").position().top; 지역 좌표 설정 $대상.css("left 또는 top 값") ex) $("child").css({ left : 값, top : 값 }); ex) $("child").css("left", 값); 부모 좌표 구하기 자바스크립트에서 부모 좌표 노드는 약간 다른데 DOM에서는 position의 속성값이 absolute와 relative의 설정이 있다. 그렇기 때문에 부모노드는 바로 위의 상위 노드가 아니라 position.. 더보기

티스토리툴바