Pragmatic Programmer

Hot Towel SPA - Project template

 Hot Towel SPA 템플릿이 나왔다. ASP.NET MVC 4에서 Web API와 궁합이 맞는 자바스크립트 프레임웍이다.  Visual studio에서 해당 템플릿을 추가하기 위해서는 아래 링크에서 VSIX 파일을 다운받아 실행시키면 템플릿으로 프로젝트를 만들 수 있을 것이다.

http://www.asp.net/single-page-application/overview/templates/hottowel-template

 아래 '그림1'은 템플릿을 통해 실행된 페이지 결과 화면이다.

[그림1] Hot Towel tamplate 실행 결과 화면

 Hot Towel template은 기본적으로 Breeze.js, Durandal.js, Knockout.js, Require.js, Toastr.js, Twitter Bootstrap를 이용해서 개발 가이드를 제시해주는 템플릿이라 하겠다. 각각의 자바스크립트 라이브러리가 맡은 기능을 정리하면 아래와 같다.

Featured Libraries

• ASP.NET MVC
• ASP.NET Web API
• ASP.NET Web Optimization - bundling and minification
• Breeze.js - Data 관리
• Durandal.js - 네비게이션과 페이지 조합
• KnockOut.js - 데이터 바인딩
• Require.js - 모듈화 및 AMD 최적화 지원
• Toastr.js - Pop up 메세지 지원
• Twitter bootstrap - CSS 스타일

Lo-Dash

 Underscore와 같은 유틸리스 라이브러리다. 압축 사이즈는 20.4KB, 개발용은 41.4KB이며 Underscore와 같이 사용할 수 있는 버전도 따로 받을 수 있다. 

 브라우저 호환성은 아래와 같다.

Lungo.js

모바일용 개발 프레임워크

 Lungo.js 파일은 스마트폰에서 HTML5를 지원하는 프레임워크이다. 관심 있으시 분들이 참고 하시기를 바랍니다.

Zeptojs - WebKit을 지원하는 경량화된 프레임워크
( jquery 문법 호환 )

Callback pattern

 자바스크립에서 함수는 객체다. 함수를 다른 함수의 인자로 넘겨 줄 수 있다. 함수에 다른 함수를 넘겨면 넘겨받은 함수에서 실행 할 것이다. 이때 넘겨 받은 함수를 콜백 함수라고 한다. 아래 코드로 확인해 보자.

 필자는 이와 같은 패턴을 공통 화면에서 리턴 받을 때 많이 사용하고는 했다. 화면마다 사용하는 공통된 기능을 만들지 않고 콜백 함수를 이용해서 리턴받아야 하는 함수를 파라메터로 넘겨줘서 해당 함수에서 콜백 함수를 호출하면 하나의 기능으로 여러 페이지에서 일관되게 사용할 수 있게 하기 때문이다. 다음 코드에서 보다 자세한 사용 방법에 대해 알아 보자.

 "코드2"에서와 같이 하나의 로직을 호출 하지만 콜백 함수를 어떻게 세팅해서 넘기는지에 따라서 해당 출력값이 확연하게 다르게 출력이 되고 있는 것을 확인 할 수 있다.

출력 값은 writePlus 콜백 함수를 넘겼을 때는 101 ~ 200까지 출력이 되고 writeMinus 콜백으로 넘겼을 때는 99 ~ 0까지 출력이 되고 있다. 이렇게 콜백을 넘겨 주는 차이로 확연하게 다른 로직이 구현되므로 중요 핵심 로직으로 결과 값을 받아와서 넘겨 받은 콜백에서 원하는 작업을 할 수 있게 하면 확장성있는 함수를 만들 수 있을 것이다.

자신을 정의 하는 함수

(Lazy function definition - Self function definition)

 함수는 동적으로 정의할 수 있고 변수에 할당할 수도 있다. 이전 변수에 새로운 함수를 할당한다면 변수는 새로운 함수를 가리키게 된다. C에서 선언 없이 포인터만 수정하는 것과 같다. 설명만으로는 장황하니 아래 코드를 보도록 하자.

 이 패턴은 함수 초기화가 필요하고 그 초기화가 한번만 필요한 곳에서 사용할 수 있다. 불 필요한 작업을 반복하지 않아도 된다. 

