Angular2 | Angular 설정

Angular(Angular2)는 Google에서 개발한 컴포넌트 지향의 JavaScript 프레임워크이다. 최근 가장 주목 받고 있는 이 프레임워크의 사용에 대해 설명한다.
Tags:

AngularJS와 Angular2

Angular는 Google이 중심이 되어 개발하는 JavaScript 프레임워크이다. 이것은 원래 AngularJS라는 이름으로 개발되고 있었다. 그런데 그 후에 내용을 대폭 수정하여 새로운 Angular2 로 다시 등장하게 된 것이다. 이 때에 이름부터 2를 붙여서 “Angular"로 변경되었다.

이 새로운 Angular는 어떤 프레임워크인가. 그 특징을 한마디로 표현한다면 “컴포넌트 지향"이 될 것이다.

이전 AngularJS는 이른바 MVC 아키텍처를 염두에 두고 설계되어 있었다. 컨트롤러에 처리를 준비하고, 뷰에서 표시를 준비한다는 스타일이다.

하지만, 이 방식은 아무래도 프런트엔드 의 표시를 만들 수 핵심되는 JavaScript에는 최적의 것이라고는 할 수 없을 것이다. 좀 더 JavaScript에 있던 아키텍처가 있을 것이다. 그래서 Angular 팀이 생각한 것이 컴포넌트였다.

Web을 구성하는 요소 하나 하나의 독립적인 구성 요소로 정리 재구성한다. 뷰와 컨트롤러를 분리보다, 컴포넌트에 표시부터 처리까지 모두 갖추어져 있고, 컴포넌트를 배치하면 그것으로 끝이라는 스타일의 것이 Web 만들기에 훨씬 더 적합하다. 그래서 Angular는 내용을 완전히 바꾸고 새로운 프레임워크로 다시 태어나게 된 것이다.

이 Angular는 현재 아래 주소에서 공개되고 있다.

https://angular.io/

덧붙여서, 지금까지의 AngularJS도 아직 존재하고 있다. 아래 주소이다.

https://angularjs.org/

Angular CLI로 설치

Angular를 이용하려면 몇 가지 방법이 있다. 다만, 누군가 바로 생각할 수 있는 것이 “파일을 다운로드하여 프로젝트에 복사한다"라고 하는 방법일 것이다. 그러나 유감스럽게도 현재 시점에는 준비되어 있지 않다. Angular 사이트에서 파일 다운로드를 하지 않는다.

다음 생각나는 것이라면 npm을 이용하는 방법이다. 명령 프롬프트 또는 터미널에서 Web 응용 프로그램 디렉터리로 이동하여 아래와 같이 실행을 하게 되면 설치가 된다.

$ npm install angular2

아래는 실행 결과이다.

npm WARN deprecated angular2@2.0.0-beta.21: This version of Angular has been
... 생략 ...
npm WARN Angular2 No license field.

+ angular2@2.0.0-beta.21
added 1 package in 6.706s

그러나 현재점(2017년 12월)에서 npm install angular2에 설치되는 것은 베타이며, 이후에 RC 버전은 준비되어 있지 않은 것 같다. (npm install angular는? 라고 생각한 사람이 있을 수 있는데, 그렇게 하면 이전 1.x가 설치되어 버린다)

그럼 어떻게 하는 것이 좋은가. 아마도 가장 좋은 방법은 Angular CLI를 이용하는 방법이다. 이 방법은 Angular를 이용하기 위한 전용 도구로 아래의 URL에 공개되어 있다.

https://cli.angular.io/

그런데, 이 사이트에서 파일을 다운로드하는 것은 아니다. 여기에서는 사용법 등의 문서가 있다. 설치는 npm을 사용한다. 명령 프롬프트이나 터미널을 시작하여 아래와 같이 실행한다.

$ npm install -g @angular/cli

이것으로 Angular CLI가 설치된다.

혹시 설치중에 권한 관련 문제가 생기면 아래 링크로 해결하길 바란다.

https://docs.npmjs.com/getting-started/fixing-npm-permissions

Angular 설치

이 Angular CLI는 커멘드 라인에서 실행하는 도구이다. Angular를 사용하려면 먼저 명령 프롬프트 등을 시작하고, 프로젝트를 만들 위치에 cd 명령으로 이동한다. (cd {디렉터리명})

그리고 다음과 같이 명령을 실행한다.

$ ng new 프로젝트명

이것으로 Angular를 이용하는 프로젝트가 생성된다. 예를 들어 “myapp"라는 이름으로 작성한다면 ng new myapp라고 실행하면 “myapp"폴더가 만들어 지고, 그 안에 필요한 파일이 생성된다.

$ ng new myapp

응용 프로그램 실행

응용 프로그램의 실행도 Angular CLI를 사용 할 수 있다. cd 명령으로 프로젝트 디렉터리로 이동하고 ng serve라고 실행한다.

$ ng serve

