그뤠잇한 개발 로그

1. arguments 객체자바스크립트에서는 함수를 호출할 떄 함수 형식에 맞춰 인자를 넘기지 않더라도 에러가 발생하지 않는다.정의된 함수의 인자보다 적게 함수를 호출할 경우, 넘겨지지 않는 인자에는 undefined 값이 할당된다.반대의 경우, 초과된 인수는 무시된다. 이러한 특성 때문에 런타임 시에 호출된 인자의 개수를 확인하고 이에 따라 동작을 다르게 해야 할 때가 있다.이 것을 가능하게 하는 것이 arguments 객체이다. 함수를 호출할 때 암묵적으로 arguments 객체가 함수 내부로 전달된다.arguments 객체는 함수를 호출할 때 넘긴 인자들이 저장되는 유사 배열 객체이다. arguments 객체는 다음과 같이 구성되어 있다.- 함수를 호출할 때 넘겨진 인자(배열 형태)- length ..

1. 콜백 함수익명 함수의 대표적인 용도이다.코드를 통해 명시적으로 호출하는 함수가 아니라, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출되는 함수이다.또한, 특정 함수의 인자로 넘겨서, 코드 내부에서 호출되는 함수이다. 대표적인 예는 자바스크립트에서의 이벤트 핸들러 처리이다. 2. 즉시 실행 함수함수를 정의함과 동시에 바로 실행하는 함수이다.즉시 실행 함수의 경우, 같은 함수를 다시 호출할 수 없다.따라서 이러한 특징을 이용하여 최초 한 번의 실행만을 필요로 하는 초기화 코드 부분 등에 사용할 수 있다. jQuery와 같은 자바스크립트 라이브러리나 프레임워크의 소스들에서도 사용이 되는데, 그 이유는 자바스크립트의 변수 유효 범위 특성 때문이다. 자바스크립트에서는 함수 유효 범위를 지..

1. 자바스크립트에서는 함수도 객체다함수의 기본 기능인 코드 실행뿐만 아니라, 함수 자체가 일반 객체처럼 자신의 프로퍼티들을 가질 수 있다. 2. 자바스크립트에서 함수는 값으로 취급된다함수도 일반 객체처럼 취급될 수 있다. 때문에 다음과 같은 동작이 가능하다.- 리터럴에 의해 생성- 변수나 배열의 요소, 객체의 프로퍼티 등에 할당 가능- 함수의 인자로 전달 가능- 함수의 리턴값으로 리턴 가능- 동적으로 프로퍼티를 생성 및 할당 가능 이런 기능이 모두 가능한 객체를 일급 객체라고 한다.자바스크립트 함수가 가지는 이런 일급 객체의 특성으로 함수형 프로그래밍이 가능하다. 변수나 프로퍼티의 값으로 할당// 변수에 함수 할당var foo = 100;var bar = function() { return 100; }..

1. 함수 선언문 방식으로 함수 선언하기함수 선언문 방식으로 정의된 함수는 반드시 함수명이 정의되어 있어야 한다.function add(x, y) {return x + y;}console.log(add(3,4)); 2. 함수 표현식 방식으로 함수 생성하기함수 리터럴로 하나의 함수를 만들고, 여기서 생성된 함수를 변수에 할당하여 함수를 생성하는 것을 함수 표현식이라고 한다. 함수 리터럴로 함수를 생성한 다음, 이를 변수에 저장한 것이다. 여기서 함수 리터럴로 생성한 함수는 함수명이 없으므로 익명 함수이다. 즉 익명 함수를 이용한 함수 표현식 방법(익명 함수 표현식)이라고 한다.var add = function(x, y) {return x + y;}; var plus = add;console.log(add(..

네임스페이스 패턴, 의존 관계 선언, 모듈 패턴, 샌드박스 패턴 등은 애플리케이션 코드를 정리하고 구조화할 수 있게 도와주고 암묵적 전역의 영향력을 약화시킨다. 1. 네임스페이스 패턴네임스페이스는 프로그램에서 필요로 하는 전역 변수의 개수를 줄이는 동시에 과도한 접두어를 사용하지 않고도 이름이 겹치지 않게 해준다.수많은 함수, 객체, 변수들로 전역 유효범위를 어지럽히는 대신, 애플리케이션이나 라이브러리를 위한 전역 객체를 하나 만들고(단 하나만 만드는 것이 이상적이다.) 모든 기능을 이 객체에 추가하면 된다. 수정 전 (안티 패턴) 수정 후 단점1) 모든 변수와 함수에 접두어를 붙여야 하기 때문에 전체적으로 코드량이 약간 더 많아진다. 따라서 다운로드해야 하는 파일 크기도 늘어난다.2) 전역 인스턴스가 ..

