웹 구성요소는 웹 개발에 대한 모든 사항을 변화시킬 것입니다. 이제 웹에 저수준 API가 도입되므로, 자체적으로 HTML 태그를 생성할 뿐만 아니라 로직과 CSS도 캡슐화할 수 있습니다. 더 이상 글로벌 스타일시트 수프나 상용구 코드가 필요 없습니다. 이 세상은 모든 것이 요소가 되는 멋지고 새로운 세상입니다.
DotJS에서 저의 강연에서는 웹 구성요소가 제공해야 하는 기능과 최신 도구를 사용하여 웹 구성요소를 빌드하는 방법을 알아봅니다. 현재 최신 브라우저에서 웹 구성요소를 사용하여 앱을 개발하기 위한 폴리필 및 슈가 라이브러리인 Polymer를 사용하여 웹 앱 제작을 간소화할 수 있는 도구 워크플로인 Yeoman을 보여 드리겠습니다.
맞춤 엘리먼트를 만들고 다른 사용자가 만든 엘리먼트 설치하기
이 대담에서는 다음과 같은 내용을 다룹니다.
- 웹 구성요소를 구성하는 4가지 사양(맞춤 요소, 템플릿, Shadow DOM, HTML 가져오기)
- 나만의 맞춤 요소를 정의하고 Bower를 사용하여 다른 사용자가 만든 요소를 설치하는 방법
- JavaScript 작성에 드는 시간을 줄이고 페이지 구성에 더 많은 시간을 할애할 수 있습니다.
- 최신 프런트엔드 도구 (Yeoman)를 사용하여 Polymer와 generator-polymer를 함께 사용하여 애플리케이션을 지원합니다.
- Polymer가 웹 구성요소 생성을 혁신한 방법
예를 들어 Polymer의 Web Component 폴리필과 라이브러리 자체를 설치하려면 다음 한 줄을 실행하면 됩니다.
bower install --save Polymer/platform Polymer/polymer
그러면 bower_components 폴더가 추가되고 위의 패키지가 추가됩니다. --save는 이를 앱의 bower.json 파일에 추가합니다.
나중에 Polymer의 아코디언 요소를 설치하려면 다음을 실행합니다.
bower install --save Polymer/polymer-ui-accordion
그런 다음 애플리케이션으로 가져옵니다.
<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">
시간을 절약하기 위해 필요한 모든 종속 항목, 상용구 코드, 앱 최적화를 위한 도구를 갖춘 새로운 Polymer 앱을 Yeoman과 함께 다음 한 줄로 작성할 수 있습니다.
yo polymer
보너스 둘러보기
또한 강연에서 보여드린 Polymer Jukebox 앱 설명도 30분 보너스로 녹화했습니다.
보너스 동영상:
- '모든 것은 요소가다'라는 말의 의미
- Bower를 사용하여 Polymer의 플랫폼 폴리필 및 요소를 설치하는 방법
- Yeoman 생성기와 하위 생성기로 Jukebox 앱 스캐폴딩
- 상용구를 통해 구축된 플랫폼 기능 이해
- Angular 앱을 통해 Polymer로 기능적으로 포팅한 방법
또한 Yeoman 하위 생성기를 사용하여 새로운 Polymer 요소를 스캐폴딩합니다. 예를 들어 다음과 같이 요소 foo의 상용구를 만듭니다.
yo polymer:element foo
그러면 요소를 자동으로 가져올지 여부, 생성자가 필요한지 여부, 기타 몇 가지 환경설정을 선택할 수 있습니다.
두 번의 대담에 표시된 앱의 최신 소스는 이제 GitHub에 있습니다. 더 체계적이고 읽기 쉽도록 조금 더 리팩터링했습니다.
앱 미리보기:
추가 자료
요약하면, Polymer는 웹 구성요소가 기본적으로 구현되기를 기다리는 동안 현재 최신 웹브라우저에서 사용할 수 있게 해 주는 JavaScript 라이브러리입니다. 최신 도구를 사용하면 이러한 도구를 사용하여 워크플로를 개선할 수 있으며 자체 태그를 개발할 때 Yeoman 및 Bower를 사용해 볼 수도 있습니다.
이 주제에 관해 살펴볼 만한 다른 몇 가지 자료가 있습니다.