맨위로가기

폴리머 (라이브러리)

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
목차

1. 개요

폴리머는 2013년 11월에 시작된 웹 컴포넌트 개발을 위한 자바스크립트 라이브러리이다. Material Design 기반의 시각 스타일 가이드라인, 데이터 바인딩, 웹 컴포넌트 라이브러리를 제공하며, 사용자 정의 요소 생성, 데이터 바인딩, 계산된 속성, 조건부 템플릿, 제스처 이벤트 등의 기능을 지원한다. 2015년 성능을 개선한 버전 1.0이 출시되었으며, 이후 LitElement 및 단방향 바인딩에 집중하는 방향으로 개발이 진행되었다.

더 읽어볼만한 페이지

  • 리치 인터넷 애플리케이션 프레임워크 - 자바FX
    JavaFX는 자바 기반의 UI 구축 플랫폼으로, 다양한 플랫폼을 지원하며 풍부한 UI 기능들을 제공하고, Java 8부터 JDK에 포함되었다가 JDK 11부터 분리되어 관리된다.
  • 리치 인터넷 애플리케이션 프레임워크 - 마이크로소프트 실버라이트
    마이크로소프트 실버라이트는 2007년에 출시되어 어도비 플래시에 대항하고자 개발된 마이크로소프트의 RIA 기술이며, 닷넷 프레임워크 기반으로 XAML을 사용해 사용자 인터페이스를 정의했으나 2021년에 지원이 종료되었다.
  • 자바스크립트로 작성된 자유 소프트웨어 - Node.js
    Node.js는 라이언 달이 2009년에 개발한 자바스크립트 런타임 환경으로, 구글 크롬 V8 엔진을 기반으로 구축되었으며 이벤트 기반의 논블로킹 I/O 모델을 사용하여 확장성 있는 네트워크 애플리케이션 개발에 용이하고 웹 서버 및 네트워킹 도구 제작을 위한 다양한 코어 모듈과 npm을 통한 오픈 소스 라이브러리 활용을 제공한다.
  • 자바스크립트로 작성된 자유 소프트웨어 - D3.js
    D3.js는 웹 브라우저에서 데이터를 기반으로 동적인 시각화를 구현하기 위해 사용되는 자바스크립트 라이브러리로, SVG 요소 조작, 데이터-DOM 연결, 다양한 시각화 기능 및 API를 제공하여 복잡한 데이터 시각화를 효율적으로 구현하도록 돕는다.
  • HTML - Alt 속성
    `alt` 속성은 HTML의 `img` 및 `area` 태그에서 이미지를 로드할 수 없을 때 대체 텍스트를 지정하며, 스크린 리더 및 SEO에 영향을 미치고, W3C 지침에 따라 이미지의 의미를 전달하거나 장식용 이미지는 빈 문자열로 지정해야 한다.
  • HTML - 폰트 패밀리 (HTML)
    폰트 패밀리(HTML)는 CSS 스타일 시트, 인라인 CSS, HTML `font` 태그를 통해 웹 페이지 글꼴을 지정하는 방법으로, 사용자 기기에 설치된 글꼴에 따라 표현이 달라지며, CSS의 `font-family` 속성은 글꼴 모양을 식별하고 제네릭 폰트와 글꼴 대체 메커니즘을 통해 일관된 글꼴 표현을 가능하게 한다.
폴리머 (라이브러리) - [IT 관련 정보]에 관한 문서
개요
종류자바스크립트 라이브러리
개발구글 및 기여자
최초 릴리스2015년 5월 29일
라이선스3-Clause BSD
웹사이트폴리머 프로젝트 공식 웹사이트
상세 정보
프로그래밍 언어자바스크립트, HTML
깃허브 저장소폴리머 깃허브 저장소
최신 버전 정보
최신 안정 버전1.x: 1.12.0 (2019년 5월 21일)
2.x: 2.8.0 (2019년 6월 24일)

2. 역사

폴리머의 공개 개발은 2013년 11월 프로미스 폴리필 출시와 함께 시작되었다. 이후 데이터 바인딩 기능, Material Design 기반의 시각적 스타일 가이드라인, 그리고 "Core" 및 "Paper" 웹 컴포넌트를 포함하는 웹 디자인 라이브러리로 점차 확장되었다. 'Core' 컴포넌트는 일반적인 기능을, 'Paper' 컴포넌트는 Material Design 개념에 특화된 컴포넌트를 제공하기 위해 설계되었다.[9][26]

구글은 폴리머 프로젝트 홍보 및 개발자 커뮤니티 활성화를 위해 여러 차례 폴리머 서밋을 개최했다.

연도날짜개최 도시
2015년9월 14일 ~ 15일암스테르담
2016년10월 17일 ~ 18일런던
2017년8월 22일 ~ 23일코펜하겐


2. 1. 주요 버전

