Angular CLI(Command Line Interface)는 AngularJS와 비슷한 것 같지만 제법 많은 차이가 있다.
AngularJS는 JavaScript 기반으로 프론트 처리에 중점이 있고,
Angular CLI는 TypeScript 기반으로 백단(서버) 처리에 중점을 두고 있다.
(AngularJS는 1.x 버전을, Angular는 2.0 이후 버전을 의미한다.)
따라서 Angular CLI는 NodeJS 기반에서 운영되고 사용법이 제법 복잡하다.
더욱이 Angular CLI는 MVC(MVVM) 개념이 없으면, 많은 파일에 헷갈려서(?) 시작하기 어렵다.
간단한 게시판(CRUD)을 만들면서 Angular CLI의 개념을 익힐 수 있도록 정리하였다.
- AngularJS 기반 게시판
- Angular CLI 기반 게시판
- Mongoose 연동 (준비중)
여기서는 NodeJS와 AngularJS 문법에 대한 설명을 정리하지 않는다.
몰라도 문제는 없을 것으로 여겨지지만, NodeJS와 Angular CLI 설치법은 알고 있어야 한다.
Angular CLI에 대한 사용법은 Angular CLI 공식 홈페이지에 예제로 잘 설명되어 있다.
영어가 부담스러우면 구글에서 한글 검색으로 angular heroes를 검색하면 된다.
여기서는 Angular의 Heroes 예제를 나름의 방식으로 쉽게 정리하였다.
먼저, NodeJS를 설치한 후에, 다음과 같이 npm을 이용하여 Angular CLI를 설치한다.
npm install -g @angular/cli
다음 그림과 같이 ng version으로 설치한 Angular CLI의 버전을 확인 할 수 있다.
Angular 5.2.5, Angular CLI 1.6.7이 설치되어 있다.
이하의 예제는 GITHUB에서 받을 수 있다.
다음 명령어를 실행하여 예제를 확인할 수 있다.
- git clone https://github.com/gujc71/angularBoard.git
- npm install
- ng serveAngular CLI가 설치 되었으면,
Angular CLI로 angular-board 프로젝트를 생성한다.
ng new angular-board
cd angular-board를 실행하여 생성한 angular-board 폴더로 변경한다.
다음 명령어로 Angular CLI에서 제공되는 웹 서버를 실행한다.
Angular CLI는 nodeJS 기반이라 npm start로 시작해도 되지만 다음 명령어로 쉽게 실행할 수 있다.
ng serve
웹 브라우저에 http://localhost:4200/를 입력해서 다음 그림과 같이 실행되면, Angular CLI를 사용할 준비가 된 것이다.
IE 11 이하에서는 작동하지 않으니, Edge 이상을 사용해야 하고,
개발을 쉽게 하기 위해서는 Angular를 위해서 다양한 기능을 제공하는 Chrome을 사용하는 것이 좋다.
탐색기로 angular-board 폴더를 열어 보면, 매우 많은 파일들이 생성되어 있는 것을 볼 수 있다.
이중에서 src폴더 하위의 app 폴더에 있는 3개의 파일이,
이상의 그림과 같이 웹을 실행하여 사용자 눈에 보이는 데에 사용되는 파일이다.
app.component.html이 HTML을 작성하는 파일이고,
app.component.css가 CSS를 작성하는 파일이다.
대부분 웹 개발에서 이 두 파일을 구분하여 사용한다.
다만, app.component.ts는 TypeScript로 Anguler 프로그램을 작성하는 파일로
앞서의 AngulerJS 예제에서 작성한 JavaScript 코드를 여기에 작성한다고 보면 된다.
Java나 닷넷으로 치면 컨트롤 코드를 작성하는 파일이다.
각 파일에 기본으로 작성된 코드는 각각 다음과 같다.
app.component.css는 빈 파일로 CSS를 사용하지 않았다.
app.component.html
app.component.html 파일에는 앞서의 시작화면을 보여주기 위한 HTML코드가 작성되어 있다.
Anguler 로고를 출력하기 위해 img 태그가 있고 [라인 5],
3개의 링크(href)를 사용하였다.
AngulerJS와 동일하게 {{}}를 이용하여 title이라는 변수의 값을 출력한다[라인 3].
app.component.ts
app.component.ts의 내용은 일반적인 Anguler 기본 구조 코드로,
Anguler에서는 3개의 파일이 한 세트이고,
ts 파일에서 사용할 HTML 파일(templateUrl)과 CSS 파일(styleUrls)을 지정한다 [라인 5,6].
selector로 HTML에서 Anguler가 사용될 앱 영역을 지정한다 [라인4].
기본 클래스(AppComponent)에서 title 변수에 app라는 문자열을 지정하여 HTML에서 출력하게 된다.
위 그림의 Welcome to App이 이렇게 출력된 것으로 여기에서 값을 수정하면 바뀌는 것을 확인 할 수 있다.
AngulerJS에서는 $scope의 하위에 변수나 함수를 추가해서 사용했지만,
Angular CLI에서는 객체지향 프로그램처럼 클래스(class)를 이용하여 구현한다 [라인8].
title 변수의 값을 'app'에서 'Anguler'로 바꾸어 저장하면,
자동으로 webpack이 컴파일을 실행하고 웹브라우저의 실행 결과가 바뀌어 있는 것을 볼 수 있다.
이제부터 게시판을 구현하기 위한 본격적인 Angular 프로그램을 작성한다.
먼저, 다음과 같이 board 컴포넌트를 생성한다.
컴포넌트는 애플리케이션의 화면을 구성하는 뷰(View)를 생성하고 관리하는 것이다.
즉, 앞서 정리한 3개 파일(html, css, ts)을 의미한다.
기본 컴포넌트로 개발해도 되지만, Angular 문서에서는 별도의 컴포넌트를 생성해서 사용하는 것을 권장한다.
ng generate component board
다음과 같이 3개의 파일이 생성된다.
(board.component.spec.ts 파일도 있지만 여기서 정리하지 않는다.)
이 파일들을 직접 생성해도 되지만 generate component를 이용해서 한번에 쉽게 생성할 수 있다.
board.component.ts의 내용은
app.component.ts와 비슷한 것 같지만 기본 클래스가 좀더 복잡하게 구성되어 있다.
그리고, board 컴포넌트의 기본 selector로 app-board가 지정되어 있다.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-board',
templateUrl: './board.component.html',
styleUrls: ['./board.component.css']
})
export class BoardComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
board.component.ts
board.component.htm 파일에는 한 문장을 출력하도록 작성되어 있다.
<p>
board works!
</p>
board.component.html
빈 CSS 파일을 포함해서 3개의 파일이 생성되었다.
웹 브라우저로 실행시킨 결과는 변한 것 없이 동일하게 Angular 로고가 출력된다.
앞서 board.component.ts에서 selector로 지정한 값이다.
<app-board></app-board>
app.component.html
다음 그림과 같이 기존 내용이 사라지고 board works!가 출력된 것을 확인할 수 있다.
기본 app 컴포넌트 대신에 추가한 board 컴포넌트의 내용이 실행된 것이다.
이제부터 게시판 코드를 board.component.html와 board.component.ts에 작성하여 예제를 개발하면 된다.
앞서 AngularJS에서 작성한 마지막 예제(sample4.html)를
board.component.html와 board.component.ts에 적절하게 나누어 작성한다.
파일 수정과 동시에 다름 그림과 같이 실행되는 것을 볼 수 있다.
먼저, board.component.html 파일의 내용을 다음과 같이 작성한다.
기본 코드는 AngularJS로 만든 마지막 예제(sample4.html의 HTML 부분과 동일하다.
board.component.html
AngularJS의
ng-model 대신에 [(ngModel)]을 사용하고,
ng-click 대신에 (click)을,
ng-repeat 대신에 *ngFor를 사용한다.
board.component.ts
board.component.js 파일도 JavaScrpt부분과 거의 유사하게 작성하였다.
변수 선언과 함수 사용도 거의 비슷하다.
근본적인 차이는 클래스 사용에 있다.
AngularJS는 JavaScript 기반이라 함수 기반으로 구성되었고,
Angular CLI는 TypeScript 기반으로 보다 객체 지향적으로 제작한다.
코드에서 보듯이 클래스(class) 구조로 작성한다.
AngularJS에서는 Json으로 사용한 boardForm이
Angular CLI에서는 BoardVO 클래스 변수로 사용된다.
Boardlist도 동일하다.
Angular CLI에서는 클래스 개념을 강조하여 MVC(MVVM)처럼 사용하여, Java(Spring, Struts)의 MVC와 거의 흡사하게 사용한다.
이상의 코드만 작성해서 실행하면 그림과 같은 오류가 발생한다.
웹 브라우저에서는 아무 것도 나오지 않기 때문에 오류 발생을 알 수 없고, 크롬(Chrome) 개발자 도구(F12)의 [Console] 탭에서 확인할 수 있다.
ng serve를 실행한 뒤, cmd 창(콘솔창)에 오류 메시지가 출력되기도 하지만
대부분의 오류는 크롬의 콘솔창에서 확인할 수 있다.
디버깅도 크롬의 sources 창에서 할 수 있으니 찾아보길 바란다.
HTML의 값을 가지고 오기 위해 사용하는 [(ngModel)]를 사용하기 위해서는
다음과 같이 빨간색으로 표시한 코드를 app.module.ts에 추가해야 한다.
Angular에서 제공하는 다양한 입력(폼) 기능을 사용한다는 의미이다.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { BoardComponent } from './board/board.component';
@NgModule({
declarations: [
AppComponent,
TestComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.module.ts
코드를 추가할 때는 코드 수정시 webpack이 즉시 컴파일해서 웹 브라우저에서 바로 확인이 가능했지만,
위 수정을 한 경우 서버를 재가동해야 하는 경우가 있다.
개발 서버를 종료하고 다시 실행한다 (ng serve).
이상으로 단순한 CRUD 기능을 게시판으로 구현해 보았다.
위 코드를 모두 따라해서 작성해 볼 수 있고, GitHub에서 다운로드 받아서 확인할 수 있다.
GitHub의 step1 branch가 이상의 예제에 대한 코드이다.
마지막으로 앞서의 코드를 정리하여, MVC(MVVM)처럼 구현한다.
이 구현을 위해 두가지를 수정한다.
먼저, BoardVO 클래스를 컴포넌트 파일 내에 같이 작성했지만 BoardVO.ts 파일로 따로 작성한다.
Angular CLI 공식 문서에는 Hero라는 클래스를 별도의 ts 파일로 작성해서 사용한다.
src\app 폴더에 BoardVO.ts파일로 다음과 같이 생성한다.
export class BoardVO {
id: number;
title: string;
writer: string;
}
BoardVO.ts
같은 파일 내에서는 사용하지 않았지만,
다른 파일일 경우에는 외부에서 사용한다는 의미로 class 앞에 export를 지정한다.
이렇게 외부로 뺀 클래스(BoardVO)는
다음과 같이 BoardVO 클래스 코드를 지우고 import 로 가져온다.
import { Component, OnInit } from '@angular/core';
import { BoardVO } from '../BoardVO';
var BoardList: BoardVO[] = [
{ id: 1, title: 'Title 1', writer: 'Mr. Nice' }
];
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
~~ 생략 ~~
board.component.ts
BoardVO.ts는 src\app 폴더에 있고
board.component.ts는 src\app\board 폴더에 있어서 상위 폴더를 나타내는 [../]가 사용한다.
다음으로, 서비스(service)를 구현한다.
MVC(Model–View–Controller, MVC)에서는 데이터와 관련된 처리나 반복된 기능은 서비스(service)에 구현하는 것이 추천된다.
서비스 사용법은 Angular CLI 예제에 잘 설명되어 있다.
여기서는 데이터 관련 처리를 DBMS에서 하지 않고, 배열로 처리하였다.
따라서, 배열 처리 부분을 모두 서비스에 작성한다.
서비스 파일을 작성하기 위해,
콘솔창(cmd)에서 ng generate service 명령어로 다음과 같이 board 서비스를 생성한다.
ng generate service board
src/app 폴더에 board.service.ts 파일이 생성된 것을 확인 할 수 있다.
생성된 소스는 다음과 같다.
import { Injectable } from '@angular/core';
@Injectable()
export class BoardService {
constructor() { }
}
board.service.ts
generate service 지시어로 서비스 파일을 생성하고,
환경 설정까지 잘 이루어 지지만, 간혹 설정 문제로 오류가 발생할 수 있다.
app.module.ts 파일에 다음과 같이 코드가 추가되었는지 확인해야 한다.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { BoardComponent } from './board/board.component';
import { BoardService } from './board.service';
@NgModule({
declarations: [
AppComponent,
BoardComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [BoardService],
bootstrap: [AppComponent]
})
export class AppModule { }
app.module.ts
이상으로 서비스를 사용할 준비가 되었다.
서비스 파일(board.service.ts)에 구현할 코드는 컴포넌트에 있는 코드를 모두 복사해서 사용한다.
단순 기능만 구현했기 때문에 컴포넌트에 있는 코드 모두가 데이터 관련 코드이기 때문에
컴포넌트(board.component.ts)에 있는 코드를 다음과 같이 복사해서 작성한다.
import { Injectable } from '@angular/core';
import { BoardVO } from './BoardVO';
var BoardList: BoardVO[] = [
{ id: 1, title: 'Title 1', writer: 'Mr. Nice' },
{ id: 2, title: 'Title 2', writer: 'Narco' }
];
@Injectable()
export class BoardService {
constructor() { }
boardlist = BoardList;
getBoardList(): BoardVO[] {
return this.boardlist;
}
removeBoard(id: number):void {
var idx = this.boardlist.findIndex(function (item) {
return item.id === id;
});
if (idx === -1) return;
this.boardlist.splice(idx, 1);
}
addBoard(boardForm: BoardVO): void {
var newId = ! this.boardlist.length ? 1 : this.boardlist[this.boardlist.length - 1].id + 1;
var newItem = {
id: newId,
title: boardForm.title,
writer: boardForm.writer
};
this.boardlist.push(newItem);
}
}
board.service.ts
컴포넌트에서 ../BoardVO로 작성한 것을 ./BoardVO로 점(.)을 하나 빼고 작성했다.
컴포넌트(board.component.ts)는 src/app/board폴더에 있고,
BoardVO는 src/app에 있어서 상위 폴더(..)를 지정했지만
서비스(board.service.ts) 파일은 같은 폴더(.)에 있기 때문이다.
다음으로 getBoardList 함수가 추가 되었다.
단순하게 데이터를 저장한 배열(boardlist)을 반환한다.
컴포넌트에서는 컴포넌트 내부의 배열이라 변수를 그냥 호출해서 사용했지만,
서비스로 배열을 옮겼기 때문에 getBoardList() 함수를 이용하여 받아온다.
board.component.ts
컴포넌트의 boardlist가 getBoardList()로 대체되면서,
이 boardlist를 참조하는 board.component.html의 코드도 다음과 같이 바뀌어야 한다.
<tr *ngFor="let item of getBoardList(); let inx = index">
<td>{{inx+1}}</td>
<td>{{item.title}}</td>
<td>{{item.writer}}</td>
<td><button type="button" (click)="removeBoard(item.id)">삭제</button></td>
</tr>
board.component.html
이상으로 Angulr를 MVC처럼 구현해 보았다.
위 코드를 모두 따라해서 작성해 볼 수 있고, GitHub에서 다운로드 받아서 확인할 수 있다.
GitHub의 step2 branch가 해당 내용이다.
여기서 정리한 내용은 Angular 개념을 잡기 위한 기초 내용으로, Angular는 더 많은 기능을 제공한다.
Routing, HTTP등의 기능부터, 입력값 검사 등의 다양한 기능이 제공되니 찾아서 익혀 보길 바란다.
여기서는 구현하지 않았지만, 수정 기능도 구현해 보길 바란다.
Angular CLI 예제(heroes)에서는 입력기능 없이 수정 기능이 구현되어 있으니, 참고해서 구현해 보면 Angular를 이해하는 데 도움이 될 것이다.
Angular CLI 예제는 bootstrap을 사용해서 보기 좋게 개발하는 방법도 알 수 있다.
'Node.js > Angular JS' 카테고리의 다른 글
| 1. AngularJS 기반 게시판 (5) | 2018.02.28 |
|---|