HousingLocation 컴포넌트 만들기

이번 실습에서는 Angular 앱에 HousingLocation 컴포넌트를 추가하는 방법을 알아봅니다.

학습 목표

• 앱에 HousingLocation 컴포넌트를 추가하고, 컴포넌트가 추가되었음을 확인하는 메시지를 표시합니다.

1. HousingLocation 만들기

   이 단계에서는 앱에 새 컴포넌트를 만듭니다.

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

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

   2. 다음 명령어로 HousingLocation을 만드세요.

      ng generate component housingLocation

   3. 다음 명령어로 앱을 빌드하고 실행하세요.

      ng serve

      NOTE: 이 단계는 로컬 환경에서만 필요합니다!

   4. 브라우저에서 http://localhost:4200을 열어 애플리케이션을 확인하세요.

   5. 앱이 오류 없이 빌드되는지 확인하세요.

      HELPFUL: 새 컴포넌트를 추가했지만 아직 앱의 템플릿에서 사용하지 않았으므로 이전 실습과 동일한 화면이 표시됩니다.

   6. 다음 단계를 진행하는 동안 ng serve를 계속 실행해 두세요.

2. 앱 레이아웃에 새 컴포넌트 추가하기

   이 단계에서는 Home에 새 HousingLocation 컴포넌트를 추가해 앱 레이아웃에 표시합니다.

   IDE의 편집 창에서 다음 작업을 수행하세요:

   1. 에디터에서 home.ts를 여세요.
   2. home.ts의 파일 수준 import 구문에 다음 줄을 추가해 HousingLocation을 불러오세요.

   src/app/home/home.ts에서 HousingLocation 불러오기

   import {Component} from '@angular/core';
   import {HousingLocation} from '../housing-location/housing-location';
   
   @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 {}

   1. 다음으로 @Component 메타데이터의 imports 배열에 HousingLocation을 추가하세요.

   src/app/home/home.ts의 imports 배열에 HousingLocation 추가하기

   import {Component} from '@angular/core';
   import {HousingLocation} from '../housing-location/housing-location';
   
   @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 {}

   1. 이제 Home 템플릿에서 컴포넌트를 사용할 수 있습니다. @Component 메타데이터의 template 프로퍼티에 <app-housing-location> 태그를 추가하세요.

   src/app/home/home.ts의 컴포넌트 템플릿에 주택 정보 추가하기

   import {Component} from '@angular/core';
   import {HousingLocation} from '../housing-location/housing-location';
   
   @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 {}

3. 컴포넌트 스타일 추가하기

   이 단계에서는 앱이 올바르게 표시되도록 미리 작성된 HousingLocation 스타일을 복사합니다.

   1. src/app/housing-location/housing-location.css를 열고 다음 스타일을 붙여 넣으세요:

      NOTE: 브라우저에서는 src/app/housing-location/housing-location.ts의 styles 배열에 작성해도 됩니다.

      src/app/housing-location/housing-location.css에 컴포넌트 스타일 추가하기

      .listing {
        background: var(--accent-color);
        border-radius: 30px;
        padding-bottom: 30px;
      }
      .listing-heading {
        color: var(--primary-color);
        padding: 10px 20px 0 20px;
      }
      .listing-photo {
        height: 250px;
        width: 100%;
        object-fit: cover;
        border-radius: 30px 30px 0 0;
      }
      .listing-location {
        padding: 10px 20px 20px 20px;
      }
      .listing-location::before {
        content: url('/public/location-pin.svg') / '';
      }
      
      section.listing a {
        padding-left: 20px;
        text-decoration: none;
        color: var(--primary-color);
      }
      section.listing a::after {
        content: '\203A';
        margin-left: 5px;
      }

   2. 코드를 저장하고 브라우저로 돌아가 앱이 오류 없이 빌드되는지 확인하세요. 화면에 "housing-location works!" 메시지가 표시되어야 합니다. 오류가 있다면 수정한 후 다음 단계로 진행하세요.

      

SUMMARY: 이번 실습에서는 새 컴포넌트를 만들고 앱 레이아웃에 추가했습니다.