폴리머의 공개 개발은 2013년 11월 프로미스 폴리필의 출시와 함께 시작되었다. 이후 시각적 스타일 가이드라인(Material Design 기반), 데이터 바인딩 기능, 그리고 다수의 "Core" 및 "Paper" 웹 컴포넌트를 포함하는 웹 디자인 라이브러리로 점차 확장되었다. 'Core' 컴포넌트는 대부분의 웹사이트에 필요한 일반적인 기능을 포함하도록 설계되었고, 'Paper' 컴포넌트는 Material Design 개념을 핵심 디자인 요소로 사용하는 더 특화된 컴포넌트를 제공하도록 만들어졌다. 버전 0.5의 출시는 초기 사용자들이 프로젝트를 사용할 수 있는 첫 번째 버전으로 여겨지는 중요한 이정표였다.[9][26]

구글은 버전 0.5 출시 이후에도 폴리머 설계를 계속 개선했으며, 특히 많은 개발자가 지적한 성능 문제를 해결하는 데 중점을 두었다. 이러한 노력은 2015년 버전 1.0의 출시로 이어졌으며, 이는 라이브러리의 첫 번째 "프로덕션 준비" 버전으로 간주되었다.[10][27] 버전 1.0은 폴리머의 성능을 크게 향상시켜 로드 시간을 최대 7배까지 단축했다.[11][28] 또한 버전 1.0부터 구글은 폴리머 프로젝트의 요소를 요소 카탈로그와 웹 컴포넌트 폴리필 및 웹 컴포넌트 슈가링 라이브러리로 명확하게 분리했다.

2018년 5월 2일, 폴리머 팀은 향후 폴리머 개발 방향을 변경하여, 기존의 양방향 바인딩과 템플릿 시스템에서 벗어나 LitElement[12][29](여전히 폴리머 프로젝트의 일부[13][30])와 단방향 바인딩에 집중할 것이라고 발표했다.[14][31]

3. 특징

폴리머는 웹 컴포넌트 표준을 기반으로 한다. 커스텀 엘리먼트는 클래스가 있는 ES 모듈(주로 자바스크립트)을 사용하여 개발할 수 있다. 커스텀 엘리먼트 정의는 엘리먼트의 CSS 스타일, 엘리먼트의 로컬 DOM을 위한 HTML 템플릿, 엘리먼트 속성, 라이프사이클 콜백, 자바스크립트 메소드 등으로 구성된다.

이렇게 정의된 커스텀 엘리먼트는 HTML 코드 안에서 일반 HTML 태그처럼 사용할 수 있다.

폴리머는 순수(vanilla) 웹 컴포넌트 기능 외에 다음과 같은 여러 유용한 기능을 추가로 제공한다.


  • 커스텀 엘리먼트를 더 간단한 방법으로 생성하는 기능
  • 단방향 및 양방향 데이터 바인딩 기능
  • 계산된 속성(Computed properties)
  • 조건부 템플릿 및 반복 템플릿
  • 사용자 상호작용을 위한 제스처 이벤트

4. 구성 요소

폴리머 라이브러리의 핵심 구성 요소는 커스텀 엘리먼트(Custom Element)이다. 이는 HTML, CSS, 자바스크립트 코드를 하나로 캡슐화하여 재사용 가능한 웹 컴포넌트를 정의하는 기술이다. 개발자는 ES 모듈과 클래스를 사용하여 커스텀 엘리먼트를 만들 수 있으며, 이렇게 정의된 엘리먼트는 일반적인 HTML 태그처럼 웹 페이지 코드 내에서 사용할 수 있다. 커스텀 엘리먼트는 엘리먼트의 시각적 표현(CSS), 내부 구조(HTML 템플릿), 동작(자바스크립트) 등을 포함하여 정의된다.

4. 1. 커스텀 엘리먼트 정의 (예시)

커스텀 엘리먼트는 클래스가 있는 ES(ECMAScript, 대부분 자바스크립트) 모듈을 사용하여 개발할 수 있다. 커스텀 엘리먼트 정의는 CSS 스타일, 엘리먼트의 로컬 DOM을 위한 HTML 템플릿, 엘리먼트 속성, 라이프사이클 콜백, 자바스크립트 메서드로 구성된다:



import {PolymerElement, html} from '@polymer/polymer/polymer-element.js'

class HelloElement extends PolymerElement {

static get template() {

return html`



Hello !

`;

}

static get is() { return 'hello-element'; }

static get properties() {

return {

name: {

type: String

}

/* Element properties */

}

}

/* Custom methods */

}

window.customElements.define(HelloElement.is, HelloElement);



위에 정의된 엘리먼트는 HTML 코드 안에서 다음과 같이 사용할 수 있다:






5. 활용

폴리머는 상호 운용 가능한 "레고 블록"과 같은 구조를 활용하여 웹 애플리케이션을 구축하는 데 사용될 수 있다.[16][32] 이는 구조화된 설계 프로세스에 특별한 주의를 기울인 결과로, 재사용 가능한 컴포넌트를 만들고 이를 조합하여 복잡한 사용자 인터페이스(UI)를 효율적으로 구성하는 것을 가능하게 한다. 이러한 특징 덕분에 폴리머는 2015년과 2016년에 걸쳐 사용량이 증가하며 시장에서 인지도를 높였다.[15]

