Tour of Heroes - 예제 소개 및 프로젝트 생성

소스코드

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

git clone https://github.com/a-mean-blogger/tour-of-heroes.git
cd tour-of-heroes
git reset --hard 1166f77
npm install
atom .

- Github에서 소스코드 보기: https://github.com/a-mean-blogger/tour-of-heroes/tree/1166f77532dfe069e32eaa276d06329106d2e7fc


/* 
 * Tour of Heroes 강의를 진행하기 전에 반드시 
 * Angular 설치 및 Angular-CLI로 프로젝트 실행 방법 강의를 읽어주세요.
 * 위 강의에서 설명했던 내용은 Tour of Heroes 강의에서 다시 설명하지 않습니다.
 */
/* 
 * 제 강의를 처음 보시는 분들은 MEAN Stack 강의 소개 및 이용법을 읽어주세요.
 */

Tour of Heroes는 Angular 공식 사이트(https://angular.io)의 입문자용 tutorial(https://angular.io/tutorial)입니다. 이 튜토리얼 자체는 쉽고 상세하게 설명되어 있지만 영어로 작성되어 있기 때문에 여기서 어려움을 겪는 분들을 위해 강의를 만들었습니다.

Tour of Heroes라는 튜토리얼 제목은 '영웅 둘러보기'정도로 해석할 수 있습니다. 여기서 hero(영웅)는 특별한 것이 아니라 단순히 id와 name 항목만 가지고 있는 object이며, 이 hero에 대한 CRUD 기능을 추가하고 route를 설정하는 것이 전부인 아주 기본적인 튜토리얼입니다.

이 튜토리얼의 가장 큰 장점은, 아무 프로그램 없이도 Angular 코드를 웹브라우저만으로 시뮬레이션할 수 있다는 것입니다. https://stackblitz.com/angular/ybbdbroqogm 를 열어봅시다. 이 페이지는 Angular 튜토리얼에서 'live example'로 제공하는 페이지인데요, 매 튜토리얼마다 해당 'live example'이 제공됩니다.

크게 좌측, 중앙, 우측 패널로 나누어지는데요, 좌측 패널에는 파일 트리를 보여주고, 중앙 패널에는 선택된 파일의 코드를, 우측 패널에는 웹사이트를 실시간으로 보여줍니다. 파일트리에서 파일을 선택하고, 코드를 변경하면 우측 패널에서 바로 적용이 됩니다. 코드가 어떻게 작동하는지 이것저것 건들여 보기에 참 좋습니다. 페이지를 새로고침하면 모든 코드가 다시 처음의 상태로 돌아갑니다.

현재 화면의 우측에 보이는 사이트가 이 튜토리얼을 완전히 끝냈을 때 완성된 웹사이트인데요, 가장 윗부분에 웹사이트 이름인 'Tour of Heroes'가 표시되고, 그 아래 Dashboard, Heroes의 메뉴 버튼들이 있습니다. 위에서 보이는 페이지는 Dashboard 페이지로, 4명의 영웅의 이름이 보이고 Hero Search 부분에서 hero를 검색할 수도 있습니다. Message는 heroes 데이터에 대한 CRUD가 있을 때마다 어떠한 CRUD를 했는지 표시해 줍니다.

Heroes 메뉴 버튼을 누르면 전체 hero들의 list가 나옵니다. Heroes 페이지에서 hero를 추가하거나 삭제할 수 있고, 리스트에서 hero 이름을 누르면 hero를 수정할 수 있습니다. 우리가 만들 사이트이니 직접 조작해 보고 살펴보도록 합시다.

위 사이트는 코드의 이해를 돕기 위해서만 사용하시고, 코드를 직접 작성하지 않으면 '내 것'이 되지 않습니다. Tour of Heroes 강의를 통해 위 사이트를 직접 만들어 봅시다.

이번 강의에서는 https://angular.io/tutorial/toh-pt0 의 튜토리얼 내용까지의 사이트를 만들어 봅니다. ng new로 Angular 프로젝트를 생성하고, 기본 app.component의 코드를 지우고, global css를 추가하는 것이 다입니다. https://stackblitz.com/angular/dnnxmayvrkpv 에서 이번 강의의 live example을 볼 수 있습니다.

Tour of Heroes 강의에서는 위와 같이 Angular 튜토리얼과 live example 링크를 첨부하도록 하겠습니다.

프로젝트 생성

먼저 Angular 프로젝트를 생성합니다.

$ ng new tour-of-heores

프로젝트 폴더로 이동합니다.

$ cd tour-of-heores

Atom 텍스트 에디터로 프로젝트 파일을 엽니다.

$ atom .

폴더 구조

제 강의에서 폴더 구조 항목은 강의의 코드가 적용된 이후의 파일들을 나타냅니다. 이 '폴더 구조' 항목에 대한 설명은 MEAN Stack 강의 소개 및 이용법에서 읽어주세요. 위 그림은 ng new 명령어로 프로젝트가 생성 된 후 수정된 파일들만 주황색으로 표시하고 있습니다.

코드 - App Component

하나의 component는 class 코드가 작성되어 있는 .ts 파일, view 코드가 작성되어 있는 .html파일, css 코드가 작성되어 있는 .css파일로 구성되어 있습니다. 각각의 파일을 살펴봅시다.

// 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 = 'Tour of Heroes'; // 1
}

