음악신청 게시판 만들기

개요

Angular 의 기본 기능을 활용하여 음악을 신청하는 게시판의 기능을 작성해보도록 하겠습니다. 본 내용은 다음의 Angular Tutorial 을 기반으로 작성되었습니다.

• Angular - Tour of Hero The Application Shell
• Angular - Tour of Hero The Hero Editor
• Angular - Tour of Hero Display a Heroes List

프로젝트 생성

$ ng new music-vote

우선 Angular Cli 의 ng new 명령어를 사용하여 어플리케이션의 토대를 만들도록 합니다. music-vote 는 이번 내용에서 만들고자 하는 어플리케이션의 이름입니다.

이후, Angular Material 을 설치하여 어플리케이션 전체의 색상 및 모양을 꾸며줄 수 있도록 합니다.

본 과정의 상세한 내용은 이전에 작성되었던 다음의 글을 참고하도록 합니다.

• Angular 개발환경 설정하기
• Angular Material

어플리케이션 기능 정의

어플리케이션에 아래의 기능을 추가하도록 합니다.

• 새로운 추천음악을 제출할 폼을 추가합니다.
• 현재 추천된 음악의 목록을 저장합니다.
• 현재 추천된 음악의 목록을 표시합니다.

어플리케이션 기능 추가

어플리케이션의 메인 컴포넌트는 src/app/app.component.ts 파일입니다.

템플릿 파일(src/app/app.component.html)을 수정하여 새로운 추천음악을 제출할 수 있는 폼을 작성하도록 합니다. 여기서는 앞선 과정에서 추가한 Angular Material 패키지를 사용하여 화면을 구성해보도록 하겠습니다.

폼을 사용하기 위해서 MatFormFieldModule 과 MatInputModule 을 app.module.ts 모듈에 추가하도록 합니다.

▼ src/app/app.module.ts

...
import  {MatButtonModule, MatIconModule}  from  '@angular/material';
import  {MatFormFieldModule}  from  '@angular/material/form-field';	// ← 추가함
import  {MatInputModule}  from  '@angular/material/input';	// ← 추가함

import  { AppComponent }  from  './app.component';
...
 
@NgModule({
  imports:  [ BrowserModule, FormsModule, BrowserAnimationsModule, MatButtonModule, MatIconModule, 
  MatFormFieldModule,	// ← 추가함
  MatInputModule		// ← 추가함
  ],
  declarations:  [ AppComponent, HelloComponent ],
  bootstrap:  [ AppComponent ]
})
export  class AppModule {  }

▼ src/app/app.component.html

<mat-form-field>
  <input matInput placeholder="음악제목">
</mat-form-field>
<mat-form-field>
  <input matInput placeholder="가수">
</mat-form-field>
<button mat-raised-button color="primary" (click)="fnAddMusic()">등록하기</button>

완성된 폼의 모습은 다음과 같습니다.

▼ 신청곡 작성폼

새 추천곡 추가하기

앞서 작성한 폼은 Angular 의 이벤트 바인딩 기능((click)="fnAddMusic()") 을 적용하였기 때문에 버튼을 클릭하면 fnAddMusic 이라는 함수가 실행됩니다. 이 함수를 동일한 컴포넌트(app.component.ts)에 정의하도록 합니다.

▼ src/app/app.component.ts

import  { Component }  from  '@angular/core';
  
@Component({
  selector:  'my-app',
  templateUrl:  './app.component.html',
  styleUrls:  [  './app.component.css'  ]
})
export  class AppComponent {
  name =  'Angular';
  // ↓ 추가함
  fnAddMusic(title: HTMLInputElement, artist:HTMLInputElement):void  {
    console.log(`음악제목(=${title.value}), 가수(=${artist.value}) 를 추가합니다.`);
  }
}

▼ src/app/app.component.html

<mat-form-field>
  <input  matInput  placeholder="음악제목" #newTitle>  // ← 수정함
