Angular 설치 및 Angular-CLI로 프로젝트 실행 방법

Angular

Angular(앵귤러)는 구글에서 개발한 single page application(SPA)를 만들기 위한 front end framework입니다. 처음에는 Angular JS라는 이름으로 발표되었다가 버전2가 나올 즈음에 Angular JS 2가 아니라 그냥 Angular로 새로 발표가 되었습니다.

Angular는 Angular JS의 후속버전이지만 완전히 다른 framework로, 코드가 서로 호환이 되지 않습니다. 또 이름에서도 알 수 있듯이(Angular JS였다가 JS가 빠졌죠) Angular는 더이상 JavaScript 만의 framework가 아닙니다. JavaScript, TypeScript, Dart 등의 언어로 코딩할 수 있습니다. 보통 JavaScript가 아닌 TypeScript로 코드를 작성을 하며 인터넷의 관련 정보들도 대부분 TypeScript으로 되어 있습니다. 물론 저도 TypeScript를 기준으로 강의를 진행합니다. TypeScript는 JavaScript를 확장한 것으로 모든 JavaScript 코드는 TypeScirpt에서 100 호환이 되므로, JavaScript를 알고 있다면 익히는 것이 크게 어렵지 않습니다.

** 참고로 제 블로그의 Angular 강의들은 MVC 방식 웹사이트 제작의 기본을 알고 있지만 Angular를 한번도 접해 본 적 없는 사람을 대상으로 작성했습니다.

Angular 개발 환경 구축

Angular로 웹 어플리케이션을 개발하기 위해서 다음의 프로그램들을 설치합시다.

Node.js & NPM

https://nodejs.org 에서 다운받을 수 있습니다. 

개발이 완성된 Angular 사이트는 Node.js 없이 작동하지만, 사이트 개발을 위해서는 Node.js가 필요합니다. NPM은 Node.js를 설치하면 함께 설치됩니다. Angular CLI 는 Node.js 4.9 버전 이상이 요구되기 때문에 예전에 Node.js를 설치하셨던 분들은 Node.js를 다시 설치해야 할 수도 있습니다. terminal(window: cmd, git-bash등, mac: terminal, bash 등)에서 node -v를 입력하시면 현재 Node.js 버전을 알 수 있습니다.

Angular-CLI(Command Line Interface)

Angular-CLI는 Angular 사이트 개발에 유용한 기능을 terminal에서 사용할 수 있게 해줍니다. ng로 시작하는 명령어들이 Angular-CLI를 사용한 명령어들입니다.

Node.js/NPM을 설치한 후 terminal을 열고 아래의 명령어를 입력하여 설치합니다.

$ npm install -g @angular/cli

-g는 global을 의미하며 단순히 프로젝트 내에서 code library로써 사용되는 것이 아니라 독자적인 프로그램으로 사용되는 경우 사용됩니다.

Angular 프로젝트 생성 및 실행

아래 명령어를 입력하여 새 Angular 프로젝트를 생성합니다.

$ ng new my-project

ng new 프로젝트_이름 명령어는 현재 위치에 프로젝트_이름 (알파벳과 '-'만 사용가능)에 입력한 이름으로 폴더를 생성하고 기본 사이트를 설치합니다.

위 명령어를 실행하면 사용하는 기본 세팅을 위해 질문들이 나오는데, 그냥 엔터를 입력하여 기본값을 입력해 줍니다.프로젝트 파일이 생성되고 Node.js package들을 모두 설치하는데, 몇 분 정도 terminal 화면이 멈출 수도 있습니다. 컴퓨터 사양에 따라 10분 혹은 그 이상 충분히 기다립니다.

설치가 완료되면 생성된프로젝트 폴더로 이동합니다.

$ cd my-project

사이트를 실행합니다.

$ ng serve --open

ng serve명령어는 개발환경모드로 Angular 사이트를 실행시키는 명령어입니다. 당연히 Angular 프로젝트 안에서만 사용가능합니다. --open은 서버를 실행하고 컴퓨터의 기본 브라우저로 웹사이트를 바로 열어주는 옵션입니다.

Compiled successfully라는 메세지가 보이면 정상적으로 서버가 실행이 된 것이고 --open옵션을 사용하였다면 자동으로 browser가 실행되며 아래와 같은 화면이 보이게 됩니다.

화면 위쪽에 'my-project app is running'이라는 문구가 보입니다. 이때 'my-project'는 ng new 명령어에서 사용한 프로젝트 이름으로, 다른값을 입력하면 이 부분이 바뀌게 됩니다.

Angular-CLI 기본 사이트 살펴보기

my-project 폴더내에는 아래와 같은 파일들이 생성되었습니다.