1. title을 'Tour of Heroes'로 바꿔줍니다.

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

<h1>{{title}}</h1>

기존의 모든 코드를 지우고 title을 출력하는 코드만 남겨줍니다.

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

h1 {
  font-size: 1.2em;
  margin-bottom: 0;
}
h2 {
  font-size: 2em;
  margin-top: 0;
  padding-top: 0;
}
nav a {
  padding: 5px 10px;
  text-decoration: none;
  margin-top: 10px;
  display: inline-block;
  background-color: #eee;
  border-radius: 4px;
}
nav a:visited, a:link {
  color: #334953;
}
nav a:hover {
  color: #039be5;
  background-color: #cfd8dc;
}
nav a.active {
  color: #039be5;
}

** https://angular.io/tutorial/toh-pt0 에는 css 파일에 코드가 없고, 이 후의 강좌에서 css 코드가 추가됩니다. 하지만 제 강의에서는 css 코드로 집중이 흐려지는 것을 막기 위해 css 파일은 생성되는 즉시 최종 css 코드를 삽입하도록 하겠습니다. 또한 제 강의에서 css 코드에 대한 설명은 생략합니다.

코드 - style.css

/* src/styles.css */

/* Global Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[text], button {
  color: #333;
  font-family: Cambria, Georgia;
}
a {
  cursor: pointer;
  cursor: hand;
}
button {
  font-family: Arial;
  background-color: #eee;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  cursor: hand;
}
button:hover {
  background-color: #cfd8dc;
}
button:disabled {
  background-color: #eee;
  color: #aaa;
  cursor: auto;
}

/* Navigation link styles */
nav a {
  padding: 5px 10px;
  text-decoration: none;
  margin-right: 10px;
  margin-top: 10px;
  display: inline-block;
  background-color: #eee;
  border-radius: 4px;
}
nav a:visited, a:link {
  color: #607D8B;
}
nav a:hover {
  color: #039be5;
  background-color: #CFD8DC;
}
nav a.active {
  color: #039be5;
}

/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}

실행 결과

Heroes component의 title 항목이 정상적으로 출력되고 있습니다. style.css를 통해 css도 적용이 되었습니다.

마치며..

이번 강의의 코드에서는 사실 새롭게 배우는 부분이 없습니다. ng new, import, export, @NgModule, @Component, {{ }} 등등 모두 Angular 설치 및 Angular-CLI로 프로젝트 실행 방법 강의에서 설명되어 있으므로 반드시 해당 강의를 읽어주세요.

댓글

댓글쓰기

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

UP