pug/jade template

Guide pug/jade 템플릿 엔진 pug 마크업 작성 팁(?)에 대해 알아봅니다. 아래와 같이 pug 를 작성합니다. Pug/jade p.result_number | 검색결과 : span. 총 #[strong.point_color_03 785] 건 p.result_number | 검색결과 : span.className. 총 #[strong.point_color_03 785] 건 b 강조 다음과 같이 HTML 로 컴파일됩니다. html 검색결과 : 총 785 건 검색결과 : 총 785 건 강조 Pug/jade span.text.accent-1 [바로가기] a(href="#"): span.text 사이트+지역 html [바로가기] 사이트+지역 Jaehee's WebClub
Private Zone 2016. 11. 1. 09:12

Chaining Pattern of JavaScript

체이닝패턴 체이닝 패턴이란 객체에 연쇄적으로 메서드를 호출할 수 있도록 하는 패턴입니다. 여러 가지 동작을 수행할 때, 먼저 수행한 동작의 반환 값을 변수에 할당한 후 다음 작업을 할 필요가 없기 때문에 호출을 여러 줄에 걸쳐 쪼개지 않아도 됩니다. javascript myobj.method1('hello').method2().method3('world').method4(); 만약 메서드에 의미있는 반환 값이 존재하지 않는다면, 현재 작업중인 객체 인스턴스인 this 를 반환하게 됩니다. 이렇게 하면 객체의 사용자는 앞선 메서드에 이어 다음 메서드를 바로 호출할 수 있습니다. javascript var obj = { value : 1, increment : function () { this.value +..
JavaScript/JS 객체지향 프로그래밍 2016. 10. 31. 07:00

자바스크립트의 객체 상수

객체 상수 자바스크립트에는 상수가 없지만 대다수 최신 브라우저 환경에서는 const 문을 통해 상수를 생성할 수 있습니다. 흔히 사용되는 우회적인 방법으로, 명명 규칙을 사용하여 값이 변경되지 말아야 하는 변수명을 모두 대문자로 쓰기도 합니다. 이 규칙은 실제로 자바스크립트 내장 객체에서도 사용됩니다. javascript Math.PI; // 3.1415922653589793 Math.SQRT2; // 1.4142135623720951 Number.MAX_VALUE; // 1.7976931348623157e+308 사용자 정의 상수에도 동일한 명명 규칙을 적용하여, 생성자 함수에 스태틱 프로퍼티로 추가할 수 있습니다. javascript // 생성자 var Widget = function () { // ..
JavaScript/JS 활용 & etc.. 2016. 10. 30. 09:30

Static member of JavaScript

스태틱 멤버 스태틱 프로퍼티와 메서드란 인스턴스에 따라 달라지지 않는 프로퍼티와 메서드 를 말합니다. 클래스 기반 언어에서는 별도의 문법을 통해 스택틱 멤버를 생성하여 클래스 자체의 멤버인 것처럼 사용할 수 있습니다. 예를 들어 MathUtils 클래스에 max() 라는 스태틱 메서드가 있다면MathUtils.max(2,5) 와 같은 식으로 호출할 수 있습니다. 이것은 공개 스태틱 멤버의 예로, 클래스의 인스턴스를 생성하지 않고도 사용할 수 있습니다. 비공개 스태틱 멤버는 클래스 사용자에게는 보이지 않지만 클래스의 인스턴스들은 모두 함께 사용할 수 있습니다. 그럼 자바스크립트에서 공개와 비공개 스태틱 멤버를 구현하는 방법을 살펴보도록 합니다. 공개 스태틱 멤버 자바스크립트에는 스태틱 멤버를 표기하는 별도..
JavaScript/JS 객체지향 프로그래밍 2016. 10. 29. 16:15

jQuery, bootstrap cdn 의 속성 : integrity, crossorigin

integrity, crossorigin The folks over at MaxCDN graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these Bootstrap CDN links. 부트스트랩 CDN 에는 다음과 같은 intergrity, crossorigin 인 attribute 가 있습니다. html 위 attribute 가 있는 이유는 보안때문입니다. Intergrity 는 보안과 관련된 속성인데 알약 블로그에 상세히 설명되어 있어 그 내용을 발췌했습니다. JavaScript를 기반으로 한 DDoS 공격 DDoS란 Distributed Denial of Service의 약자로, DoS공격이 발전된 형태입니다. D..
Dev Environment/개발 기타 자료 2016. 10. 20. 09:18

모듈 패턴(기타) 및 샌드박스 패턴 #3

모듈 노출 패턴, 생성자를 생성하는 모듈 그리고 샌드박스 패턴 이 포스팅에서는 전 포스팅의 모듈 패턴 #2 에서 알아본 내용 이외의 패턴들에 대해 알아봅니다. 모듈 노출 패턴 전 포스팅에서 비공개 멤버와 관련된 패턴을 살펴보면서 이미 노출 패턴을 다룬 바 있습니다. 모듈 패턴도 비슷한 방식으로 작성할 수 있습니다. 즉, 모든 메서드를 비공개 상태로 유지하고, 최종적으로 공개 API 를 갖출 때 공개할 메서드만 골라서 노출하는 것입니다. javascript var MYAPP = MYAPP || {}; MYAPP.namespace = function (ns_string) { var parts = ns_string.split('.'), parent = MYAPP, i; // 처음에 중복되는 전역 객체명은 제거..
JavaScript/JS 객체지향 프로그래밍 2016. 10. 19. 08:31

Global NameSpace Function(범용 네임스페이스 함수)

네임스페이스 패턴 생성시 유용한 범용적인 네임스페이스 함수 프로그램의 복잡도가 증가하고 코드의 각 부분들이 별개의 파일로 분리되어 선택적으로 문서에 포함하게 되면, 어떤 코드가 특정 네임스페이스나 그 내부의 프로퍼티를 처음으로 정의한다고 가정하기가 위험합니다. 네임스페이스에 추가하려는 프로퍼티가 이미 존재할 수도 있고 따라서 내용을 덮어쓰게 될 지도 모릅니다. 그러므로 네임스페이스를 생성하거나 프로퍼티를 추가하기 전에 먼저 이미 존재하는지 여부를 확인하는 것이 최선입니다. 다음의 예제를 살펴보도록 합니다. javascript // 위험하다. var MYAPP = {}; // 개선안 if (typeof MYAPP === 'undefined') { MYAPP = {}; } // 또는 더 짧게 작성할 수 있다..
JavaScript/JS 활용 & etc.. 2016. 10. 15. 07:00

모듈화와 모듈 패턴(module pattern) #2

Module Pattern모듈화와 모듈 패턴에 대해 알아봅니다. 먼저 이 개념에 대해 알아보기 전에 고유변수(private member)와 특권메소드(privileged member)에 대해 간략히 짚고 넘어가자. 자바 등 다른 언어와는 달리 자바스크립트에는 private, protected, public 프로퍼티와 메서드를 나타내는 별도의 문법이 없다. 객체의 모든 멤버는 public, 즉 공개되어 있다.다시 말해서,자바스크립트에는 고유 구성원(private member)이란 개념이 없으며 객체의 프로퍼티는 모두 공용(public)이다. 하지만 '고유변수'란 개념은 존재한다. 예를 들어 함수 안에서 정의한 변수는 함수 밖에서 접근할 수가 없으므로 모두 고유변수(private member)라고 간주한다...
JavaScript/JS 객체지향 프로그래밍 2016. 10. 14. 15:17

module pattern (모듈패턴) #1

Module Pattern 모듈 패턴을 알아보기 전에 네임스페이스란 용어부터 짚고 넘어가 보겠습니다. 네임스페이스란 수많은 함수, 객체, 변수들로 이루어진 코드가 전역 유효범위를 어지럽히지 않고, 애플리케이션이나 라이브러리를 위한 하나의 전역 객체를 만들고 모든 기능을 이 객체에 추가하는 것을 말합니다. 예를 들어 jQuery와 같은 라이브러리에서 jQuery가 네임스페이스를 가지며 jQuery 이름 내에 모든 기능을 추가하는 것을 말합니다. 다시 말해서, 코드에 네임스페이스를 지정해주며, 코드 내의 이름 충돌뿐만 아니라 이 코드와 같은 페이지에 존재하는 또 다른 자바스크립트 라이브러리나 위젯등 서드파티 코드와의 이름 충돌도 미연에 방지해 주는 것입니다. 우리는 이러한 네이스페이스 패턴을 작은 기능들 만..
JavaScript/JS 객체지향 프로그래밍 2016. 10. 14. 15:08

커링 함수 (Curring function)

커링(Curring)커링은 수학자 하스켈 커리로 부터 유래된 이름이고 함수를 변형하는 과정을 말한다.함수의 전달인자 몇 개를 미리 채움으로써 더 간단한 함수를 만드는 방법입니다. 커링은 인도 음식인 커리와 아무런 관계가 없습니다. 커링은 수학자 하스켈 커리(Haskell Curry)로 부터 유래되었습니다.(하스켈 프로그래밍 언어가 그의 이름에서 따온 것이다.) 커링은 이 변형 방법의 원래의 발명가인 모세 쉔핀켈 이름을 따서 쉔필켄이라고도 부릅니다. 커링을 사용하는 경우 어떤 함수를 호출할 때 대부분의 매개 변수가 항상 비슷하다면 커링을 사용할 만한 후보라고 할 수 있다. 매개변수 일부를 적용하여 새로운 함수를 동적으로 생성하면 이 동적 생성된 함수는 반복적으로 사용되는 매개변수를 내부적으로 저장하여, 매..
JavaScript/JS 활용 & etc.. 2016. 10. 14. 07:00

메모제이션(Memoization) 패턴

함수 프로퍼티 - Memoization Pattern(메모제이션 패턴) 함수는 객체이기 때문에 프로퍼티를 가질 수 있습니다. 사실 함수는 처음부터(생성될 때부터) 프로퍼티와 메서드를 가지고 있습니다. 예를 들어, 각 함수는 어떤 문법으로 생성하는 자동으로 length 프로퍼티를 가지고 있습니다. 이 프로퍼티는 함수가 받는 인자의 개수를 값으로 가지게 됩니다. javascript function func(a, b, c) {} console.log(func.length); // 3 이 기록된다. 언제든지 함수에 사용자 정의 프로퍼티를 추가할 수 있습니다. 함수에 프로퍼티를 추가하여 결과(반환 값)을 캐시하면 다음 호출 시점에 복잡한 연산을 반복하지 않을 수 있습니다. 이런 활용 방법을 메모제이션(Memoiz..
JavaScript/JS 활용 & etc.. 2016. 10. 13. 09:29

자기 자신을 정의하는 함수(lazy function)

자기 자신을 재정의하는 함수 함수는 동적으로 정의할 수 있고 변수에 할당할 수 있습니다. 새로운 함수를 만들어 이미 다른 함수를 가지고 있는 변수에 할당하면, 새로운 함수가 이전 함수를 덮어 쓰게 됩니다. 어떤 면에서는 이전의 함수 포인터가 새로운 함수를 가리키도록 재사용하는 것이다. 이러한 일을 이전 함수의 본문 내에서 할 수도 있습니다. 이 경우 함수는 자기 자신을 새로운 구현으로 덮어쓰고 재정의할 수 있습니다. 아마도 실제보다 더 복잡하게 들릴 텐데 간단한 아래의 예제를 통해 알아보도록 합니다. lazy function definition(게으른 함수 선언) 다음의 예제를 살펴보도록 합니다. javascript var scareMe = function () { console.log('Boo!!!')..
JavaScript/JS 활용 & etc.. 2016. 10. 12. 09:39

new Object() 의 문제점

객체 생성자의 함정 객체 리터럴을 사용할 수 있는 상황에서는 new Object() 생성자를 쓸 이유가 없지만, 다른 사람이 작성한 레거시 코드를 물려받을 수도 있기 때문에 이 생성자의 '기능'하나를 알아둘 필요가 있습니다. 결국 이는 생성자를 써서는 안되는 이유이기도 합니다. 문제의 기능은 Object() 생성자가 인자를 받을 수 있다는 점입니다. 인자로 전달되는 값에 따라 생성자 함수가 다른 내장 생성자에 객체 생성을 위임할 수 있고, 따라서 기대한 것과는 다른 객체가 반환되기도 합니다. 다음은 new Object() 에 숫자, 문자열, 불린 값을 전달한 몇 가지 예입니다. 예상한 바와 다른 생성자로 생성된 객체가 반환됩니다. JavaScript // 경고 : 모두 안티 패턴이다. // 빈 객체 va..
JavaScript/JS 객체지향 프로그래밍 2016. 10. 11. 08:24