Javascript 함수 파라메터 생성 패턴

  Javascript platform 환경에서 개발을 하든지, Java, C#, C platform 환경에서 개발을 하든지 지향해야 하는 패턴이라고 할 수 있겠다. 바로 함수에게 넘겨주는 파라메터에 관한 패턴이다. 이 패턴을 왜 지향해야 하는지에 대해서 알아 보자.

 소프트웨어를 개발하는데 있어서 구축시 변경되는 요구사항과 유지보수에서 변경되는 사항때문에 함수는 변경이 될 수 밖에 없는 환경이다. 예를 들어 "코드1"과 같이 함수가 생성이 되었다고 가정하자.

 위와 같이 코드로 생성되어 개발 하다가 변경사항 때문에 파라메터를 더 추가해야 하는 상황에 빠지게 되었다. 그리고 문제는 파라메터 순서를 어떻게 정해야 하는지도 고민에 빠지게 한다. 이런 저런 고민 끝에  "코드2"와 같이 수정하게 되었다. 

 "코드2"에서 추가되는 파라메터 변수의 중요도 때문에 중간에 끼워 넣게 되었다. 그래서 이 함수를 사용하는 다른 곳에서도 수정이 불가피하게 되었다. 그래서 소스를 찾아 다니면서 수정을 하게 되었고 추가된 파라메터가 필요치 않는 곳에서는 "''" 공백 문자로 바꿔주는 수고까지 하게 되었다. 이런 케이스가 합리적으로 보이는가? 이제 한번 개선시켜 보자. "코드3"을 살펴 보도록 하자.

 "코드3"과 같이 선언하면 다음과 같은 장점이 있다.

• 매개변수와 순서를 기억할 필요가 없다.
• 선택적인 매개변수를 안전하게 생략할 수 있다. ( 이름 지원하기 위해서는 해당 함수에서 검증하는 단계에서 에러 처리를 해줘야 가능 하다. )
• 읽기 쉽고 유지보수가 편하다.
• 매개 변수를 추가하거나 제거하기가 편한다.

• 매개변수의 이름을 기억해야 한다.
• 프로퍼티 이름은 압축되지 않는다. ( 압축 프로그램에서 매개 변수의 이름은 단순한 문자로 치환하여 전체 소스 크기를 줄이는 작업이 안된다. 그렇지만 일부 유틸에서는 프로퍼티의 매개변수도 압축을 해준다. - 구글 Utility - 그렇지만 배포를 해야 하는 상황에서는 적합한 모델이 아니다. 일부 Intellisense가 지원되는 도구에서는 연상되지 않는 프로퍼티명으로 나오게 하기 때문이다. )

 함수를 생성함에 있어서 최소한의 파라메터를 받고 넘겨 줄 수 있는 방안을 고려하여 생성 하도록 하자. 더군다나 라이브러리를 배포할 때는 더욱더 신경 써야 할 것이다. 한번 배포가 되고 나면 수정하는데 비용이 상상이상으로 많이 들기 때문이다. 

