Angular/Tutorial

앵귤러 튜토리얼 - tour-of-heroes 만들기 (5)이어서, 오늘은 서비스에 대해서 알아보고자 한다.서비스가 필요한 이유는 무엇일까?현재 HeroesComponent는 가짜 데이터를 받아 표시하고 있다. 컴포넌트는 고의적으로 가짜 데이터를 표시하면 안되며, 데이터를 직접적으로 가져오거나 저장해서는 안된다.컴포넌트는 데이터를 표현하고, 액세스를 서비스에 위임하는데 집중해야한다.쉽게 말하면, 서비스는 여러 컴포넌트에서 필요로 하는 기능을 묶은 클래스다. 즉 앵귤러 사이트에서 사용되는 특정한 기능들을 서비스로 생성한 후, 해당 기능이 요구되는 컴포넌트는 이 서비스로 불러와서 사용할 수 있다.따라서, 코드가 중복되는 것을 막아주며 코드 관리의 편의성이 증가해 프로그램의 효율성을 높일 수 있는 장점이 있다..

앵귤러 튜토리얼 - tour-of-heroes 만들기 (4)이번 시간에는 세부 구성 요소를 꾸며보려고 한다.HeroDetailCompnent를 만들어보도록 하자ng generate component hero-detail app.module을 확인하면, 자동적으로 선언된 hero-detail 컴포넌트를 확인할 수 있다. (지난시간에 배운 부분)이제 hero-detail 컴포넌트에 세부사항을 옮길 것이다.기존의 heroes.component.html에서 세부사항에 해당했던 코드를 잘라내어 hero-detail.component.html으로 옮기자.이제 참조하는 형식이 변경되었기 때문에, 기존 코드의 selectedHero를 hero로 다시 모두 변경해주어야 한다. 따라서 html 템플릿 코드는 다음과 같다...

앵귤러 튜토리얼 - tour-of-heroes 만들기 (3)저번 시간에는 컴포넌트를 활용해 문자열 형태의 영웅 클래스를 만들어 출력하는 것까지 해보았다. 이제, 영웅의 수를 늘려볼 차례다. 영웅의 수가 늘어난다면 지금과 같은 형태로는 html에서 모두 나타낼 수가 없다. 이제 앵귤러의 중요한 기능 중 하나인 *ngFor를 이용해 볼 것이다.임의로 영웅들을 미리 만들어놓은 배열을 만들어보자.src/app에 ‘mock-heroes.ts’라는 이름으로 파일을 만든 후, 다음과 같이 코드를 작성해보자.import { Hero } from './hero'; export const HEROES: Hero[] = [ { id: 11, name: 'Mr. Nice' }, { id: 12, name: 'Narco' },..

앵귤러 튜토리얼 - tour-of-heroes 만들기 (2)이제 영웅 구성 요소들을 만들어보자ng g(generate) c(component) heroes CLI app에 heroes라는 새로운 폴더가 생성된 것을 확인할 수 있다.heroes.component.ts부터 살펴보자import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-heroes', templateUrl: './heroes.component.html', styleUrls: ['./heroes.component.css'] }) export class HeroesComponent implements OnInit { constructor() { } ngOnIni..

앵귤러 튜토리얼 - tour-of-heroes 만들기 (1)앵귤러 CLI install하기npm install -g @angular/cli 새로운 애플리케이션 만들기ng new angular-tour-of-heroes 해당 애플리케이션 접속cd angular-tour-of-heroes ng serve --open ng serve를 하면, http://localhost:4200/ 에서 내 브라우저를 보여준다.자신이 사용하는 코드 편집기(VScode 등)으로 만든 애플리케이션 폴더를 열고 src/app를 살펴보자.이 파일 중에 3가지로 분리되어 있는 AppComponent 쉘이 구현되어 있는 것을 찾을 수 있다.app.component.ts : 타입스크립트로 작성된 구성 요소 클래스 코드app.compone..