Web/JavaScript
-
[디자인 패턴] 적응자 패턴, 빌더 패턴, 복합체 패턴Web/JavaScript 2020. 2. 5. 16:44
적응자 패턴 인자에 따라 구조가 변하는 패턴으로, 서로 다른 객체에 동일한 메서드를 만들고, 해당 객체를 생성자 객체의 인자로 넘겨 활용하는 패턴 다들 친구와 자신의 여자친구에게 인사하는 방식이 다를 것이다. 이를 코드로 구현해보자. var greetSystem = (function(){ var greetSystem = function(adapter){ this.adapter = adapter; } greetSystem.prototype.greeting = function(){ this.adapter.greeting(); } return greetSystem; })(); var friend = { greeting : function(){ console.log("ㅎㅇ"); } } var girlfriend..
-
[디자인 패턴] 플라이급 패턴, 퍼사드 패턴, 프록시 패턴Web/JavaScript 2020. 2. 4. 19:22
플라이급 패턴 객체의 다양한 속성(변수) 중 동일하게 가질 속성(변수)은 프로토타입으로 만들고, 각자 다르게 설정할 속성(변수)은 객체의 생성자 함수에 포함시킨다. var Person = (function(){ var Person = function(name){ // 객체마다 다르게 가질 속성 this.name = name; } // 객체마다 동일하게 가질 속성 Person.prototype.age = 24; Person.prototype.greet = function(){ console.log('hello, my name is ' + this.name); } return Person; })(); 퍼사드 패턴 퍼사드(facade)는 외관을 의미하는데, 이는 객체를 만들어 사용할 때, 복잡하고, 세부적인 ..
-
클로저Web/JavaScript 2020. 2. 2. 14:25
비공개 변수를 가질 수 있는 환경에 있는 함수를 클로저라고 부른다. 비공개 변수는 클로저 함수 내부에서 생성된 변수도 아니고, 매개변수도 아닌 변수를 의미하는데, 즉 클로저의 상위 컨텍스트에서 생성된 변수를 의미한다. 이를 구조화하면 다음처럼 된다. 함수() { 생성된 변수 // 비공개 변수 return 함수 or 함수를 담은 객체 } 위의 구조를 따르면서 예시를 만들어보자. var self = function (){ var name = "catnap"; var age = 24; var height = 176; var girlfriend = false; return { introduce: function(){ console.log("my name is " + name); console.log("my ag..
-
[디자인 패턴]즉시 함수 호출 표현식(IIFE)을 사용한 싱글턴 패턴Web/JavaScript 2020. 2. 1. 15:25
1. 즉시 함수 호출 표현식(IIFE) 익명함수와 즉시 함수 호출 표현식(IIFE)을 이해하고 넘어가는 것이 좋다. 먼저 간략하게 설명한 정의는 다음과 같다. 익명함수란 사용자가 자바스크립트에서 정의할 수 있는 함수 중 익명, 즉 이름이 없는 함수이다. 즉시 함수 호출 표현식(IIFE)은 함수를 선언과 동시 호출하는 표현식을 의미한다. 익명함수를 설명하기 위해선 즉시 함수 호출 표현식이 항상 따라온다. 기존 함수들은 이름이 존재하기 때문에 선언과 호출이 따로 이루어지지만, 익명함수는 이름이 없기 때문에 한 번 정의하고 난 후에, 나중에 호출할 수 방법이 없다. 그래서 즉시 함수 호출 표현식(IIFE)를 통해서 선언과 동시에 호출하여 사용한다. 즉시 함수 호출 표현식(IIFE)은 (function(){})..
-
값에 의한 vs 참조에 의한Web/JavaScript 2020. 1. 6. 20:37
자바스크립트를 공부하다 보면 C언어에서 매개변수로 값을 줄 때와 포인터를 줄 때처럼 명확한 표현 방식이 없음을 마주할 때가 있다. 그렇다면 어떻게 자바스크립트는 이 둘을 구분할까? 데이터 값 조작 방식으로 값에 의한(by value) 방식과 참조에 의한(by reference) 방식이 존재한다. (이하 값, 참조) 값을 통해 조작하는 경우는 기본 타입이라고 볼 수 있다. 예시로 숫자, 불리언, 문자열이 있다. 참조를 통해 조작하는 경우는 참조 타입인데, 객체(배열, 함수 등)가 그러하다. 위 두 가지의 차이점을 보면 참조 타입은 메모리의 크기가 불분명하기 때문에 메모리를 비효율적으로 많이 사용하는 경우에 속한다. (문자열은 이후에 다시 설명) var n = 1; // 숫자, 문자열, 불리언은 기본 타입 ..
-
[DOM]ID, Class, Name 속성에 대해Web/JavaScript 2018. 1. 2. 01:39
HTML 문서를 작성하다 보면 태그 안에 속성 값으로 id, class, name이 존재하는 것을 경험할 수 있다. 오늘은 이 속성들의 차이를 명확히 구분짓고 가는 것이 후에 도움이 될 것 같아서 이렇게 정리하는 시간을 가지게 되었다. 차이이 셋의 차이를 Mozilla 사이트의 내용을 참고하면서 간단하게 비교해보자.1. Id먼저 공식 Mozilla 사이트에서 살펴보면 ID를 다음과 같이 설명하고 있다. idDefines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting..