본문 바로가기

플밍 is 뭔들/JavaScript&jQuery

[JavaScript] ECMAScript 2015 / ES6 (4) / Promise, async-await ※ 프로미스(Promise) 싱글쓰레드인 자바스크립트에서 비동기 처리를 위해서 콜백(callback)을 사용해 왔다. 그 결과 비동기 처리를 온전히 해낼 수 있었지만 이런 콜백이 사용되는 경우가 많아지면서 단점이 드러났다. 단점은 비동기 처리를 순차적으로 해야할 경우 비동기 처리를 중첩시켜서 표현하므로 에러, 예외처리가 어렵다는 것과 중첩으로 인한 복잡도가 증가하는 것이다. 크게 이 두가지 단점을 해결하기 위해 프로미스가 예전부터 라이브러리로 생겨났고, 이것을 ES6에서는 언어적 차원에서 지원을 하게 되었다. ※ 동기(Sync)? 비동기(Async)? 동기는 메소드를 실행시킴과 동시에 반환 값이 기대되는 경우를 동기 라고 표현하고 그렇지 않은 경우에 비동기 라고 한다. 메소드를 실행시킴과 동시에 반환 값.. 더보기
[JavaScript] ECMAScript 2015 / ES6 (3) / 화살표 함수 ※ 기존 함수와 형태비교 function getDouble(num) { return num*2; } //화살표 함수 const getDouble = (num) => num*2; ※ 파라미터에 따른 화살표 함수의 형태 const noParam = () => "No Param"; const oneParam = (param) => param ; const multiParam = (paramOne, paramTwo) => paramOne + paramTwo; ※ 파라미터에 따른 화살표 함수(블록을 추가) const noParam = () => { return "No Param"; }; const oneParam = (param) => { return param ; }; const multiParam = (par.. 더보기
[JavaScript] ECMAScript 2015 / ES6 (2) / 클래스(Class) ES6 클래스는 프로토타입 기반 객체지향 패턴을 더 쉽게 사용할 수 있는 대체재이다. 클래스 패턴 생성을 더 쉽고 단순하게 생성할 수 있어서 사용하기도 편하고 상호운용성도 증가된다고 한다. ※ 클래스 생성자 생성자는 constructor 이름을 갖는 특수한 형태의 함수이다. class Timer { //constructor 생성자 constructor(time){ this.time = time; } } ※ 클래스 메소드 class Timer { //constructor 생성자 constructor(time){ this.time = time; } getTime(){ return this.time; } setTime(time){ this.time = time; } } ※ 클래스 인스턴스화 const time.. 더보기
[JavaScript] ECMAScript 2015 / ES6 (1) / var, let, const ECMAScript는 JavaScript 프로그래밍 언어를 정의하는 국제 표준의 기구이다. ECMAScript의 6번째 표준인 ES 2015에서 모던 프로그래밍 요소를 도입해 문법이 혁신적으로 바뀌었고 사용하기 편리해졌다. ※ 변수, 상수선언 (var, let, const) var, let은 변수를 선언하는 키워드이고 const는 상수를 선언하는 키워드이다.var, let은 변수선언 키워드 이므로 값의 재할당이 가능하지만, const는 상수선언 키워드 이므로 값의 재할당이 불가능하다. 또한 const는 선언과 동시에 값을 할당해 줘야 한다. const name = "LEE"; name = "KIM"; //error let name = "LEE"; name = "KIM"; var name = "LEE"; .. 더보기
[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.. 더보기

티스토리툴바