Google for Developers Korea Blog: Apps Script에서 오픈 소스 라이브러리 사용하기

Apps Script에서 오픈 소스 라이브러리 사용하기

2012년 11월 30일 금요일

원문참고: http://googleappsdeveloper.blogspot.kr/2012/11/using-open-source-libraries-in-apps.html

2012.11.27

Eric Koleda (Developer Programs Engineer)

클라이언트 사이드 웹 개발을 위해서는 JavaScript를 사용하는 것이 오랫동안 기정사실화 되어왔습니다. 하지만 최근 JavaScript는 서버 사이드에도 인기를 끌고 있습니다. 이러한 개념을 유행시키는 데는 Apps Script 뿐만 아니라, Mozilla's Rhino와 Node.js 등과 같은 프로젝트 등도 큰 역할을 했습니다. 그 결과 개발자들은 수많은 새로운 오픈소스 JavaScript 라이브러리를 만들었습니다. 이번 기회에 Apps Script 프로젝트에 오픈 소스 라이브러리를 어떻게 사용하는지에 대해서 말씀드리고자 합니다.

Underscore

제 스크립트에 사용하고자 했던 라이브러리는 JavaScript를 위한 자칭 유틸리티 벨트 라이브러리인 “Underscore”입니다. Underscore에서는 JavaScript 내의 코딩을 깔끔하고 재미있게 만드는 수많은 헬퍼 함수를 제공합니다. 예를 들어 범위 내에서 각 값을 기록하는 예를 살펴보겠습니다.

// Using plain JavaScript.
for (var i = 0; i < values.length; i++) {
for (var j = 0; j < values[i].length; j++) {
Logger.log(values[i][j]);
}
}

위와 같이 for 루프를 작성하는 것이 일반적인 방법이지만, 상당량 타이핑을 해야하고 큰 의미 없는 카운터 변수들을 기억해야 합니다. Underscore는 each() 메소드를 제공하여 해당 프로세스를 훨씬 용이하게 만들어 줍니다.

// Using Underscore.
_.each(values, function(row) {
_.each(row, function(cell) {
Logger.log(cell);
});
});

익명의 함수를 파라미터로 넘겨주는 것에 다소 익숙해 질 필요가 있지만, jQuery 개발 경험이 있으시다면 이러한 패턴에 익숙하실 것입니다.
Underscore는 상당한 확장성도 제공합니다. Underscore.string는 유용한 문자열 조작 기능을 가지고 있습니다. 제가 애용하는 기능은 JavaScript에서 sprintf() 기호를 사용하는 것입니다. 복잡한 문자열을 만드는 과정을 간소화시켜 줍니다

// Using plain JavaScript.
var message = "Hello, " + firstName + " " + lastName + ". Your wait time is " + wait + " minutes.";
// Using Underscore.string.
var message = _.sprintf("Hello, %s %s. Your wait time is %d minutes.", firstName, lastName, wait);

Apps Script와 연동

프로젝트 안에 Underscore 라이브러리를 포함시키는 가장 간단한 방법은 소스 코드를 바로 스크립트에 붙이는 것입니다. 하지만 여러 프로젝트에서 사용하게 된다면 상당한 중복 작업이 되겠죠. 이번 해 초, Apps Script에서 libraries라는 기능을 발표했습니다. 스크립트를 공유하고 다른 프로젝트에 포함시킬 수 있는 기능입니다. Underscore와 같은 JavaScript 라이브러리를 Apps Script 라이브러리로 패키징하는 것이 가능합니다. 하지만 제대로 동작하기 위해서는 헬퍼 함수가 필요합니다.

Underscore가 로딩되면 엑세스하기 위해 사용되는 "_" 라는 전역 변수를 생성합니다. Apps Script는 라이브러리의 전역 범위가 라이브러리를 포함하는 스크립트의 전역 범위와 충돌되는 것을 방지합니다. 그래서 라이브러리에 헬퍼 함수를 만들어 그 변수를 전달할 수 있도록 했습니다.

// In the library.
function load() {
return _;
}

라이브러리를 포함하는 제 스크립트에서, 간단하게 해당 함수를 호출하고 "_" 변수에 결과 값을 세팅하도록 하였습니다.

// In the script that includes the library.
var _ = Underscore.load();

Underscore 라이브러리 복사본을 원하시면, 프로젝트키 “MGwgKN2Th03tJ5OdmlzB8KPxhMjh3Sh48” 값과 상단의 코드 예제를 사용하세요. 소스 코드 전체를 확인하시려면 클릭하세요.

HtmlService로 사용하기

위의 코드를 사용하여 쉽게 서버 사이드 Apps Script 코드에 해당 라이브러리를 추가할 수 있었습니다. 그리고 이 기능들을 HtmlService에 의해 지원되는 웹 애플리케이션에 클라이언트 사이드로 사용하고 싶기도 했습니다. 이를 위해서 Underscore 소스 코드를 복사하여 <script> 태그에 씌워서 Html 파일(Script 파일 대신)에 저장했습니다. 아래와 같은 헬퍼 함수를 사용하여 이 예제 코드 파일들은 웹 애플리케이션의 HtmlTemplates에 포함되었습니다.

// In the library.
var FILES = ['Underscore.js', 'Underscore.string.js', 'Init.js'];
function include(output) {
for (var i = 0; i < FILES.length; i++) {
   var file = FILES[i];
   output.append(
       HtmlService.createHtmlOutputFromFile(file).getContent());
}
}
This function was called in the web app's HtmlTemplate using the simple code below.

<html>
<head>
   <? Underscore.include(output) ?>
</head>
...

Other libraries 기타 라이브러리

Underscore와 연동은 상당히 용이합니다. 하지만 다른 오픈 소스 라이브러리를 가지고 동일한 접근법을 시도하는 것인 더욱 복잡한 작업일 수도 있습니다. 브라우저나 Node.js 실행시간 안에 특정 성능에 의존하는 경우 Apps Script 환경에서 제대로 동작하지 않는 라이브러리도 있습니다. 게다가 HtmlService에 의해 지원되기 위해서 코드는 Caja 엔진의 엄격한 확인을 통과해야 합니다. 하지만 다수의 인기있는 라이브러리가 기준에 부합하고 있지 않는 것이 현실이죠. 어떠한 경우에는 이러한 문제를 피하기 위해서 라이브러리를 매뉴얼하게 패치할 수 있어야 합니다. 하지만 이를 위해서는 라이브러리 동작에 대한 깊은 이해가 필요로 합니다.

여러분의 작업에 Underscore 및 기타 오픈 소스 라이브러리를 사용하시기를 기대합니다. Apps Script와 훌륭하게 동작하는 라이브러리를 보시면 제 Google+ 계정에 공유해 주세요. 해당 내용을 알리는데 도움을 드리겠습니다.