모든 파일들의 용도를 지금 다 알 필요는 없고 중요한 몇가지 파일 및 폴더만 알아봅시다.

  • pakcage.json: pakcage.json 파일이 있는 것으로 node.js프로젝트임을 알 수 있습니다. 반면에 js파일들은 전혀 보이지 않는데, ng serve 명령어를 통해 ts 파일 js파일로 해석되고, 이 파일들로 node 서버를 실행하게 됩니다.
  • angular.json: angular.json 파일이 있는 것으로 Angular CLI프로젝트임을 알 수 있습니다. 이 파일안에는 Angular 관련 설정들이 들어갑니다.
  • src/index.html: 사이트 접속시 처음으로 로딩이 되는 html파일입니다.
  • src/style.css: global css style이 저장되는 곳입니다. angular는 기본적으로 모든 view 코드들이 자신의 css를 가지게 되며 한 view의 css 코드는 다른 view에 영향을 주지 않게 되어 있습니다.
  • src/favicon.ico: favicon icon 파일입니다. 이 파일을 바꾸면 브라우저의 favicon 모양이 바뀌게 됩니다.
  • src/assets: 외부에서 직접 접근이 가능한 폴더입니다. 즉, static 파일들이 저장되는 곳입니다.예를 들어, src/assets/js/jquery.js를 두게 되면 '웹사이트_주소/assets/js/jquery.js'로 바로 접근이 가능하게 됩니다. 그림파일, 외부 library를 저장하는 용도로 사용됩니다.
  • src/app: 이 폴더와 하위 폴더에서 실제 angular의 코딩이 이루어지게 됩니다.
  • src/environments: enviroment.prod.ts와 environment.ts의 파일이 있는데, ng serve명령어로 앱이 실행되는 경우(개발용 테스트)에는 enviroment.ts의 값을 읽어오고, ng build명령어로 앱을 정식으로 빌드하는 경우에는 environment.prod.ts의 값을 읽어옵니다.
  • e2e 폴더와 .spec.ts 파일들: automated test를 위해 사용됩니다. 이게 뭔지 모르시면 그냥 넘어가도 좋습니다. 웹사이트를 개발하는데 직접적인 관련이 있는 부분이 아니므로 제 강의에서는 다루지 않습니다.

기본 코드

src/app 폴더에 있는 파일들을 좀 더 자세히 살펴봅시다. ts파일들은 typeScript로 코드가 작성되어 있습니다. typeScript를 처음 접하시는 분들은 생소하게 느껴질 수도 있는데, typeScript는 자바스크립트의 확장입니다. 자바스크립트의 모든 문법이 그대로 적용되지만, 거기에 class를 import/export한다든가, class에 decoration을 단다든가, 변수에 type을 주는 등의 변화가 있습니다. 이 모든 것들은 추가사항이므로 기본적으로 자바스크립트 코드를 그대로 가져오면 에러없이 실행할 수 있습니다.

// src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.module.ts는 다른 Angular module들을 관리하는 파일입니다. 대부분의 ts파일들은 새로 생성이 되면 이 파일에 등록이 되어야 사용할 수 있습니다.

import { class_이름 } from 파일위치는 다른 파일에 있는 class를 불러오는 코드입니다. NPM package로 설치된 파일(위 코드에서 '@angular/platform-browser'과 '@angular/core')은 package 이름을 파일위치에 바로입력하고(이는 package이름이 /node_modules의 폴더이름과 일치하기 때문입니다), 프로젝트 내의 파일은 현재 파일 위치에서 의 상대위치(위 코드에서 './app.component')를 파일위치에 입력하여 class를 import할 수 있습니다.

위 코드에서는 @angular/platform-browser package에서 BrowerModule class를, @angular/core package에서 NgModule class를, 마지막으로 './'위치의 (현재파일과 같은 폴더에 존재하는) app.component파일에서 AppComponent class를 import하고 있습니다.

마지막 줄에서 AppModule class를 정의하고 있으며, export를 붙여 다른파일에서 AppModule class를 import로 불러올 수 있습니다. class 안은 { } 로 비어 있습니다. 코드가 없는 빈 class가 무슨 일을 할 수 있을까 의문이 들기도 하는데, 이 class는 코드대신에 @NgModule( ... )이 붙어있습니다.

@NgModule(...) 부분은 독립된 코드가 아니라 AppModule class에 붙어있는 Class Decorator입니다. decorator들은 @decorator_이름(오브젝트)의 형태로 되어 있고 decorator들도 class이기때문에 import를 해야 사용할 수 있습니다. NgModule class가 import되어 있고, 이 class는 decorator이기 때문에 @를 붙여서 사용합니다.

Class decorator들은 해당 class에 역할을 부여하게 되는데, 예를들어 NgModule class가 필요한 위치에 NgModule decorator가 없는 class를 넣게 되면 오류를 내게 됩니다. Decorator에 들어가는 오브젝트에 각종 값들이 설정이 되고, 그렇기 때문에 AppModule은 비어있는 class지만 이 설정값들로 의미를 가지게 됩니다.