이것으로 내장 서버를 기동하고, 다음 주소에서 응용 프로그램에 액세스할 수 있다. (다만, 처음에는 빌드를 위해 시작하는데 조금 시간이 걸린다)

http://localhost:4200/

화면에 “Welcome to app!“라는 문구와 함께 로고가 표시되면, 응용 프로그램이 제대로 실행되고 있는 거다. 아래 화면이 이 예제에서 생성되는 Angular 어플리케이션의 Web 페이지 화면이다.

Welcome to App!

Angular 응용 프로그램 구성

생성된 Angular 응용 프로그램 중에는 다수의 파일이나 폴더가 많이 들어 있다. 이것은 Angular CLI가 기본적으로 npm을 이용하여 패키지를 설치하고 있기에, Node.js 관련 패키지가 다수 포함되어 있는 것이다.

응용 프로그램에서 파일들은 대부분이 JSON 파일이다. 이 파일들은 각종 도구의 설정 정보를 기술한 것이으로, 직접 편집하는 일은 별로 없을 것이다. 폴더들에 대한 기본적인 역할은 아래와 같다.

  • .git 폴더 : Git 관련 파일이 들어 있다.
  • node_modules 폴더 : 노드 관련 모듈 관련 파일이 들어 있다.
  • e2e 폴더 –end-to-end 테스트 관련 파일이다.
  • src 폴더 - Web 페이지 관련 파일이 들어 있다.

src 폴더 내용

응용 프로그램에서 표시하는 Web 페이지 파일은 src 폴더에 정리되어 있다. 이 부분이 실질적으로 Angular 응용 프로그램의 중심 부분이라고 할 수 있다. 이 src 폴더에는 다음과 같은 파일이 준비되어 있다.

  • app 폴더 : Angular 구성 요소들 들어 있다.
  • favicon.ico : 아이콘 파일이다.
  • index.html : 이 파일은 디폴트로 표시되는 Web 페이지이다.
  • main.ts : 시작할 시에 실행되는 스크립트이다.
  • tsconfig.json : TypeScript의 설정 파일이다.
  • typings.d.ts : Typings는 TypeScript 정의 관리자의 설정 파일이다.

여기서 ts 확장자의 파일이 보일 것이다. 이는 TypeScript 스크립트 파일이다. Angular는 JavaScript뿐만 아니라 TypeScript도 사용할 수 있다. Angular CLI에서 생성된 프로젝트는 기본적으로 TypeScript를 사용하게 되어 있다.

app 폴더 및 컴포넌트

src 폴더 안에는 “app 폴더가 있다. 이것이 Angular의 중심 부분이다.

이것은 Angular의 컴포넌트에 관한 파일들이 있다. 이 컴포넌트라는 것을 만드는 것이 Angular의 기본이다.

컴포넌트란, 화면 표시 및 내부 처리 등을 패키지하여 어디서나 사용할 수 있도록 한 것이다. 이것은 HTML 파일, 스크립트 파일, 스타일 시트 파일 등의 조합으로 구성된다. 이 컴포넌트는 HTML의 사용자 정의 태그를 사용하여 HTML에 작성하여 사용할 수 있다.

예를 들어, “my-component"라는 컴포넌트를 만들면, HTML에 <my-component>라는 태그를 쓰는 것만으로 컴포넌트에 의해 표시 및 동작 등을 하게 된다는 것이다.

기본적으로 다음과 같은 파일이 폴더에 포함되어 있다.

  • index.ts : 컴포넌트 관련하여 기본적으로 로드되는 스크립트이다. 컴포넌트 전반에서 로드되는 라이브러리 등을 여기에 작성되어 있다.
  • environment.ts :개발중이거나 정식 배포 등의 상황에 따른 처리을 기술한 것이다.
  • app.component.html : 샘플 구성 요소의 HTML 템플릿이다.
  • app.component.ts : 샘플 구성 요소의 처리를 포함하는 스크립트이다.
  • app.component.css : 샘플 구성 요소에서 사용하는 스타일 시트이다.
  • app.component.spec.ts : 샘플 컴포넌트의 테스트 스크립트이다.

index.ts과 environment.ts는 컴포넌트 전체에 관한 것으로, 우선은 편집할 수 없다. 여기에서 염두에 두고 싶은 샘플에 포함되어있는 구성 요소 파일이다. “app.component"라는 파일이 3개 준비되어 있는데,이 3가지가 세트로 되어 컴포넌트를 구축하고 있다. (app.component.spec.ts는 테스트 용이므로 컴포넌트 본체에는 포함되지 않는다고 생각해도 된다)

컨포넌트는 이 같이 HTML, 스크립트, 스타일시트에 같은 이름의 파일을 작성하여 만든다. 이 파일들을 만든 것이 컴포넌트를 만든다는 것이며, Angular 프로그래밍의 가장 기본이되는 것이다.

우선, 프로젝트 전체의 구성이 대체로 알게 되었고, 다음에서 컴포넌트 작성에 대해 설명하겠다.




최종 수정 : 2017-12-27