프로젝트 생성, route 만들기

작성자: Ian H
Date: 2017/09/12

소스코드

이 게시물에는 코드작성이 포함되어 있습니다. 소스코드를 받으신 후 진행해 주세요. MEAN Stack/개발 환경 구축에서 설명된 프로그램들(git, npm, atom editor)이 있어야 아래의 명령어들을 실행할 수 있습니다.

git clone https://github.com/a-mean-blogger/angular-site.git
cd angular-site
git reset --hard eecdaa6
npm install
atom .

- Github에서 소스코드 보기: https://github.com/a-mean-blogger/angular-site/tree/eecdaa68d55650d51974170704acd26257a66ed2

Front-end 개발자로서 REST API가 주어진 환경에서 기본적인 Angular / Bootstrap 사이트를 제작해 봅시다. 즉 이 강의시리즈에서는 이전에 제작한 REST API(Node JS API/JWT(JSON Web Token)로 로그인 REST API 만들기에서 만들었던 로그인 및 user 생성 API) 를 back-end로 사용하여 Angular 사이트 개발에만 초점을 두겠습니다.

최종 완성된 Angular 기본 사이트는, 

  1. 존재하는 REST API를 사용하여 user의 CRUD를 구현합니다.
  2. 존재하는 REST API를 사용하여 user의 username과 password를 입력하여 로그인이 가능합니다.
  3. user 조회는 로그인한 user만 가능합니다.
  4. user 수정및 삭제은 로그인된 user 본인만 가능합니다.

이 강의는 아주 기본적인 Angular 사용법을 이해하는 분들을 대상으로 합니다. Angular 2/Tour of Heroes 를 공부하신 후에 이 포스트를 진행하시기 바랍니다.

프로젝트 생성

아래 명령어를 입력해서 Angular-CLI 프로젝트를 생성합니다.

$ ng new angular-site

Installing packages for tooling via npm이라는 메세지와 함께 package를 설치하는데 이 때 몇 분 정도 걸립니다. 오류가 아니니 기다려 주세요.

폴더 구조


ng new를 입력해서 프로젝트를 생성하게되면 프로젝트에 git 저장소와 최초 git commit이 자동으로 생성됩니다. 위 그림은 최초 commit과 비교해서 생성되거나 변경 된 파일들을 보여줍니다.

주황색은 변경된 파일, 녹색은 새로 생성된 파일, 회색은 변화가 없는 파일입니다.

Assets 추가

Angular 사이트에서 사용될 static 파일들은 프로젝트_폴더/src/app/assets에 넣으면 됩니다. bootstrap을 사용하기 위해 https://getbootstrap.com/docs/3.3/getting-started 에서 bootstrap 3.7.7을 다운 받아 압축을 푼 후 해당 폴더에 추가합니다.
bootstrap은 jQuery를 필요로 하므로 https://jquery.com/download 에서 jQuery도 다운 받아서 해당 폴더에 추가합니다.
위 폴더 구조 그림에서 보이는 것 처럼 맞춰 주시면 됩니다.

Components 추가

Angular-CLI의 명령어를 사용하면 Angular 프로젝트에 component를 간단하게 추가할 수 있습니다. 아래를 입력해서 welcome component를 프로젝트에 추가해 줍시다.

$ ng g component welcome

