[자바스크립트 디자인 패턴] 프로토 타입 패턴

목록 싱글톤 패턴 (Singletpm Pattern) 모듈 패턴 (Module Pattern) 옵저버 패턴 (Observer Pattern) 프로토타입 패턴 (Prototype Pattern) JavaScript 에서 Java 와 같이 클래스의 개념을 적용하기 위해 필요한 개념입니다. 인터페이스 역할을 할 Component 객체를 생성하고 공통변수와 공통함수를 작성합니다. Component 객체를 상속받는 Circle 객체를 생성하고, Circle 생성자에 Component가 아닌 Circle 을 집어넣어서 부모 생성자를 참조하지 않도록 하고, Circle 생성자 내부에 부모생성자를 이용하는 코드를 작성해줍니다. Circle 의 프로토타입에 Component 객체를 참조하도록 작성합니다. Circle 에..

• format_list_bulleted Javascript/Design Patterns
• · 2021. 3. 17.
• textsms

[자바스크립트 디자인 패턴] 옵저버 패턴

목록 싱글톤 패턴 (Singletpm Pattern) 모듈 패턴 (Module Pattern) 옵저버 패턴 (Observer Pattern) 프로토타입 패턴 (Prototype Pattern) 상대 클래스나 객체에 의존하지 않으면서 데이터 변경을 통보하고자 할 때 사용합니다. Subject, Observer 를 선언합니다 - Subject : 변경과 감지를 통보하여 Observer들을 관리하는 역할 - Observer : 변경과 감지를 통보받는 역할 작성코드 var Subject = function() { var observers = []; return { subscribeObserver: function(observer) { observers.push(observer); }, unsubscribeObs..

• format_list_bulleted Javascript/Design Patterns
• · 2021. 3. 17.
• textsms

[자바스크립트 디자인 패턴] 모듈 패턴

목록 싱글톤 패턴 (Singletpm Pattern) 모듈 패턴 (Module Pattern) 옵저버 패턴 (Observer Pattern) 프로토타입 패턴 (Prototype Pattern) 특정 구성요소를 다른 구성요소와 독립적으로 유지하는 패턴을 말합니다. Module 모듈을 생성합니다 getTitle : 내부의 title 변수를 불러올 수 있습니다. 모듈을 이용하는 코드에서는 내부의 title 변수와 printTitle 함수에 접근할 수 없고 정해진 함수인 getTitle를 통해서만 접근할 수 있습니다. 작성코드 var Module = function(){ var title = 'Module 패턴'; var printTitle = function (){ console.log('제목 : ' + ti..

• format_list_bulleted Javascript/Design Patterns
• · 2021. 3. 17.
• textsms

[자바스크립트 디자인 패턴] 싱글톤 패턴

목록 싱글톤 패턴 (Singletpm Pattern) 모듈 패턴 (Module Pattern) 옵저버 패턴 (Observer Pattern) 프로토타입 패턴 (Prototype Pattern) 전체 시스템에서 하나의 인스턴스만 존재하도록 보장하는 객체패턴을 말합니다. Singleton 모듈을 생성합니다 init : 제공하고싶은 함수들을 모두 작성합니다 (print, ...) getInstance : 함수를 호출한 다음 init에서 제공하는 함수를 이용할 수 있도록 init 함수를 instance에 담아서 리턴합니다 작성코드 var Singleton = (function(){ var instance; var init = function(){ return { print : function(){ console..

• format_list_bulleted Javascript/Design Patterns
• · 2021. 3. 17.
• textsms

압축(minify)된 CSS와 JS를 보기 좋게 해제해주는 unminify.com

웹사이트를 둘러보면서 다른 사이트의 CSS나 Javascript를 확인하고 싶을 때가 있습니다. 사이트 소스보기를 해서 보면 대부분 압축(minify)되어 있어서 보기 어려운 경우가 많습니다. 이 사이트를 알기전에는 그랬습니다. 진짜 엔터키를 눌러 수작업으로 둘러 보기도 했습니다. 하지만 이제는 그럴 필요가 없습니다. 압축을 해제해 주는 사이트가 많이 있기 때문입니다. 최근 프로젝트에서도 편리하게 사용한 압축(minify)된 CSS와 JS를 보기 좋게 해제해 주는 사이트 하나를 소개해 드립니다. Unminify https://unminify.com/ 압축(minify)된 CSS와 JS를 보기 좋게 해제해주는 unminify.com 예를 들면 아래와 같이 한줄로 길게 압축된 CSS의 경우에도 복사해서 버튼..

• format_list_bulleted Javascript/Library
• · 2021. 3. 8.
• textsms

[JQuery][TIP] 특정 영역을 제외한 부분을 클릭했을 때

특정 영역을 제외한 부분을 클릭했을 때 이벤트를 발생시켜야 할 때가 있다. 그때는 다음과 같이 하면 된다. $('html').click(function(e) { if(!$(e.target).hasClass("area")) { alert('영역 밖입니다.'); } }); 즉 특정 영역에 class명을 부여하고 클릭한 곳에 그 클래스명이 없으면 이벤트를 발생시키는 로직입니다.

• format_list_bulleted Javascript/jQuery
• · 2021. 1. 6.
• textsms

[JQuery][TIP]선택한 element 의 attribute로 배열 만들기

One Two Three Four Five 를 다음과 같이 배열로 만드는 방법은 여러가지 겠지만 간단히 map 함수를 이용할 수 있다. [1, 2, 3, 4, 5] var arr = $.map($("li"), function(item) { return $(item).attr("value"); });

• format_list_bulleted Javascript/jQuery
• · 2021. 1. 6.
• textsms

[JQuery][TIP] element 안에 자식 element 변화 없이 텍스트만 변경하기

First Child Last 다음과 같을 때 First 를 Second로 바꾸고 싶을 때 어떻게 하면 될까?! $(".parent").contents() 를 하면 다음과 같이 나온다. ["First", Child, "Last"] $(".parent").contents()[0].textContent = "Second" 하면 First 값이 Second로 바뀐다.

• format_list_bulleted Javascript/jQuery
• · 2021. 1. 6.
• textsms

[JQuery][TIP] 현재 엘레멘트가 보이는지 체크 (check visible)

브라우저에 element가 보이는지 체크하려면 다음과 같이 하면 된다. $(element).is(":visible") 출처: https://chobokkiri.tistory.com/43?category=656562 [초보끼리]

• format_list_bulleted Javascript/jQuery
• · 2021. 1. 6.
• textsms

[JQuery][TIP] Form submit 에서 동적으로 POST parameter 넘기기

submit 하고 나서 동적으로 데이터를 삽입하여 변수를 서버로 전송할 때 동적으로 Param을 넘겨줄 때 다음과 같이 사용하면 된다. 선택자 "#form1" 은 태그의 ID 값을 임의로 넣은 것이다. var input = $("") .attr("type", "hidden") .attr("name", "mydata").val("bla"); $('#form1').append($(input)); 출처: https://chobokkiri.tistory.com/20?category=656562 [초보끼리]

• format_list_bulleted Javascript/jQuery
• · 2021. 1. 6.
• textsms