인터페이스 만들기

이번 실습에서는 인터페이스를 만들고 앱의 컴포넌트에서 사용하는 방법을 알아봅니다.

학습 목표

• 앱에서 데이터 타입으로 사용할 인터페이스를 만듭니다.
• 새 인터페이스 타입에 맞는 예제 데이터를 앱에 추가합니다.

인터페이스 개념 살펴보기

인터페이스는 앱에서 사용하는 사용자 정의 데이터 타입입니다.

Angular는 TypeScript를 사용해 엄격한 타입 검사가 가능한 프로그래밍 환경의 장점을 활용합니다. 엄격한 타입 검사는 앱의 한 요소가 다른 요소에 잘못된 형식의 데이터를 전달할 가능성을 줄여줍니다. 이러한 타입 불일치 오류는 TypeScript 컴파일러에서 발견하며, 상당수는 IDE에서도 확인할 수 있습니다.

이번 실습에서는 주택 한 곳의 데이터를 나타내는 프로퍼티를 인터페이스로 정의합니다.

1. 새 Angular 인터페이스 만들기

   이 단계에서는 앱에 새 인터페이스를 만듭니다.

   IDE의 터미널 창에서 다음 작업을 수행하세요:

   1. 프로젝트 디렉터리에서 first-app 디렉터리로 이동하세요.

   2. first-app 디렉터리에서 다음 명령어로 새 인터페이스를 만드세요.

      ng generate interface housinglocation

   3. ng serve를 실행해 앱을 빌드하고 http://localhost:4200에서 실행하세요.

   4. 브라우저에서 http://localhost:4200을 열어 앱을 확인하세요.

   5. 앱이 오류 없이 빌드되는지 확인하세요. 오류가 있다면 수정한 후 다음 단계로 진행하세요.

2. 새 인터페이스에 프로퍼티 추가하기

   이 단계에서는 주택 정보를 표현하는 데 필요한 프로퍼티를 인터페이스에 추가합니다.

   1. IDE의 터미널 창에서 ng serve가 실행 중이 아니라면 실행해 앱을 빌드하고 http://localhost:4200에서 실행하세요.
   2. IDE의 편집 창에서 src/app/housinglocation.ts 파일을 여세요.
   3. housinglocation.ts의 기본 내용을 다음 코드로 바꿔 새 인터페이스를 예제와 같이 작성하세요.

   src/app/housinglocation.ts를 다음 코드로 수정하기

   export interface HousingLocationInfo {
     id: number;
     name: string;
     city: string;
     state: string;
     photo: string;
     availableUnits: number;
     wifi: boolean;
     laundry: boolean;
   }

   1. 변경 사항을 저장하고 앱에 오류가 없는지 확인하세요. 오류가 있다면 수정한 후 다음 단계로 진행하세요.

   이제 id, name, 위치 정보 등 주택 데이터를 표현하는 인터페이스가 정의되었습니다.

