최신 도구를 사용한 웹 앱 지원
소개
Allo’ Allo’입니다. 웹 앱을 개발하는 사람이라면 누구나 자신의 생산성을 유지하는 것이 얼마나 중요한지 잘 알고 있습니다. 올바른 상용구를 찾고, 개발 및 테스트 워크플로를 설정하고, 모든 소스를 축소하고 압축하는 등 지루한 작업에 대해 걱정해야 하는 것은 어려운 일입니다.
다행히 최신 프런트엔드 도구를 사용하면 이 중 많은 부분을 자동화하여 유용한 앱을 작성하는 데만 집중할 수 있습니다. 이 도움말에서는 웹 구성요소를 사용하여 앱을 개발하기 위한 폴리필 및 슈가 라이브러리인 Polymer를 사용하여 앱 제작을 간소화하기 위한 웹 앱용 도구 워크플로인 Yeoman을 사용하는 방법을 보여줍니다.
요, 그룬트, 바워 만나보기
요만은 생산성을 향상시키는 세 가지 도구를 갖춘 모자를 쓴 남자입니다.
- yo는 앞서 언급한 지루한 작업을 수행하는 데 사용할 수 있는 생성기라고 하는 프레임워크별 스캐폴드 생태계를 제공하는 스캐폴딩 도구입니다.
- grunt는 Yeoman팀과 grunt-contrib에서 선별한 작업의 도움 덕분에 프로젝트를 빌드, 미리보기, 테스트하는 데 사용됩니다.
- bower는 종속성 관리에 사용되므로 더 이상 스크립트를 수동으로 다운로드하고 관리할 필요가 없습니다.
Yeoman은 명령어 한두 개만 사용하여 앱의 상용구 코드 (또는 모델과 같은 개별 부분)를 작성하고, Sass를 컴파일하고, CSS, JS, HTML, 이미지를 최소화 및 연결하고, 현재 디렉터리에서 간단한 웹 서버를 실행할 수 있습니다. 단위 테스트 등을 실행할 수도 있습니다.
노드 패키지 모듈 (npm)에서 생성기를 설치할 수 있으며 현재 220개 이상의 생성기를 사용할 수 있으며 이 중 상당수는 오픈소스 커뮤니티에서 작성되었습니다. 인기 있는 생성기로는 generator-angular, generator-backbone, generator-ember가 있습니다.
최신 버전의 Node.js가 설치된 상태에서 가장 가까운 터미널로 이동하여 다음을 실행합니다.
$ npm install -g yo
작업이 끝났습니다. 이제 Yo, Grunt, Bower를 통해 명령줄에서 직접 실행할 수 있습니다. yo를 실행하면 다음과 같이 출력됩니다.
고분자 발생기
앞서 언급했듯이 Polymer는 폴리필과 슈가의 라이브러리로, 최신 브라우저에서 웹 구성요소를 사용할 수 있게 해줍니다. 이 프로젝트를 통해 개발자는 미래의 플랫폼을 사용하여 앱을 빌드하고 진행 중인 사양을 더 개선할 수 있는 부분을 W3C에 알릴 수 있습니다.
generator-polymer는 Yeoman을 사용하여 Polymer 앱을 지원하는 새로운 생성기로, 명령줄을 통해 Polymer (맞춤) 요소를 쉽게 만들고 맞춤설정하고 HTML 가져오기를 사용하여 가져올 수 있습니다. 이렇게 하면 상용구 코드를 자동으로 작성하여 시간을 절약할 수 있습니다.
다음으로 다음을 실행하여 Polymer의 생성기를 설치합니다.
$ npm install generator-polymer -g
이제 모두 완료되었습니다. 이제 앱에서 엄청난 기능을 가진 Web Component를 사용할 수 있습니다.
새로 설치된 생성기를 사용하면 다음과 같은 몇 가지 특정 기능을 이용할 수 있습니다.
polymer:element는 새로운 개별 Polymer 요소를 스캐폴딩하는 데 사용됩니다. 예를 들면yo polymer:element carousel입니다.polymer:app는 프로젝트의 빌드 시간 구성뿐만 아니라 Grunt 작업 및 프로젝트에 권장되는 폴더 구조를 포함하는 Gruntfile.js인 초기 index.html을 지원하는 데 사용됩니다. 또한 프로젝트 스타일에 Sass 부트스트랩을 사용할 수 있는 옵션도 제공됩니다.
Polymer 앱 빌드
몇 가지 맞춤 Polymer 요소와 새로운 생성기를 사용하여 간단한 블로그를 만들어 보겠습니다.
시작하려면 터미널로 이동하여 새 디렉터리를 만들고 mkdir my-new-project && cd $_를 사용하여 디렉터리를 변경합니다. 이제 다음을 실행하여 Polymer 앱을 시작할 수 있습니다.
$ yo polymer
이렇게 하면 Bower에서 Polymer의 최신 버전을 가져와 워크플로의 index.html, 디렉터리 구조, Grunt 작업을 지원할 수 있습니다. 앱이 준비하는 동안 기다리는 동안 커피 한 잔 하면 어떨까요?
이제 grunt server를 실행하여 앱이 어떻게 표시되는지 미리 볼 수 있습니다.
서버에서 LiveReload를 지원합니다. 즉, 텍스트 편집기를 실행하고 맞춤 요소를 수정하면 저장 시 브라우저가 새로고침됩니다. 이를 통해 앱의 현재 상태를 실시간으로 확인할 수 있습니다.
이제 블로그 게시물을 나타내는 새 Polymer 요소를 만들어 보겠습니다.
$ yo polymer:element post
요만은 생성자를 포함할지 아니면 HTML 가져오기를 사용하여 index.html에 post 요소를 포함할지 등 몇 가지 질문을 합니다. 지금은 처음 두 개 옵션에 '아니요'를, 세 번째 옵션은 비워 두세요.
$ yo polymer:element post
[?] Would you like to include constructor=''? No
[?] Import to your index.html using HTML imports? No
[?] Import other elements into this one? (e.g 'another_element.html' or leave blank)
create app/elements/post.html
이렇게 하면 /elements 디렉터리에 post.html이라는 새 Polymer 요소가 생성됩니다.
<polymer-element name="post-element" attributes="">
<template>
<style>
@host { :scope {display: block;} }
</style>
<span>I'm <b>post-element</b>. This is my Shadow DOM.</span>
</template>
<script>
Polymer('post-element', {
//applyAuthorStyles: true,
//resetStyleInheritance: true,
created: function() { },
enteredView: function() { },
leftView: function() { },
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>
여기에는 다음이 포함됩니다.
- 페이지에서 맞춤 DOM 요소 유형을 사용할 수 있도록 하는 맞춤 요소의 상용구 코드입니다 (예:
<post-element>). - '네이티브' 클라이언트 측 템플릿을 위한 템플릿 태그 및 요소의 스타일을 캡슐화하는 샘플 범위 지정 스타일
- 요소 등록 상용구 및 수명 주기 이벤트입니다.
실제 데이터 소스로 작업하기
블로그에는 새 게시물을 쓰고 읽을 수 있는 공간이 필요합니다. 실제 데이터 서비스로 작업하는 것을 보여주기 위해 Google Apps Sheets API를 사용하겠습니다. 따라서 Google Docs를 사용하여 만든 모든 스프레드시트의 콘텐츠를 쉽게 읽을 수 있습니다.
설정해 보겠습니다.
브라우저 (이 단계에서는 Chrome 권장)에서 이 Google Docs 스프레드시트를 엽니다. 다음 필드에 샘플 게시물 데이터가 포함되어 있습니다.
- ID
- 제목
- 작성자
- 콘텐츠
- 날짜
- 키워드
- (작성자의) 이메일
- 슬러그 (게시물의 슬러그 URL용)
파일 메뉴로 이동한 다음 사본 만들기를 선택하여 스프레드시트의 사본을 만듭니다. 필요에 따라 게시물을 추가 또는 삭제하여 콘텐츠를 자유롭게 수정할 수 있습니다.
다시 파일 메뉴로 이동하여 웹에 게시를 선택합니다.
게시 시작을 클릭합니다.
게시된 데이터에 대한 링크 가져오기 아래 마지막 텍스트 상자에서 제공된 URL의 키 부분을 복사합니다. 예를 들면 다음과 같습니다. https://docs.google.com/spreadsheet/ccc?key=0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc#gid=0
키를 your-key-goes-here라고 표시된 URL에 붙여넣습니다.https://spreadsheets.google.com/feeds/list/your-key-goes-here/od6/public/values?alt=json-in-script&callback=.위의 키를 사용한 예는 https://spreadsheets.google.com/feeds/list/0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc/od6/public/values?alt=json-in-script
브라우저에 URL을 붙여넣고 해당 URL로 이동하여 블로그 콘텐츠의 JSON 버전을 볼 수 있습니다. URL을 기록해 두고 나중에 화면에 표시하기 위해 이 데이터를 반복해야 하므로 이 데이터의 형식을 검토합니다.
브라우저의 JSON 출력은 조금 버겁게 보일 수 있지만 걱정하지 마세요. Google은 게시하신 게시물에 대한 데이터에만 관심이 있습니다.
Google Sheets API는 블로그 스프레드시트의 각 필드를 특수 접두어 post.gsx$를 사용하여 출력합니다. 예를 들면 post.gsx$title.$t, post.gsx$author.$t, post.gsx$content.$t 등입니다. JSON 출력의 각 '행'을 반복할 때 이러한 필드를 참조하여 각 게시물의 관련 값을 반환합니다.
이제 새로 스캐폴드된 게시물 요소를 수정하여 마크업 부분을 스프레드시트의 데이터에 bind할 수 있습니다. 이를 위해 Google은 앞서 만든 게시물 제목, 작성자, 콘텐츠 및 기타 필드에 관해 읽는 post 속성을 도입합니다. selected 속성 (나중에 채워짐)은 사용자가 올바른 슬러그로 이동하는 경우에만 게시물을 표시하는 데 사용됩니다.
<polymer-element name="post-element" attributes="post selected">
<template>
<style>
@host { :scope {display: block;} }
</style>
<div class="col-lg-4">
<template if="[[post.gsx$slug.$t === selected]]">
<h2>
<a href="#[[post.gsx$slug.$t]]">
[[post.gsx$title.$t ]]
</a>
</h2>
<p>By [[post.gsx$author.$t]]</p>
<p>[[post.gsx$content.$t]]</p>
<p>Published on: [[post.gsx$date.$t]]</p>
<small>Keywords: [[post.gsx$keywords.$t]]</small>
</template>
</div>
</template>
<script>
Polymer('post-element', {
created: function() { },
enteredView: function() { },
leftView: function() { },
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>
이제 yo polymer:element blog를 실행하여 게시물 모음과 블로그 레이아웃을 모두 포함하는 블로그 요소를 만들어 보겠습니다.
$ yo polymer:element blog
[?] Would you like to include constructor=''? No
[?] Import to your index.html using HTML imports? Yes
[?] Import other elements into this one? (e.g 'another_element.html' or leave blank) post.html
create app/elements/blog.html
이번에는 페이지에 표시하고자 하는 HTML 가져오기를 사용하여 블로그를 index.html로 가져옵니다. 특히 세 번째 프롬프트의 경우 포함할 요소로 post.html를 지정합니다.
이전과 마찬가지로 새 요소 파일 (blog.html)이 생성되어 /elements에 추가됩니다. 이번에는 post.html을 가져오고 템플릿 태그 내에 <post-element>를 포함합니다.
<link rel="import" href="post.html">
<polymer-element name="blog-element" attributes="">
<template>
<style>
@host { :scope {display: block;} }
</style>
<span>I'm <b>blog-element</b>. This is my Shadow DOM.</span>
<post-element></post-element>
</template>
<script>
Polymer('blog-element', {
//applyAuthorStyles: true,
//resetStyleInheritance: true,
created: function() { },
enteredView: function() { },
leftView: function() { },
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>
HTML 가져오기 (다른 HTML 문서에 있는 HTML 문서를 포함하고 재사용하는 방법)를 사용하여 블로그 요소를 색인에 가져오도록 요청했기 때문에 블로그 요소가 <head> 문서에 올바르게 추가되었는지도 확인할 수 있습니다.
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styles/main.css">
<!-- build:js scripts/vendor/modernizr.js -->
<script src="bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
<!-- Place your HTML imports here -->
<link rel="import" href="elements/blog.html">
</head>
<body>
<div class="container">
<div class="hero-unit" style="width:90%">
<blog-element></blog-element>
</div>
</div>
<script>
document.addEventListener('WebComponentsReady', function() {
// Perform some behaviour
});
</script>
<!-- build:js scripts/vendor.js -->
<script src="bower_components/polymer/polymer.min.js"></script>
<!-- endbuild -->
</body>
</html>
환상적이군요.
Bower를 사용하여 종속 항목 추가
이제 Polymer JSONP 유틸리티 요소를 사용하여 post.json 파일을 읽을 수 있도록 요소를 수정해 보겠습니다. 저장소를 git 클론하여 어댑터를 가져오거나 bower install polymer-elements를 실행하여 Bower를 통해 polymer-elements를 설치할 수 있습니다.
유틸리티가 있으면 다음을 사용하여 blog.html 요소에 가져오기로 포함해야 합니다.
<link rel="import" href="../bower_components/polymer-jsonp/polymer-jsonp.html">
그런 다음, 태그의 태그를 포함하고 url를 이전의 블로그 게시물 스프레드시트에 제공하여 끝에 &callback=를 추가합니다.
<polymer-jsonp auto url="https://spreadsheets.google.com/feeds/list/your-key-value/od6/public/values?alt=json-in-script&callback=" response="[[posts]]"></polymer-jsonp>
이렇게 하면 템플릿을 추가하여 스프레드시트를 읽은 후 스프레드시트를 반복할 수 있습니다. 첫 번째는 슬러그를 가리키는 게시물의 링크된 제목이 포함된 목차를 출력합니다.
<!-- Table of contents -->
<ul>
<template repeat="[[post in posts.feed.entry]]">
<li><a href="#[[post.gsx$slug.$t]]">[[post.gsx$title.$t]]</a></li>
</template>
</ul>
두 번째 메서드는 발견된 항목마다 post-element 인스턴스를 하나씩 렌더링하고 이에 따라 게시물 콘텐츠를 전달합니다. 단일 스프레드시트 행의 게시물 콘텐츠를 나타내는 post 속성과 경로로 채울 selected 속성을 통해 전달되고 있습니다.
<!-- Post content -->
<template repeat="[[post in posts.feed.entry]]">
<post-element post="[[post]]" selected="[[route]]"></post-element>
</template>
템플릿에서 사용되는 repeat 속성은 제공되는 경우 게시물의 배열 컬렉션에 있는 모든 요소에 대해 [[bindings ]] 를 포함하는 인스턴스를 만들고 유지합니다.
이제 현재 [[route]] 를 채우기 위해 URL 해시가 변경될 때마다 [[route]] 에 바인딩되는 Flatiron director라는 라이브러리를 사용해 보겠습니다.
다행히 Polymer 요소 (more-elements 패키지의 일부)가 있습니다. 이 요소를 잡을 수 있습니다. /elements 디렉터리에 복사하면 <flatiron-director route="[[route]]" autoHash></flatiron-director>로 참조하여 route를 바인딩하려는 속성으로 지정하고 해시 변경사항 (autoHash)의 값을 자동으로 읽도록 지시할 수 있습니다.
모든 것을 종합해보면 이제 다음과 같은 결과를 얻을 수 있습니다.
<link rel="import" href="post.html">
<link rel="import" href="polymer-jsonp/polymer-jsonp.html">
<link rel="import" href="flatiron-director/flatiron-director.html">
<polymer-element name="blog-element" attributes="">
<template>
<style>
@host { :scope {display: block;} }
</style>
<div class="row">
<h1><a href="/#">My Polymer Blog</a></h1>
<flatiron-director route="[[route]]" autoHash></flatiron-director>
<h2>Posts</h2>
<!-- Table of contents -->
<ul>
<template repeat="[[post in posts.feed.entry]]">
<li><a href="#[[post.gsx$slug.$t]]">[[post.gsx$title.$t]]</a></li>
</template>
</ul>
<!-- Post content -->
<template repeat="[[post in posts.feed.entry]]">
<post-element post="[[post]]" selected="[[route]]"></post-element>
</template>
</div>
<polymer-jsonp auto url="https://spreadsheets.google.com/feeds/list/0AhcraNy3sgspdHVQUGd2M2Q0MEZnRms3c3dDQWQ3V1E/od6/public/values?alt=json-in-script&callback=" response="[[posts]]"></polymer-jsonp>
</template>
<script>
Polymer('blog-element', {
created: function() {},
enteredView: function() { },
leftView: function() { },
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>
와! 이제 JSON에서 데이터를 읽고 Yeoman으로 스캐폴딩된 두 개의 Polymer 요소를 사용하는 간단한 블로그가 만들어졌습니다.
제3자 요소 사용
customelements.io와 같은 구성요소 갤러리 사이트가 나타나기 시작하면서 웹 구성요소를 둘러싼 요소 생태계가 최근 성장하고 있습니다. 커뮤니티에서 만든 요소를 살펴보면서 gravatar 프로필을 가져올 수 있는 하나를 찾았으며 실제로 이를 블로그 사이트에 추가할 수도 있습니다.
gravatar 요소 소스를 /elements 디렉터리에 복사하고 post.html의 HTML 가져오기를 통해 이를 포함한 다음
<link rel="import" href="gravatar-element/src/gravatar.html">
<polymer-element name="post-element" attributes="post selected">
<template>
<style>
@host { :scope {display: block;} }
</style>
<div class="col-lg-4">
<template if="[[post.gsx$slug.$t === selected]]">
<h2><a href="#[[post.gsx$slug.$t]]">[[post.gsx$title.$t]]</a></h2>
<p>By [[post.gsx$author.$t]]</p>
<gravatar-element username="[[post.gsx$email.$t]]" size="100"></gravatar-element>
<p>[[post.gsx$content.$t]]</p>
<p>[[post.gsx$date.$t]]</p>
<small>Keywords: [[post.gsx$keywords.$t]]</small>
</template>
</div>
</template>
<script>
Polymer('post-element', {
created: function() { },
enteredView: function() { },
leftView: function() { },
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>
이를 통해 어떤 이점이 있는지 살펴보겠습니다.
예쁘죠!
우리는 상용구 코드 작성, 종속 항목 수동 다운로드, 로컬 서버 또는 빌드 워크플로 설정에 대한 걱정 없이 비교적 짧은 시간에 여러 웹 구성 요소로 구성된 간단한 애플리케이션을 만들었습니다.
애플리케이션 최적화
Yeoman 워크플로에는 Grunt라는 또 다른 오픈소스 프로젝트가 포함되어 있습니다. 이 프로젝트는 Gruntfile에 정의된 여러 빌드별 작업을 실행하여 최적화된 버전의 애플리케이션을 생성할 수 있습니다. grunt를 자체적으로 실행하면 생성기에서 린트 작업, 테스트, 빌드를 위해 설정한 default 작업이 실행됩니다.
grunt.registerTask('default', [
'jshint',
'test',
'build'
]);
위의 jshint 작업은 .jshintrc 파일을 확인하여 환경설정을 학습한 다음 프로젝트의 모든 JavaScript 파일에 대해 실행합니다. JSHint를 사용하여 옵션을 모두 살펴보려면 문서를 확인하세요.
test 작업은 이와 약간 비슷하며, 기본적으로 권장되는 테스트 프레임워크인 Mocha에 맞게 앱을 만들고 제공할 수 있습니다. 또한 테스트가 자동으로 실행됩니다.
grunt.registerTask('test', [
'clean:server',
'createDefaultTemplate',
'jst',
'compass',
'connect:test',
'mocha'
]);
이 경우 앱은 매우 간단하므로 테스트 작성은 별도의 연습으로 두겠습니다. 빌드 프로세스 핸들을잡기 위해 필요한 다른 작업이 몇 가지 더 있으므로 Gruntfile.js에 정의된 grunt build 작업이 어떤 작업을 할지 살펴보겠습니다.
grunt.registerTask('build', [
'clean:dist', // Clears out your .tmp/ and dist/ folders
'compass:dist', // Compiles your Sassiness
'useminPrepare', // Looks for <!-- special blocks --> in your HTML
'imagemin', // Optimizes your images!
'htmlmin', // Minifies your HTML files
'concat', // Task used to concatenate your JS and CSS
'cssmin', // Minifies your CSS files
'uglify', // Task used to minify your JS
'copy', // Copies files from .tmp/ and app/ into dist/
'usemin' // Updates the references in your HTML with the new files
]);
grunt build를 실행하면 프로덕션에서 사용할 수 있는 앱 버전이 빌드되어 출시할 수 있습니다. 한번 해 보자.
완료되었습니다.
문제가 발생하면 https://github.com/addyosmani/polymer-blog에서 polymer-blog의 사전 빌드된 버전을 참고하세요.
추가로 뭘 더 줄까요?
웹 구성요소는 여전히 진화하는 단계에 있으며 이를 둘러싼 도구도 진화하고 있습니다.
현재 우리는 Vulcanize (Polymer 프로젝트의 도구)와 같은 프로젝트를 통해 HTML 가져오기를 연결하여 로드 성능을 개선할 수 있는 방법과 구성요소 생태계가 Bower 같은 패키지 관리자와 어떻게 작동할 수 있는지 살펴보고 있습니다.
이러한 질문에 대한 더 나은 답변을 얻는 대로 알려 드리겠습니다. 앞으로 많은 기대가 있을 것입니다.
Bower와 함께 Polymer 독립형 설치
Polymer를 좀 더 간단하게 시작하고 싶은 경우 다음을 실행하여 Bower에서 바로 독립형으로 설치할 수 있습니다.
bower install polymer
그러면 bower_components 디렉토리에 추가됩니다. 그런 다음 애플리케이션 색인에서 수동으로 참조하고 향후에 사용할 수 있습니다.
어떻게 생각하시나요?
지금까지 Yeoman과 함께 웹 구성요소를 사용하여 Polymer 앱을 구축하는 방법을 알아보았습니다. 생성기에 대한 의견이 있는 경우 댓글을 통해 알려주거나 Yeoman Issue Tracker에 버그를 신고하거나 게시물을 올려 주시기 바랍니다. 생성기를 사용해 보고 개선할 수 있는 피드백을 통해서만 더 나은 결과를 얻을 수 있기를 바랍니다. :)