</mat-form-field>
<mat-form-field>
  <input  matInput  placeholder="가수" #newArtist>  // ← 수정함
</mat-form-field>
<button  mat-raised-button  color="primary" (click)="fnAddMusic(newTitle, newArtist)">등록하기</button>  // ← 수정함

위에서 정의한 함수 fnAddMusic 은 사용자가 입력한 값을 받아 이를 처리합니다.

이를 위하여 앞서 버튼에 연결하였던 함수가 입력인자를 받도록 수정((click)="fnAddMusic(newTitle, newArtist))합니다. 우선 사용자가 입력한 값을 템플릿 참조 변수(#newTitle, #newArtist) 에 각각 저장하고 이를 통해서 사용자의 입력을 받습니다.

입력란에 제목과 가수이름을 입력 후 버튼을 누릅니다. 개발자 콘솔을 통해 입력한 내용이 올바르게 fnAddMusic 함수까지 전달되어 콘솔화면에 출력는 것을 확인 할 수 있습니다.

추천곡 목록 표시하기

다음은 입력한 내용이 화면에 표시되도록 하겠습니다.

Music 클래스 만들기

우선, 음악의 목록을 저장할 수 있는 변수를 만들도록 하겠습니다. music.ts 파일을 생성한 후, Music 클래스를 작성합니다.

▼ /src/app/music.ts

export class Music {
  title: string;
  artist: string;
  votes: number;

  constructor(title: string, artist: string, votes?: number) {
    this.title = title;
    this.artist = artist;
    this.votes = votes || 0;
  }
}

Music 클래스는 우리가 만드는 어플리케이션에서 다루는 데이터를 저장하는 클래스로 음악의 제목(title), 가수(artist), 그리고 추천수(votes) 를 가지고 있습니다. 클래스를 new 키워드를 사용하여 새로 생성할 경우 입력인자로 제목과 가수를 받으며 추천수는 옵션(?) 으로 입력받아 입력값이 없을 경우 0 으로 초기화 하도록 합니다.

신청곡 목록 속성 및 초기값 작성

작성한 Music 클래스를 컴포넌트에서 사용할 수 있도록 import 한 후, 이를 requests 속성의 타입으로 정의합니다.

최초에는 화면에 표시할 내용(requests 속성의 값)이 없으므로 임의로 값을 초기화 하도록 합니다.

▼ /src/app/app.component.ts

import  { Component }  from  '@angular/core';
import  { Music }  from  './music';  

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

  requests: Music[];    // ← 추가

  constructor()  {
    this.requests =  [
      { title :  "가을 안부", artist :  "먼데이 키즈", votes :  10  },
      { title :  "죽겠다", artist :  "iKON", votes :  9  },
      { title :  "We Go Up", artist :  "NCT DREAM", votes :  8  },
      { title :  "A-TEEN", artist :  "세븐틴", votes :  7  },
    ]    // ← 추가
  }  
}

이렇게 정의한 변수의 내용을 화면에 표시하도록 합니다.

▼ src/app/app.component.html

... 생략 ...
<mat-list>
  <mat-list-item *ngFor="let request of requests">
    <h1  matLine><b>{{request.votes}}</b></h1>
    <p  matLine>
      <span>Title : {{request.title}}</span>
    </p>
  </mat-list-item>
</mat-list>

내용은 동일한 형식을 반복적으로 표시할 것이므로 Angular 의 *ngFor 반복 지시자를 사용하였습니다. 이 지시문은 request 배열을 반복하며 현재 배열의 요소를 돌려줍니다. 이를 템플릿 입력변수 (let request) 에 저장하여 사용합니다. 데이터의 화면 출력은 angular 의 템플릿 문법인 {{,}} (Interpolation) 를 사용합니다.

다음과 같이 임시로 정의한 데이터의 내용이 표시됩니다.