3. 앱에서 사용할 테스트 주택 만들기

   인터페이스를 만들었지만 아직 사용하지는 않았습니다.

   이 단계에서는 인터페이스 타입의 객체를 만들고 예제 데이터를 할당합니다. 아직은 이 예제 데이터가 앱에 표시되지 않습니다. 데이터를 표시하려면 몇 가지 실습을 더 진행해야 합니다.

   1. IDE의 터미널 창에서 ng serve가 실행 중이 아니라면 실행해 앱을 빌드하고 http://localhost:4200에서 실행하세요.
   2. IDE의 편집 창에서 src/app/home/home.ts를 여세요.
   3. Home에서 새 인터페이스를 사용할 수 있도록 src/app/home/home.ts의 기존 import 구문 다음에 다음 구문을 추가하세요.

   src/app/home/home.ts에서 인터페이스 불러오기

   import {Component} from '@angular/core';
   import {HousingLocation} from '../housing-location/housing-location';
   import {HousingLocationInfo} from '../housinglocation';
   
   @Component({
     selector: 'app-home',
     imports: [HousingLocation],
     template: `
       <section>
         <form>
           <input type="text" placeholder="Filter by city" />
           <button class="primary" type="button">Search</button>
         </form>
       </section>
       <section class="results">
         <app-housing-location />
       </section>
     `,
     styleUrls: ['./home.css'],
   })
   export class Home {
     readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common';
   
     housingLocation: HousingLocationInfo = {
       id: 9999,
       name: 'Test Home',
       city: 'Test city',
       state: 'ST',
       photo: `${this.baseUrl}/example-house.jpg`,
       availableUnits: 99,
       wifi: true,
       laundry: false,
     };
   }

   1. src/app/home/home.ts의 빈 export class Home {} 정의를 다음 코드로 바꿔 컴포넌트에 새 인터페이스 타입의 객체를 만드세요.

   src/app/home/home.ts에 예제 데이터 추가하기

   import {Component} from '@angular/core';
   import {HousingLocation} from '../housing-location/housing-location';
   import {HousingLocationInfo} from '../housinglocation';
   
   @Component({
     selector: 'app-home',
     imports: [HousingLocation],
     template: `
       <section>
         <form>
           <input type="text" placeholder="Filter by city" />
           <button class="primary" type="button">Search</button>
         </form>
       </section>
       <section class="results">
         <app-housing-location />
       </section>
     `,
     styleUrls: ['./home.css'],
   })
   export class Home {
     readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common';
   
     housingLocation: HousingLocationInfo = {
       id: 9999,
       name: 'Test Home',
       city: 'Test city',
       state: 'ST',
       photo: `${this.baseUrl}/example-house.jpg`,
       availableUnits: 99,
       wifi: true,
       laundry: false,
     };
   }

   1. home.ts 파일이 다음 예제와 일치하는지 확인하세요.

      src/app/home/home.ts

      import {Component} from '@angular/core';
      import {HousingLocation} from '../housing-location/housing-location';
      import {HousingLocationInfo} from '../housinglocation';
      
      @Component({
        selector: 'app-home',
        imports: [HousingLocation],
        template: `
          <section>
            <form>
              <input type="text" placeholder="Filter by city" />
              <button class="primary" type="button">Search</button>
            </form>
          </section>
          <section class="results">
            <app-housing-location />
          </section>
        `,
        styleUrls: ['./home.css'],
      })
      export class Home {
        readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common';
      
        housingLocation: HousingLocationInfo = {
          id: 9999,
          name: 'Test Home',
          city: 'Test city',
          state: 'ST',
          photo: `${this.baseUrl}/example-house.jpg`,
          availableUnits: 99,
          wifi: true,
          laundry: false,
        };
      }

      Home 클래스에 HousingLocationInfo 타입의 housingLocation 프로퍼티를 추가하면 데이터가 인터페이스 정의에 맞는지 확인할 수 있습니다. 데이터가 인터페이스 정의와 다르면 IDE가 타입 정보를 바탕으로 유용한 오류 메시지를 표시합니다.

   2. 변경 사항을 저장하고 앱에 오류가 없는지 확인하세요. 브라우저를 열어 "housing-location works!" 메시지가 여전히 표시되는지 확인하세요.

   
   1. 오류가 있다면 수정한 후 다음 단계로 진행하세요.

SUMMARY: 이번 실습에서는 인터페이스를 만들어 앱의 새 데이터 타입을 정의했습니다. 이 데이터 타입을 사용하면 HousingLocationInfo 데이터가 필요한 곳을 지정할 수 있습니다. 또한 IDE와 TypeScript 컴파일러가 필요한 곳에 HousingLocationInfo 타입의 데이터가 사용되는지 확인할 수 있습니다.

이 실습에서 다룬 내용을 더 알아보려면 다음 문서를 참고하세요: