웹 구성요소는 웹용 빌드에 관해 알고 있다고 생각하는 모든 것을 바꿀 것입니다. 웹에 자체 HTML 태그를 만들 뿐만 아니라 로직과 CSS를 캡슐화할 수 있는 로우 레벨 API가 처음으로 제공됩니다. 더 이상 전역 스타일시트 수프나 상용구 코드가 필요하지 않습니다. 모든 것이 요소인 새로운 세상입니다.
DotJS 강연에서 웹 구성요소가 제공하는 기능과 최신 도구를 사용하여 웹 구성요소를 빌드하는 방법을 살펴봅니다. 오늘날 최신 브라우저에서 웹 구성요소를 사용하여 앱을 개발하기 위한 폴리필 및 슈가 라이브러리인 Polymer를 사용하여 웹 앱을 만드는 과정을 간소화하는 도구 워크플로인 Yeoman을 보여드리겠습니다.
맞춤 요소 만들기 및 다른 사용자가 만든 요소 설치
이 강의에서는 다음을 알아봅니다.
- 웹 구성요소를 구성하는 네 가지 사양(맞춤 요소, 템플릿, Shadow DOM, HTML 가져오기)에 관한 내용입니다.
- Bower를 사용하여 자체 맞춤 요소를 정의하고 다른 사용자가 만든 요소를 설치하는 방법
- JavaScript 작성에 드는 시간을 줄이고 페이지 구성에 더 많은 시간을 할애하세요.
- 최신 프런트엔드 도구 (Yeoman)를 사용하여 generator-polymer와 함께 Polymer를 사용하여 애플리케이션을 스케폴드합니다.
- Polymer Super가 웹 구성요소 생성을 어떻게 변화시키는지
예를 들어 Polymer의 웹 구성요소 폴리필과 라이브러리 자체를 설치하려면 다음과 같은 한 줄짜리 명령어를 실행하면 됩니다.
bower install --save Polymer/platform Polymer/polymer
이렇게 하면 bower_components
폴더가 추가되고 위의 패키지가 추가됩니다. --save
는 앱의 bower.json 파일에 추가합니다.
나중에 Polymer의 accordion 요소를 설치하려면 다음을 실행하면 됩니다.
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를 사용해 볼 수 있습니다.
이 주제와 관련하여 확인해 볼 만한 다른 도움말은 다음과 같습니다.