다음으로 app.module.ts에 import되어 있는 app.component.ts파일을 봅시다.

// src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-project';
}

@angular/core package에서 Component class를 import하였고 AppComponent class는 Component decorator가 사용되었음을 알 수 있습니다.

Component는 Angular사이트에서 view와 해당 view에서 사용될 코드, html, style을 담고 있습니다. Angular에서 src/index.html을 제외한 모든 view코드들은 component에 담기게 됩니다. index.html에서 AppComponent를 호출하고 나머지 component들은 AppComponent, 혹은 다른 하위 component들의 html에서 호출이 되는 구조입니다.

Component decorator에 설정되어 있는 값들을 살펴봅시다.

  • Selector: html 코드에서 이 값을 이용해서 해당 component를 사용하게 됩니다.
  • TemplateUrl: component에서 사용하게 될 html 파일의 위치입니다. 하나의 component에는 하나의 template만 사용가능합니다.
  • StyleUrls: template에서 사용하게 될 css파일들의 위치입니다. 하나의 component에서 여러 파일을 사용가능하기 때문에 배열로 작성합니다.

AppComponent class에는 title이라는 항목이 있고, 이 항목은 'my-project'라는 값으로 초기화되었습니다. 'my-proejct'는 ng new 명령어에서 사용한 프로젝트 이름이죠. 이 부분의 값을 'test'로 바꾸고 파일을 저장해 봅시다! 자동으로 웹사이트가 새로고침되면서 이전에 my-project로 표시되던 부분의 값이 바뀝니다.

이처럼 ng serve로 실행되는 사이트는 소스코드가 변경되면 자동으로 사이트가 새로고침되는 기능이 있습니다.

다음은 app.component의 template인 app.component.html입니다. 위 화면을 구성하는 코드들이 쭉 작성되어 있습니다. 이 부분들은 설명할 필요가 없고, 중요한 부분은 바로 이 부분입니다.

<!-- src/app/app.component.html -->

    ...

    <span>{{ title }} app is running!</span>

    ...

{{ expression }}은 해당 expression을 text로 나타내게 됩니다. Node JS 첫걸음강의를 보신분들은 EJS의 <%= expression %>를 기억하실 텐데, 동일한 역할을 합니다. title은 expression이 아니므로, 해당 template을 가지고 있는 component class 즉 AppComponent class에 해당 항목이 존재하는지 살피고 그 항목의 값을 text로 나타내게 됩니다. 1+1을 넣는다면 2가 나올 것이고, "Hello World!"를 넣게 되면 해당 값이 나오게 됩니다. component에 있는 함수를 호출할 수 도 있으며 해당 return값이 표시되게 됩니다.

<!-- src/index.html -->

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyProject</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

마지막으로 index.html을 살펴보면 body에 <app-root></app-root>가 있는데, 'app-root'는 AppComponent class의 component decorator의 selector에서 사용된 문구입니다. 이처럼 component class의 selector를 이용해서 해당 component를 html파일에서 불러올 수 있습니다.

마치며..

Angular의 개발을 위해 관련 프로그램 설치와 Angular-CLI를 이용하여 기본 프로젝트를 생성하는 방법을 알아보았습니다. typeScript가 사용되어서 새로운 개념들과 문법들이 많이 나왔죠. decorator, component class, module class... 앞으로도 계속 나오는 내용들이니까 빨리 익숙해 지도록 합시다.

댓글

u
utoru80 2020.07.31
node.js 로 구현하는것으로 충분해보이는데 앵귤러 쓰면 어느점이 편리하고 좋아지나요??
I
Ian H 2020.08.03
@utoru80,
SPA(https://www.a-mean-blog.com/ko/blog/토막글/_/SPA-Single-Page-Application ) 이므로 데이터 전송량이 줄고, 사이트 속도가 빨라집니다. 사이트가 이용자 웹브라우저에 저장되기도 합니다. 즉 서버의 트레픽 부담이 줄고, 이용자는 사이트를 더 빠르게 이용할 수 있습니다.  (react, vue 등등 SPA가 요즘 대세이기도 하죠)
그리고 모든 view들이 component로 제작되는데, 재사용성이 좋아서 복잡한 사이트를 만들 때 express보다 코드 정리하기가 편합니다. 
사실 Express는 Angular로 넘어오기 전에 node.js를 익히는 목적으로 강의를 넣은건데..  이후에 바빠져서 정작 Angular 강의는 많이 부실합니다 ㅠㅠ
u
utoru80 2020.08.03
@Ian H,
아 정말 쉽게 이해가 되네요. 감사합니다.  
I
Ian H 2020.08.04
@utoru80,
👍
댓글쓰기

이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기

UP