Angular CLI와 Meteor를 분리하고, Meteor를 단순히 API 서버로 사용하면서 Angular CLI는 Webpack Dev Server를 통해 4200 port로 브라우져에서 접속하면 Meteor Client는 3000 port를 통해 Meteor Server와 DDP 통신을 한다. (이전 블로그 참조) 이번에는 외부 라이브러리로 Clarity CSS Framework을 추가해 본다.
Clarity CSS Framework
Twitter Bootstrap 처럼 CSS Framework이지만, clarity-ui, clarity-icon, clarity-angular 3개의 파트로 구분된다. clarity-ui는 css만 존재하고, clarity-icon은 이름처럼 아이콘에 관련된 부분이며, clarity-angular는 Angular 컴포넌트를 제공한다.
// 아이콘 관련
$ npm install clarity-icons --save
$ npm install @webcomponents/custom-elements@1.0.0 --save
// UI CSS
$ npm install clarity-ui --save
// Angular 컴포넌트
$ npm install clarity-angular --save
Clarity-Angular는 ngModule에서 import를 하면되고 나머지는 아래 장의 설명처럼 ng eject 이전 상태라면 angular-cli.json 에 설정하고, ng eject가 되었다면 webpack.config.js에 설정한다.
// 메인 모듈
import { ClarityModule } from 'clarity-angular';
@NgModule({
imports: [
BrowserModule,
ClarityModule.forRoot()
],
...
})
export class AppModule {}
@angular/cli 설정을 webpack.config.js로 옮기기
Clarity Seed를 보면 @angular/cli 기반으로 생성되어 있고, angluar-cli.json 안에 설정이 다음과 같이 되어있다. 진행중인 프로젝트에 Clarity icons, ui에 대한 외부 경로 설정을 한다.
해당 설정을 이전강좌의 Angular CLI + Meteor 프로젝트의 angular-cli.json을 넣고 ng eject를 하게 되면 다음과 같은 내용이 webpack.config.js에 자동 설정된다.
- Module안에 "exclude"와 "include"의 "src/styles.css"이 있는 모든 곳에 설정.
- Plugin안에 new ConcatPlugin내용 추가
"module": {
{
"exclude": [
path.join(process.cwd(), "src/styles.css"),
path.join(process.cwd(), "node_modules/clarity-icons/clarity-icons.min.css"),
path.join(process.cwd(), "node_modules/clarity-ui/clarity-ui.min.css")
]
...
},
{
"include": [
path.join(process.cwd(), "src/styles.css"),
path.join(process.cwd(), "node_modules/clarity-icons/clarity-icons.min.css"),
path.join(process.cwd(), "node_modules/clarity-ui/clarity-ui.min.css")
]
...
}
...
},
"plugins": [
new ConcatPlugin({
"uglify": false,
"sourceMap": true,
"name": "scripts",
"fileName": "[name].bundle.js",
"fileToConcat": [
"node_modules/@webcomponents/custsom-elements/custom-elements.min.js",
"node_modules/clarity-icons/clarity-icons.min.js"
]
})
]
Clarity 테스트
Clarity CSS Framework은 업무적으로 요하는 컴포넌트 요소를 잘 정리해 놓았다. Application Layout에 대한 내역을 app.component.html에 추가한다.
결과 화면
Clarity Icon 선택적으로 적용하기
plugins부분에 clarity-icons/clarity-icons.min.js 은 전체 아이콘을 포함하고 있다. 전체을 적용하지 않고, Core와 일부분만 적용하고 싶을 경우 다음과 같이 한다.
// webpack.config.js에서 clarity-icons.min.js 제거
"plugins": [
new ConcatPlugin({
"uglify": false,
"sourceMap": true,
"name": "scripts",
"fileName": "[name].bundle.js",
"fileToConcat": [
"node_modules/@webcomponents/custsom-elements/custom-elements.min.js"
]
})
]
src/main.ts안에 import
app.component.html안에 clr-icon 적용 테스트. 자세한 사항은 문서를 참조한다. Clarity-icons은 svg icon으로 사용자 정의 아이콘을 추가 할 수도 있다.
'Meteor > Angular + Meteor' 카테고리의 다른 글
| [Meteor 1.6] Angular CLI + Meteor 기반 프로젝트 만들기 (0) | 2017.11.08 |
|---|---|
| [Meteor 1.6] Ionic + Meteor 기반 프로젝트 만들기 (0) | 2017.11.06 |