ng g component 컴포넌트_이름명령어는 src/app에 컴포넌트_이름 폴더를 생성하고, html, ts, css파일을 생성합니다. 또한 app.module.ts를 수정하여 해당 component를 등록합니다. 다른 Angular-CLI 명령어들은 공식 문서(https://github.com/angular/angular-cli/wiki)에서 공부합시다.

그 외 파일 추가/삭제

app-routing.module.ts는 그냥 추가해 줍니다.
ng new나 ng g component 명령어로 생성되는 .spec.ts 파일들은 테스트 개발을 위한 파일들인데, 이 프로젝트에서는 테스트를 개발하지 않으므로 삭제하였습니다. 귀찮으시면 그냥 둬도 괜찮습니다.

파일 및 폴더 구조를 그림과 같이 만들었다면 다음으로 넘어가시기 바랍니다.

코드

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularSite</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <!-- jQuery -->
  <script src="/assets/jquery-3.2.1.min.js"></script>

  <!-- Bootstrap  -->
  <link rel="stylesheet" href="/assets/bootstrap-3.3.7/css/bootstrap.min.css">
  <script src="/assets/bootstrap-3.3.7/js/bootstrap.min.js"></script>
  
</head>
<body>
  <app-root></app-root>
</body>
</html>

jQuery와 Bootstrap은 index.html에서 설정해 주어야 합니다. <app-root></app-root> 부분이 실제 angular app이 표시될 부분입니다.

/* src/style.css */

body {
  color: #0C2E2B;
}
a {
  cursor: pointer;
}
.page {
  margin: 0 auto;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
}

src/style.css는 사이트 전체에 적용될(global) css를 기록하는 곳입니다. 개별 component에 적용될 css는 여기에 적지 않습니다.

welcome.component.ts는 ng g component로 생성된 코드를 그대로 두고, welcome.component.ts, welcome.component.css를 살펴봅시다.

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

<div class="page">
 <div class="jumbotron">
   <h1>Angular/Bootstrap 기본 사이트</h1>
   <p>이 사이트는 <a href="http://www.a-mean-blog.com/ko/blog/Angular-2/기본사이트-만들기" target="_blank">http://www.a-mean-blog.com/ko/blog/Angular-2/기본사이트-만들기</a>에서 작성되었습니다!</p>
 </div>
</div>

딱히 설명할 것이 없는 static한 page입니다. jumbotron class는 bootstrap css에 정의되어 있습니다.

/* src/app/welcome.component.css */

h1{
  color: darkseagreen;
}

Angular에서 component css들은 해당 component에만 영향을 줍니다. 위 처럼 h1의 색깔을 정의하면 다른 component의 h1에는 영향을 주지 않습니다. css를 굉장히 깔끔하게 만들수 있습니다!

다음으로 app component를 살펴봅시다.

// 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 {
  
}

ng new로 생성된 기본 app.component.ts에는 원래 title 이라는 항목이 있는데, 불필요하므로 지웠습니다.

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

<div class="container-fluid">
  <div class="row">
    <nav class="navbar navbar-default navbar-custom">
      <div class="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a [routerLink]="['/']" class="navbar-brand">Angular App</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li [routerLinkActive]="['active']">
              <a [routerLink]="['/','users']">Users</a>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li [routerLinkActive]="['active']">
              <a [routerLink]="['/','login']">Login</a>
            </li>
            <li [routerLinkActive]="['active']">
              <a [routerLink]="['/','users','new']">Sign Up</a>
            </li>
            <li>
              <a>Logout</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

app.component.html에도 Angular-CLI의 기본 코드가 있지만, 지워버리고 위 bootstrap navbar코드를 입력합니다. 위 코드는 https://getbootstrap.com/docs/3.3/components/#navbar 에서 가져온 기본 navbar 코드를 수정해서 만든 것입니다.

Angular 관련 코드는 다음과 같습니다.

  • [routerLink]: angular template에서 route를 변경하는 코드입니다. 예로 [routerLink]="['/','users']"와 같이 작성하면 해당 DOM을 클릭하면 /user 로 이동합니다. 
  • [routerLinkActive]: 해당 DOM이나 하위 DOM에 [routerLink]가 있고, 현재 경로가 [routerLink]의 경로를 가진 경우 css class를 추가합니다. 예로 [routerLinkActive]="['active']"와 같이 작성하면 active가 css class에 추가됩니다.
  • <router-outlet></router-outlet>: 이 부분에 app-routing.module.ts 에 설정된 component가 표시됩니다.

현재 app-routing.module.ts 에서 설정된 route은 "/" 밖에 없지만 나중에 만들 /user, /user/new, /login등의 메뉴도 미리 넣었습니다.

마지막으로 route 관련 코드를 살펴봅시다.

// src/app/app-routing.module.ts

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { WelcomeComponent } from './welcome/welcome.component';

const routes: Routes = [
  { path: '',  component: WelcomeComponent },
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

현재 route은 "/" -> welcome밖에 없습니다. (angular에서 path에는 마지막 '/'를 넣지 않습니다.)

// src/app/app.module.ts

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

import { AppRoutingModule }    from './app-routing.module';

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

@NgModule({
  declarations: [
    AppComponent,
    WelcomeComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

 AppRoutingModule을 app.module.ts에 넣어줍니다. 모든 코드 작성이 끝났습니다.

실행 결과

Angular-CLI 명령어 사용해서 서버를 실행합시다. 

ng serve --open


현재 route이 설정되지 않아서 메뉴들을 눌러도 아무런 일도 일어나지 않습니다.


bootstrap 덕택에 창의 width를 줄이면 navbar가 자동으로 모바일 용으로 변경됩니다.

마치며..

현재 사이트에서 http://localhost:4200/test 같은 없는 route을 입력하면 "/"로 자동으로 redirect가 되는데요, 다음 강의에서는 404 에러페이지를 만드는 법에 대해 알아보겠습니다.

댓글

댓글쓰기

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