이 게시물에는 코드작성이 포함되어 있습니다. 소스코드를 받으신 후 진행해 주세요. MEAN Stack/개발 환경 구축에서 설명된 프로그램들(git, npm, atom editor)이 있어야 아래의 명령어들을 실행할 수 있습니다.
- 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 기본 사이트는,
이 강의는 아주 기본적인 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과 비교해서 생성되거나 변경 된 파일들을 보여줍니다.
주황색은 변경된 파일, 녹색은 새로 생성된 파일, 회색은 변화가 없는 파일입니다.
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도 다운 받아서 해당 폴더에 추가합니다.
위 폴더 구조 그림에서 보이는 것 처럼 맞춰 주시면 됩니다.
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 관련 코드는 다음과 같습니다.
현재 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 계정으로 로그인하세요. 자세히 알아보기