Polymer는 Google에서 만드는 컴포넌트 기술로 HTML5의 Web Components 규격을 사용한다.애초에 Google은 AngularJS를 만들었지만, 정작 자기들의 서비스(YouTube, Earth 등)에는 Polymer를 사용한다.
Polymer와 Web Components에 대한 자세한 얘기는 다음에 하고, 오늘은 일단 Polymer를 무작정 깔아보고 맛보는 경험을 해보자.
1. Node.js 설치하기
Polymer는 Javascript 라이브러리이고 자연스레 Node.js 환경을 중심으로 개발을 진행한다. 물론 배포는 굳이 Node.js로 하지 않아도 된다. Polymer 앱은 html과 정적 리소스로 이루어지기 때문에 어떤 웹서버에서도 돌릴 수 있다.Node.js는 압축파일을 풀어서 설치할 수도 있고, 각 운영체제에 맞는 설치파일을 이용할 수도 있다. 여기서는 Ubuntu Linux에 설치하는 것을 가정한다. Windows에서도 Linux Subsystem을 설치한다면 동일한 방법으로 설치할 수 있다.
Node.js를 패키지 매니저로 설치하려면 NodeSource에서 제공하는 리포지토리를 이용하면 된다. 불행하게도 Ubuntu가 제공하는 Node.js는 버전이 너무 낮다. 현재 안정버전인 버전8을 설치하려면 다음 명령을 실행하면 된다.
$ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
$ sudo apt-get install -y nodejs
좀 기다리면 설치가 완료된다.
2. Bower 설치하기
Bower는 프론트엔드 Javascript 라이브러리 패키지를 관리하는 모듈이다. HTML, CSS, Javascript, 폰트, 이미지 등을 모두 관리하며, 버전과 의존성을 고려하여 최신의 상태로 유지할 수 있게 한다.Bower 자체는 npm으로 설치할 수 있다. Bower가 일단 설치되고 나면 프론트엔드에 관련된 패키지는 Bower로 설치할 수 있다. Bower 설치는 다음 명령으로 가능하다.
$ sudo npm install -g bower
역시 좀 기다리면 설치가 완료된다. Bower는 WebComponents.org에서 얻을 수 있는 컴포넌트들을 설치하는데 필요하기 때문에 꼭 설치한다.
3. Polymer-CLI 설치하기
Polymer-CLI는 "스위스 군용 칼"처럼, Polymer 프로젝트의 골격을 만들어주고, 테스트, 번들링, 빌드 등의 온갖 일을 해준다. 그리고 만든 앱을 실행시켜주기도 하는 만능도구이다.Polymer 홈페이지에는 다음과 같은 명령으로 설치하라고 되어 있다.
$ sudo npm install -g polymer-cli
그런데 나의 경우는 다음과 같이 설치 도중에 에러가 났다.
Error: EACCES: permission denied, mkdir '/usr/lib/node_modules/polymer-cli/node_modules/wd/build'
at Object.fs.mkdirSync (fs.js:885:18)
at sync (/usr/lib/node_modules/polymer-cli/node_modules/mkdirp/index.js:71:13)
at Object. (/usr/lib/node_modules/polymer-cli/node_modules/wd/scripts/build-browser-scripts.js:6:1)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Function.Module.runMain (module.js:676:10)
at startup (bootstrap_node.js:187:16)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! wd@1.5.0 install: `node scripts/build-browser-scripts`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the wd@1.5.0 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
구글링하면 --unsafe-perm 옵션을 추가하라고 되어 있으나, 내 경우에는 동일한 에러가 발생했다. 하는 수 없이 글로벌 설치(-g 옵션)를 포기하고 로컬 설치를 했다. 다음과 같은 명령으로 설치하니 다행히 설치는 된다. Polymer-CLI는 개발도구이므로 굳이 글로벌 설치를 할 필요는 없다.
위와 같이 로컬 설치하면 $HOME/node_modules 아래에 모듈이 설치되며, Polymer-CLI는 $HOME/node_modules/.bin 디렉토리에 설치된다. 그러므로 이 디렉토리를 $PATH에 추가해야 한다.
$HOME/.profile에 이 경로를 다음과 같이 추가하고, source .profile 을 실행하여 반영한다.
이제 쉘에서 polymer라고 치면 다음과 같이 실행될 것이다.
아래/위 화살표를 이용하여 만들 골격을 정할 수 있다. polymer-2-element는 컴포넌트를 만들때 쓰는 골격이며, polymer-2-application은 어플리케이션의 기본 골격이다. starter-kit과 shop은 좀 더 완성된 간단한 샘플 어플리케이션으로서 어떻게 Polymer 어플리케이션을 만들 수 있는지 검토해볼 수 있다.
init을 실행하면 필요 디렉토리를 만든 다음, bower를 통해 필요한 라이브러리를 다운받고 설정 파일과 골격 html을 생성한다. 디렉토리로 들어가 어떤 파일이 만들어졌는지 확인해 보자.
만들어진 Polymer 어플리케이션을 실행하려면 polymer serve 명령을 내리면 된다. 안내대로 8081 포트에 HTTP 서버가 동작하게 되며, 해당 디렉토리의 어플리케이션을 브라우저를 통해 볼 수 있다.
다음은 starter-kit으로 만들어진 어플리케이션의 화면으로 Material 스타일의 컴포넌트를 사용함을 볼 수 있다.
실제 서비스를 운영할 때는 여러가지 목적으로 HTML, CSS, Javascript를 압축한다. 그리고 실제 사용하는 외부 라이브러리만 패키징해야 하고, 경우에 따라 ES6로 작성된 Javascript를 ES5로 변환해야 한다. 이런 작업을 polymer build라는 명령으로 간단하게 수행할 수 있다.
기본 설정인 경우 es5-bundled, es6-unbundled로 두개의 빌드를 만든다. 만들어진 build 디렉토리에 들어가서 보면 알 수 있다. bundle은 쪼개져있는 소스코드 라이브러리 코드들을 하나의 큰 파일로 만드는 작업이다. 예전에는 이게 더 효율적이었다. 그런데 요즘은 HTTP/2와 맞물려 쪼개어져 있는 것이 더 효율적이다. 그래서 위와 같이 두개의 빌드가 만들어진다.
어쨌든 build/es5-build로 들어가서 polymer serve로 실행한 뒤 브라우저에서 소스보기를 하면 뭐가 달라졌는지 알 수 있다.
실제 서비스를 할 때는 이 빌드된 디렉토리를 서비스하는 웹서버에 탑재하면 된다. 굳이 Node.js가 아니라도 Apache Tomcat 등 다양한 웹서버에 올릴 수 있다.
이렇게 Polymer 맛을 보았으니, 실무에 적용하면서 계속 정리해볼까 한다.
$ npm install polymer-cli
위와 같이 로컬 설치하면 $HOME/node_modules 아래에 모듈이 설치되며, Polymer-CLI는 $HOME/node_modules/.bin 디렉토리에 설치된다. 그러므로 이 디렉토리를 $PATH에 추가해야 한다.
$HOME/.profile에 이 경로를 다음과 같이 추가하고, source .profile 을 실행하여 반영한다.
PATH="$HOME/node_modules/.bin:$PATH"
이제 쉘에서 polymer라고 치면 다음과 같이 실행될 것이다.
4. Polymer 프로젝트 골격 만들어 보기
Polymer-CLI로 프로젝트의 골격을 만들면, 프로젝트를 시작하기 수월하다. 먼저 프로젝트가 놓일 디렉토리르 만들고, 그 디렉토리로 들어간다. 그리고 다음과 같은 명령을 수행하면 아래와 같은 선택 화면이 뜬다.$ polymer init
아래/위 화살표를 이용하여 만들 골격을 정할 수 있다. polymer-2-element는 컴포넌트를 만들때 쓰는 골격이며, polymer-2-application은 어플리케이션의 기본 골격이다. starter-kit과 shop은 좀 더 완성된 간단한 샘플 어플리케이션으로서 어떻게 Polymer 어플리케이션을 만들 수 있는지 검토해볼 수 있다.
init을 실행하면 필요 디렉토리를 만든 다음, bower를 통해 필요한 라이브러리를 다운받고 설정 파일과 골격 html을 생성한다. 디렉토리로 들어가 어떤 파일이 만들어졌는지 확인해 보자.
만들어진 Polymer 어플리케이션을 실행하려면 polymer serve 명령을 내리면 된다. 안내대로 8081 포트에 HTTP 서버가 동작하게 되며, 해당 디렉토리의 어플리케이션을 브라우저를 통해 볼 수 있다.
다음은 starter-kit으로 만들어진 어플리케이션의 화면으로 Material 스타일의 컴포넌트를 사용함을 볼 수 있다.
다음은 shop을 선택할 때 만들어지는 어플리케이션으로 전자상거래 사이트의 전형을 보여준다.
5. Polymer 프로젝트 빌드해 보기
위와 같이 샘플로 만든 사이트를 브라우저로 소스보기 하면 다음과 같이 shop-app라는 커스텀 태그가 사용됨을 볼 수 있다.실제 서비스를 운영할 때는 여러가지 목적으로 HTML, CSS, Javascript를 압축한다. 그리고 실제 사용하는 외부 라이브러리만 패키징해야 하고, 경우에 따라 ES6로 작성된 Javascript를 ES5로 변환해야 한다. 이런 작업을 polymer build라는 명령으로 간단하게 수행할 수 있다.
기본 설정인 경우 es5-bundled, es6-unbundled로 두개의 빌드를 만든다. 만들어진 build 디렉토리에 들어가서 보면 알 수 있다. bundle은 쪼개져있는 소스코드 라이브러리 코드들을 하나의 큰 파일로 만드는 작업이다. 예전에는 이게 더 효율적이었다. 그런데 요즘은 HTTP/2와 맞물려 쪼개어져 있는 것이 더 효율적이다. 그래서 위와 같이 두개의 빌드가 만들어진다.
실제 서비스를 할 때는 이 빌드된 디렉토리를 서비스하는 웹서버에 탑재하면 된다. 굳이 Node.js가 아니라도 Apache Tomcat 등 다양한 웹서버에 올릴 수 있다.
이렇게 Polymer 맛을 보았으니, 실무에 적용하면서 계속 정리해볼까 한다.
댓글 없음:
댓글 쓰기