FRONT-END (23) 썸네일형 리스트형 자바스크립트 디자인 패턴 #2. Event Delegation 패턴 이벤트 델리게이션 패턴이벤트 델리게이션(delegation) 패턴은 매우 실용적으로 사용할 수 있는 디자인 패턴이다.이 패턴은 다수의 HTML에 이벤트를 걸어야할 때, 그리고 활발한 이벤트 처리가 필요할 때 구성하면 좋다.다수의 DOM 모두에 이벤트리스너를 부여하는 것이 아니라, 대표 DOM에만 이벤트를 걸어서 처리하는 패턴이다. 일반적으로 간단한 사이트를 개발할 때 동적으로 움직이거나 동작하는 메뉴와 화면에 개별적으로 이벤트 리스너를 할당하여 관리한다.따라서 이벤트 리스너를 할당하고자 하는 DOM의 수가 많지 않아서 큰 문제가 없다.하지만 DOM이 아주 많고 이벤트도 복잡하고 다양한다면, 일일이 모든 DOM에 이벤트 리스너를 할당하는 것은 초기화 단계에서 컴퓨팅 자원을 많이 소모하는 문제가 있을 수 있.. 자바스크립트 디자인 패턴 #1. Module 패턴 모듈패턴서버개발을 하거나 라이브러리, API등을 개발할 때 유용하게 사용할 수 있다.파일 단위로 관리할 수 있도록 자바스크립트를 모듈화해주고, 단위테스트를 모듈 단위로 실행할 수 있도록 하여 시험 계획에도 도움이 된다.글로벌 변수나 함수들을 최소화함으로써 다른 자바스크립트 라이브러리나 소스를 가져다 쓸 때 충돌이 일어날 확률을 최소화한다.또 모듈단위로 소스를 갭라하면 각 모듈 간의 의존성을 최소화하거나 의존성을 파악하기 쉽다.장기적이고 규모가 큰 자바스크립트 프로젝트를 관리하기가 좋다.자바스크립트 라이브러리나 API 등을 개발하여 다른 개발자들에게 제공할 때, 이를 활용하는 개발자들이 모듈단위로 함수나 변수들의 활용도를 예측할 수 있는 네임스페이스로도 활용 할수 있다. (function(window) {.. 자바스크립트 상속(Object.create) 자바스크립트에서의 상속 기존의 상속 구현방법function Person() { this.name = "anonymous"; this.job = "none"; this.sayHello = function() { alert("Hello, my name is " + this.name); };} function Unikys() { var obj = new Person(); obj.name = "Unikys"; obj.job = "Programmer"; return obj;}var me = new Unikys();me.sayHello(); //Hello, my name is Unikys console.log(unikys instanceof Unikys); //falseconsole.log(unikys instan.. 자바스크립트의 프로토타입 자바스크립트는 객체지향 개념을 지원하기 위해 프로토타입을 사용한다. 프로토타입prototype의 사전적 의미 '원형'자바스크립트에 투영해서 무엇의 원형을 나타내는지 생각하면된다.자바에서 객체를 class로 정의하지만자바스크립트에서는 function으로 정의한다. function Person(name, age);this.name = name;this.age = age;} var tomas = new Person("tomas", 15);alert(tomas.name); this 함수호출하는 방법1. 일반 함수로의 호출2. 멤버 함수로의 호출3. call() 함수를 이용한 호출4. apply() 함수를 이용한 호출 1)function say(something){alert(something);}say("Hell.. 자바스크립트의 변수 자바스크립트의 기본형 typeof number(숫자)string(문자열)boolean(이진 값)undefinednullsymbol 자바스크립트느 기본형 변수들과 Object를 기초로하는 객체들로 구성된다.특정 변수가 어떤 형태 인지 확인하는 연산자로 typeof가 있다. undefined - 정의되지 않는 값 또는 해당 값을 가진 변수boolean - ture/false 값 또는 해당 값을 가진 변수number - 숫자 값 또는 해당 값을 가진 변수string - 문자열 값 또는 해당 값을 가진 변수object - 객체 또는 객체를 저장하는 변수function - 함수 또는 함수를 저장하는 변수symbol - Symbol() 함수로 생성한 키 변수형에 따른 분기 처리var myVariable = func.. 자바스크립트 스코프와 클로저 스코프스코프란? 현재 접근할 수 있는 변수들의 범위를 뜻한다. 어떤 변수가 스코프 안에서 선언되었으면 해당 스코프 안에서 변수를 접근해서 읽거나 쓸 수 있다.스코프 밖에서는 해당 변수에 접근할 수 없다. 스코프의 생성자바스크립트의 스코프는 특정 구문이 실행 될때 새로 생성하여 스코프 체인을 생성하게 된다.스코프를 생성하는 구문functionwithcatch 스코프의 지속성새로운 스코프가 생성되고 스코프 체인을 참조하는 함수를 변수에도 넣을 수 있다.다른 함수의 인자로 넘겨줄수도 있다.함수의 반환값으로 활용할수도 있다. 즉, 함수가 선언된 곳이 아닌 전혀 다른 곳에서 함수가 호출될 수 있어서 해당 함수가 현재 참조하는 스코프를 지속할 필요가 있는 것이다. function () {} 함수리터럴이라고 한다. .. jqGrid_프론트 jqGrid 관련..예전 프로젝트(2012~2013년쯤)때 상용그리드를 사용하다가 jqGrid를 알게되었다.그리고 다시 jqGrid를 사용하면서 jqGrid관련 자료를 찾기가 어려웠다.ㅠㅠ자료는 많은데 내가 사용하고 싶은 부분을 찾기란.. ㅡㅡ;; 쉽지 않아 jqGrid를 정리해본다. $("#grid").jqGrid({ url: '/managerListJsonTest.action', caption: "시스템 관리자 리스트", // caption : 그리드의 제목을 지정한다. datatype: "json", // datatype : 데이터 타입을 지정한다. loadtext : '로딩중...', mtype : 'post', // mtype : 데이터 전송방식을 지정한다.// loadonce : true, /.. 이전 1 2 3 다음