초기화 시점의 분기 - 단 한번의 확인
(One check & Memoization Pattern)

 프로그램을 개발하다가 보면 기본 베이스를 깔고 개발해야 하는 부분이 있다. 예를 들면 프로그램은 H/W가 PC이고 운영 체제는 Windows 또는 Linux에서 실행이 된다고 하는 전제 조건을 말이다. 그렇다면 자바스크립트 개발에서는 어떤 전제가 둘 수 있을 까~~

 대체적으로 브라우저의 파편화 때문에 지원여부를 확인해야 하는 사항이 있을 수 있을 것이다. IE에서 지원하는 Active-X기술로 Ajax을 지원하도록 하고 다른 브라우저에서는 다른이름의 내장 객체로 지원하도록 한다. 그리고 이 이외에 다른 사항들을 확인하기 위해서 초기에 확인 작업을 해야 할 것이다. 지원 여부와 상위 단계의 일관적인 프로그래밍 접근 방식을 위해 하위 단계에서 발을 굴려야 하는 것 처럼 말이다. - 백조 처럼 말이다

 자바스크립트에서는 브라우저가 처음 로딩이 될때 이와 같은 작업을 하거나 해당 객체가 처음 실행이 될때 작업할 수 있을 것이다. 문제는 핵심은 전제 조건에 대한 확인을 중복 확인하지 않도록 하는 것이다. 아래 코드에서 잘못된 예와 제안하는 예를 살펴 보자.

 위 코드는 utils에서 브라우저 정보를 체크하는 부분이다. 그렇지만 호출이 될 때마다 체크를 하는 단점을 가지고 있다.  그래서 메모이제이션 패턴을 이용하여 위 코드를 한번의 확인을 재 사용하는 코드로 수정해 보도록 하겠다. 이와 같은 방식의 패턴이 나올 수 있는 전제 조건은 실행 환경에서 초기화가 이뤄진 상태(페이지가 로딩이 되면 초기화가 일어 나게 되어 있다.)에서 전제 조건( 예로 브라우저)이 아무 이유없이 바뀔 수있는 구조가 아니라는 것이다. 그럼으로 한번의 확인된 사항 - 실행 비용이 많이 드는 사항 역시 마찬 가지다 - 을 값을 가지고 있다가 다음 호출에서 저장된 값을 리턴해주는 패턴으로 가도록 하겠다. (Memoization pattern) 아래 코드를 확인해 보자.

 "코드2"는 같은 Utils 객체에서 BrowserInfo를 체크해서 undefined값이면 브라우저 버전을 체크 하도록 하고 체크된 정보를 가지고 있도록 한다. 그리고 다음에 호출되었을 때 캐시되어 있던 정보를 바로 리턴해 주는 방식으로 구현이 되었다. 이와같이 기본 전제 조건에 대해서 중복 체크하지 않고 한번만 체크할 수 있도록 하여 최적화를 진행할 수 있을 것이다.

Javascript native data 사용 - 원시 데이터

 원시 데이터란 브라우저에서 제공하는 기본 데이터 형식을 말한다.

• 숫자 ( Number() )
• 문자열 ( String() )
• Boolean ( Boolean() )
• null
• undefined

 위 데이터에 대해서 사용하는 방식을 문자열을 통해 알아 보도록 하자. 

 위와 같이 사용할 수 있지만 래퍼 형식으로도 위와 똑같은 객체를 생성할 수 있다.

 위 데이터에 대해서 사용하는 방식을 문자열을 통해 알아 보도록 하자. 

위 예제와 같이 원시 데이터는 두 가지 방식으로 모두 사용할 수 있다. 그렇지만 일반적인 상황에서 값을 사용하는 상황에서는 두번째 방법인 래퍼를 사용해서 데이터를 사용할 것을 권장한다. 래퍼를 사용하면 값을 선언할 때의 오류를 줄일 수 있다는 의도에서 이다.  사용예를 다음 코드에서 보고 래퍼를 사용하도록 하자.

 위 데이터에 대해서 사용하는 방식을 문자열을 통해 알아 보도록 하자. 

 이 이외에 리터럴 원시 데이터 타입을 사용하는 방법입니다.

 위 데이터에 대해서 사용하는 방식을 문자열을 통해 알아 보도록 하자. 

JSON Parsing

 웹 페이지에서 스트림을 통해 얻어온 값을 무턱대고 JSON 문자열을 평가하면 보안 문제가 있을 수 있기 때문에 바람직 하지 않다. 가능하면 JSON.parse()를 사용하는 것이 최선책이다. 이 메소드는 ES5(ECMAScript 5.0)부터 포함되었으나 일부 예전 버전의 브라우저에서는 지원하지 않기 때문에 JSON.org의 라이브러리(http://www.json.org/json2.js)를 이용해서 사용할 수 있다.

 만약 jQuery를 사용하고 있다면 $.parseJSON(jsonString)으로 대신 할 수 있다. 그리고 JSON.parse()의 반대는 JSON.stringify()이다. 이 메소드는 객체 또는 배열을 인자로 받아 문자열로 serialization을 한다. 이 메소드를 통해서 쿠키에 값을 저장 또는 sessionStorage같은 곳에 저장할 수 있다.