한빛출판네트워크

제공 : 한빛 네트워크
저자 : Seth Ladd
역자 : 한순보
원문 : Build Reusable Widgets for the Web with Polymer and Dart

브라우저가 웹 컴포넌트를 구현하는 것을 기다리지 말고, 오늘 그것을 해보세요.

재사용할 수 있고 캡슐화된 위젯을 위한 새로운 웹 규격 모음인 웹 컴포넌트를 브라우저에서 지원하려고 합니다. 웹 컴포넌트 위에 만들어진 웹을 위한 새로운 타입의 라이브러리인 Polymer와 현대적인 웹 개발을 위한 새로운 구조화된 언어이자 라이브러리인 Dart 덕분에, 스타일(style) 및 구조(structure)와 행동(behavior)을 캡슐화하는 커스텀 HTML 요소(custom HTML element)를 만들 수 있습니다.



개인적으로 저는 Polymer의 Dart 포트인 Polymer.dart의 팬입니다. 자바스크립트를 사용하고 싶다면 일부 세부 사항은 다르지만, 본래의 Polymer 라이브러리를 사용할 수 있습니다. Polymer와 Polymer.dart 모두 개발이 매우 활발하게 진행되고 있으며, 이 프로젝트에 참여하는 개발자들은 피드백을 기대하고 있습니다.

이 글에서는 간단한 자동 완성(auto-complete) 위젯을 커스텀 요소로서 생성하는 방법을 보여드립니다. 사용자가 필드(field)에 입력하면, 그 값을 접두사(prefix)로 하는 목록이 검색됩니다. 사용자는 더 정확하게 일치시키기 위해 계속 입력하거나 위아래를 이용하여 선택하거나, 혹은 마우스를 사용할 수 있습니다.



참고: 제 Github 계정에서 이 글에 포함된 코드를 내려받을 수 있습니다.

시작하기

시작하기 위해 Dart 에디터를 사용하는 것을 추천합니다. 맥, 리눅스, 윈도우 용으로 내려받을 수 있습니다. 콘텐츠를 생성하지 않은 새로운 프로젝트를 만드세요.



Polymer.dart 패키지를 내려받고 설치하기 위해 pub 패키지 매니저를 사용하세요. (술집(pub)에서 다트(darts) 놀이를 하기 때문입니다!) 다음 콘텐츠를 담은 pubspec.yaml 파일을 새로운 프로젝트에 생성하세요.

name: my_autocomplete_demo
description: A fun demo of polymer.dart.
dependencies:
  polymer: any

pubspec.yaml 파일을 저장할 때, Dart 에디터는 추이 종속성(transitive dependencies, 역자주: 어떤 의존성을 사용하려면 반드시 같이 추가돼야 하는 의존성)을 따르며 pubspec.yaml에서 선언한 패키지를 설치합니다. pubspec.yaml을 처음 저장할 때, 새로운 packages 폴더가 프로젝트에 나타납니다.



커스텀 요소를 위한 HTML 생성

종속성을 가지는 것들(dependencies)이 설치되면, 커스텀 요소를 만들 때입니다. 프로젝트에 web 디렉터리를 생성하고, web 안에 auto_complete.html 파일을 생성하세요. 바로 이 부분입니다!

새로운 HTML 태그를 정의하는 데 HTML을 사용한 것입니다. auto_complete.html 안에 auto-complete 태그를 선언하세요.

팁: 커스텀 요소는 이름에 대시(-)를 포함해야 합니다.

커스텀 요소를 다른 HTML 태그로부터 만들 수도 있습니다. auto-complete 요소 내부 구조를 정의하기 위해 애플리케이션 HTML 생성하기

index.html 페이지가 "앱"이며, 이는 그 요소를 불러오고(import) 사용합니다. index 페이지는 Polymer.dart를 위한 초기화 혹은 부트스트랩 코드에도 책임이 있습니다.

HTML 문서를 다른 HTML 문서에서 포함하고 재사용하기 위한 새로운 규격인 HTML imports로 커스텀 요소를 재사용할 수 있습니다.

팁: HTML imports 규격을 읽고 HTML imports에 대해서 더 배워보세요.

web 디렉터리 안에 index.html이라는 새로운 파일을 생성하고, 다음 코드를 추가하세요.

결과가 업데이트될 때, 결과를 사용하는 수식이 계산됩니다.