2018년에는 폴리머 프로젝트의 일환으로 구글 크롬 팀이 LitElement를 개발했다. LitElement는 웹 컴포넌트를 만들기 위한 가볍고 사용하기 쉬운 프레임워크로 설계되었으며, 모든 프런트엔드 프레임워크 또는 라이브러리와 함께 사용할 수 있다.

참조

[1] 웹사이트 AUTHORS.txt https://polymer.gith[...] 2017-08-18
[2] 웹사이트 CONTRIBUTORS.txt https://polymer.gith[...] 2017-08-18
[3] 웹사이트 1.0 https://www.polymer-[...] 2017-08-18
[4] 웹사이트 Releases · Polymer/polymer https://github.com/P[...] 2019-09-04
[5] 웹사이트 polymer/LICENSE.txt at master https://github.com/P[...] 2017-04-24
[6] 웹사이트 Mission accomplished: has been componentized. New @googleearth is built w/ #WebComponents using @polymer.pic.twitter.com/h76ztfynYy https://twitter.com/[...] 2017-07-08
[7] 웹사이트 Meet Google Drive – One place for all your files https://accounts.goo[...] 2021-06-21
[8] 웹사이트 Who's using Polymer? https://github.com/P[...] 2016-06-04
[9] 웹사이트 Polymer gives us a closer look at Google's Material Design UI https://web.archive.[...] 2015-08-21
[10] 웹사이트 Google's Polymer 1.0 brings reuse and better branding to Web development https://web.archive.[...] 2015-05-29
[11] 웹사이트 Welcome - Polymer 1.0 https://web.archive.[...]
[12] 웹사이트 Roadmap update, part 1: 3.0 and beyond https://www.polymer-[...]
[13] 뉴스 Justin Fagnani on Twitter https://twitter.com/[...] 2018-05-14
[14] 웹사이트 Roadmap update, part 2: FAQ - Polymer Project https://www.polymer-[...] 2018-05-14
[15] 웹사이트 Polymer Usage Statistics https://trends.built[...] 2019-03-00
[16] 웹사이트 Inside ING Direct's new lego block app architecture http://www.itnews.co[...] 2015-08-13
[17] 웹사이트 AUTHORS.txt https://polymer.gith[...] 2017-08-18
[18] 웹사이트 CONTRIBUTORS.txt https://polymer.gith[...] 2017-08-18
[19] 웹사이트 1.0 https://www.polymer-[...] 2017-08-18
[20] 웹사이트 Releases · Polymer/polymer https://github.com/P[...] 2018-03-19
[21] 웹사이트 Releases · Polymer/polymer https://github.com/P[...] 2018-05-05
[22] 웹사이트 Polymer 3.0: New year, new preview https://www.polymer-[...] 2018-03-19
[23] 웹사이트 polymer/LICENSE.txt at master https://github.com/P[...] 2017-04-24
[24] 웹사이트 Mission accomplished: has been componentized. New @googleearth is built w/ #WebComponents using @polymer.pic.twitter.com/h76ztfynYy https://twitter.com/[...] 2017-07-08
[25] 웹사이트 Who's using Polymer? https://github.com/P[...] 2016-06-04
[26] 웹사이트 Polymer gives us a closer look at Google's Material Design UI http://www.androidau[...] 2018-12-09
[27] 웹사이트 Google’s Polymer 1.0 brings reuse and better branding to Web development http://www.cio.com/a[...] 2018-12-09
[28] 웹사이트 Welcome - Polymer 1.0 https://www.polymer-[...] 2018-12-09
[29] 웹사이트 Roadmap update, part 1: 3.0 and beyond https://www.polymer-[...] 2018-12-09
[30] 뉴스 Justin Fagnani on Twitter https://twitter.com/[...] 2018-05-14
[31] 웹사이트 Roadmap update, part 2: FAQ - Polymer Project https://www.polymer-[...] 2018-05-14
[32] 웹사이트 Inside ING Direct's new lego block app architecture http://www.itnews.co[...] 2015-08-13
[33] 웹인용 AUTHORS.txt https://polymer.gith[...] 2017-08-18
[34] 웹인용 CONTRIBUTORS.txt https://polymer.gith[...] 2017-08-18
[35] 웹인용 1.0 https://www.polymer-[...] 2017-08-18
[36] 웹인용 Releases · Polymer/polymer https://github.com/P[...] 2019-09-04
[37] 웹인용 polymer/LICENSE.txt at master https://github.com/P[...] 2017-04-24
[38] 웹인용 Mission accomplished: has been componentized. New @googleearth is built w/ #WebComponents using @polymer.pic.twitter.com/h76ztfynYy https://twitter.com/[...] 2017-07-08
[39] 웹인용 Meet Google Drive – One place for all your files https://accounts.goo[...] 2021-06-21
[40] 웹인용 Who's using Polymer? https://github.com/P[...] 2016-06-04


본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com