▼ 신청곡 목록 표시

다음으로 새로운 신청곡을 현재 표지중인 목록에 추가하는 기능을 구현해 보도록 하겠습니다. 이는 컴포넌트에서 앞서 작성하였던 fnAddMusic 함수를 Array 의 push 매서드를 사용하여 새로운 요소를 추가하도록 수정하면 됩니다.

▼ /src/app/app.component.ts

...
fnAddMusic(title: HTMLInputElement, artist: HTMLInputElement):void  {
console.log(`음악제목(=${title.value}), 가수(=${artist.value}) 를 추가합니다.`);
  this.requests.push(new Music(title.value, artist.value, 0));  // 추가함
}
...

추천기능

등록된 신청곡 목록에 대한 추천 및 추천 삭제 기능을 추가 하겠습니다. 화면에 사용자가 해당 기능을 사용할 수 있도록 버튼을 추가합니다.

▼ /src/app/app.component.html

...
<mat-list>
  <mat-list-item *ngFor="let request of requests">
    <h1  matLine><b>{{request.votes}}</b></h1>
    <p  matLine>
      <span>Title : {{request.title}}</span>
    </p>
    <button  mat-icon-button (click)="fnLike(request)">
      <mat-icon>thumb_up</mat-icon>
    </button>
    <button  mat-icon-button (click)="fnNoThanks(request)">
      <mat-icon>thumb_down</mat-icon>
    </button>
  </mat-list-item>
</mat-list>

각 버튼을 클릭하였을 때 발생하는 이벤트와 매서드를 연결하고 이를 구현하도록 합니다.

▼ /src/app/app.component.ts

...
fnLike(request: Music)  {
  request.votes +=  1;
}  

fnNoThanks(request: Music)  {
  request.votes -=  1;
}

각각 버튼이 한번씩 눌러질마다 votes 의 값을 1씩 늘리거나 줄이도록 하였습니다.

추천버튼이 추가된 리스트는 아래와 같습니다.

▼ 추천버튼을 추가한 신청곡목록

추천순으로 목록 정렬하기

추천버튼의 부가기능으로 음악 목록이 추천수 순으로 자동 정렬되도록 하겠습니다. 추천수 기준 정렬은 Javascript 의 sort() 매서드를 사용하도록 합니다.

  compare(a: Music, b: Music) {
    return b.votes - a.votes
  }
  sortArray(): Music[] {
    return this.requests.sort(this.compare);
  }

구현한 매서드를 사용하여 목록을 정렬하고 이를 화면에 출력하도록 합니다.

▼ /src/list/list.component.html

<mat-list>
  <mat-list-item *ngFor="let request of sortArray()">	// ← 수정됨
    <h1  matLine><b>{{request.votes}}</b></h1>
    <p  matLine>
      <span>Title : {{request.title}}</span>
    </p>
    <button  mat-icon-button (click)="fnLike(request)">
      <mat-icon>thumb_up</mat-icon>
    </button>
    <button  mat-icon-button (click)="fnNoThanks(request)">
      <mat-icon>thumb_down</mat-icon>
    </button>
  </mat-list-item>
</mat-list>

결론

지금까지 살펴본 과정을 통해 완성한 Angular 어플리케이션은 아래와 같습니다.

▼ 완성된 음악 신청 어플리케이션

사용자의 입력을 바탕으로 새로운 글을 넣고, 조회하며 추천 및 취소 등의 사용자의 의도에 따라서 데이터를 조작할 수 있도록 해보았습니다.

다만, 새로 추가한 신청곡을 비록한 사용자의 입력에 따른 결과는 하드디스크와 같은 저장장치에 저장되는 것이 아니기 때문에 접속시마다 조작하였던 데이터가 초기화 됩니다. 추후 과정에서는 이를 보완할 수 있도록 서버에 값을 저장하고, 이를 처리할 수 있도록 해보도록 하겠습니다.