1. 함수 선언문과 표현식의 차이 : 호이스팅함수 내에서 foo와 bar를 정의하면, 함수의 맨 윗 부분으로 끌어올려져 전역 변수를 덮어쓰게 된다. 2. 함수 반환하기함수는 객체이기 때문에 반환값으로 사용될 수 있다.setup()은 반환된 함수를 감싸고 있기 때문에 클로저를 생성한다.클로저는 코드 외부에서 접근할 수 없기 때문에, 비공개 데이터 저장을 위해 사용할 수 있다. 3. 자기 자신을 정의하는 함수이 패턴은 함수가 어떤 초기화 작업을 단 한 번만 수행할 경우, 자기 자신을 재정의하여 구현 내용을 갱신하는 용도로 사용된다. 재정의된 함수의 작업량이 적기 때문에 애플리케이션 성능에 도움이 된다. 단점 - 자기 자신을 재정의한 이후에는 원본에 추가했던 프로퍼티들을 찾을 수 없게 된다 - 다른 변수에 할..

1. 객체 리터럴객체 리터럴 표기법var dog = {name: "happy", getName: function() { return dog.name;} };delete dog.name; // 프로퍼티나 메서드 삭제 생성자 함수로 객체 생성// 내장 생성자 사용 - 안티패턴 var dog = new Object();dog.name = "happy";dog.getName = function() {return dog.name;}; - 리터럴 표기법을 사용하면 유효범위 판별 작업이 발생하지 않는다. - 생성자 함수를 사용하면 지역 유효범위에 동일한 이름의 생성자가 있을 수 있기 때문에 Object()를 호출한 위치에서부터 전역 Object 생성자까지 인터프리터가 쭉 거슬러 올라가며 유효범위를 검색해야 한다. 객..

1. 유지보수 가능한 코드 작성유지보수 가능한 코드의 특징 - 읽기 쉽다. - 일관적이다. - 예측 가능하다. - 한 사람이 작성한 것처럼 보인다. - 문서화되어 있다. 2. 전역 변수 최소화자바스크립트는 함수를 사용하여 유효범위를 관리한다. 모든 자바스크립트 실행 환경에는 전역 객체가 존재한다. 어떤 함수에도 속하지 않은 상태에서 this를 사용하면 전역 객체에 접근하게 된다. 전역 변수를 생성하는 것은, 이 전역 객체의 프로퍼티를 만드는 것과 같다. 편의상 브라우저에는 전역 객체에 window라는 부가적인 프로퍼티가 존재하며 전역 객체 자신을 가리킨다. 다음은 브라우저 환경에서 전역 변수를 생성하고 이 변수에 접근하는 방법이다.myglobal = "hello"; // 안티패턴 console.log(m..

PDFMake를 이용해서 테이블을 만들 수 있지만, 복잡한 테이블을 생성하려니 매우 번거로운 작업이었다.따라서 특정 영역을 이미지로 캡쳐하여 pdf로 생성하는 방법을 택했다. 사용한 API1. PDFMake : pdf를 생성한다.2. html2canvas : 웹페이지 상의 요소를 캡쳐, 이미지로 저장한다. 구현 방법 - capture 할 요소들을 이미지로 변환하여 pdf로 생성될 content 리스트에 추가해준다. - 마지막 요소인 경우, pdf를 생성, 다운로드 한다. - 4번째 요소마다 다음 페이지로 넘긴다. - 한글을 출력하기 위해서는 font를 포함한 새로운 vfs_fonts.js 파일을 생성해야 한다. 참고) https://github.com/bpampuch/pdfmake/issues/33 결과

http://blog.mgechev.com/2013/04/24/why-to-use-publishsubscribe-in-javascript///Model function Book(name, isbn) { this.name = name; this.isbn = isbn; } function BookCollection(books) { this.books = books; } BookCollection.prototype.addBook = function (book) { this.books.push(book); $.publish('book-added', book); return book; } BookCollection.prototype.removeBook = function (book) { var removed; i..