Home 컴포넌트 만들기

이번 실습에서는 Angular 앱에 새 컴포넌트를 만드는 방법을 알아봅니다.

학습 목표

앱에 Home 컴포넌트를 추가합니다.

Angular 컴포넌트 개념 살펴보기

Angular 앱은 기본 구성 요소인 컴포넌트를 중심으로 만들어집니다. 컴포넌트에는 앱의 각 요소가 동작하고 표시되는 방식을 정의하는 코드, HTML 레이아웃, CSS 스타일이 포함됩니다. Angular 컴포넌트는 다른 컴포넌트를 포함할 수 있습니다. 앱의 기능과 화면을 컴포넌트 단위로 나누어 구성할 수 있습니다.

Angular 컴포넌트의 프로퍼티는 메타데이터로 정의합니다. Home을 만들 때는 다음 프로퍼티를 사용합니다:

  • selector: Angular가 템플릿에서 컴포넌트를 참조하는 방법을 정의합니다.
  • imports: 컴포넌트의 의존성을 정의합니다.
  • template: 컴포넌트의 HTML 마크업과 레이아웃을 정의합니다.
  • styleUrls: 컴포넌트에서 사용하는 CSS 파일의 URL을 배열로 나열합니다.

  1. Home 만들기

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

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

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

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

      ng generate component home

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

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

      ng serve

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

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

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

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

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

    이 단계에서는 앱의 최상위 컴포넌트인 App에 새 Home 컴포넌트를 추가해 앱 레이아웃에 표시합니다.

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

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

    src/app/app.ts에서 Home 불러오기

    import {Component} from '@angular/core';
import {Home} from './home/home';

@Component({
  selector: 'app-root',
  imports: [Home],
  template: `
    <main>
      <header class="brand-name">
        <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
      </header>
      <section class="content">
        <app-home />
      </section>
    </main>
  `,
  styleUrls: ['./app.css'],
})
export class App {
  title = 'homes';
}
    1. app.ts의 @Component에서 imports 배열 프로퍼티에 Home을 추가하세요.

    src/app/app.ts에서 교체할 코드

    import {Component} from '@angular/core';
import {Home} from './home/home';

@Component({
  selector: 'app-root',
  imports: [Home],
  template: `
    <main>
      <header class="brand-name">
        <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
      </header>
      <section class="content">
        <app-home />
      </section>
    </main>
  `,
  styleUrls: ['./app.css'],
})
export class App {
  title = 'homes';
}
    1. app.ts의 @Component에서 template 프로퍼티에 다음 HTML 코드를 추가하세요.

    src/app/app.ts에서 교체할 코드

    import {Component} from '@angular/core';
import {Home} from './home/home';

@Component({
  selector: 'app-root',
  imports: [Home],
  template: `
    <main>
      <header class="brand-name">
        <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
      </header>
      <section class="content">
        <app-home />
      </section>
    </main>
  `,
  styleUrls: ['./app.css'],
})
export class App {
  title = 'homes';
}
    1. app.ts의 변경 사항을 저장하세요.
    2. ng serve가 실행 중이라면 앱이 갱신됩니다. ng serve가 실행 중이 아니라면 다시 실행하세요. 앱의 Hello world 가 Home의 home works! 로 바뀌어야 합니다.
    3. 브라우저에서 실행 중인 앱이 갱신되었는지 확인하세요.
    'home works!' 문구가 표시된 브라우저 화면

  3. Home에 기능 추가하기

    이 단계에서는 Home에 기능을 추가합니다.

    앞 단계에서는 앱 템플릿에 기본 Home을 추가해 기본 HTML이 앱에 표시되도록 했습니다. 이번 단계에서는 이후 실습에서 사용할 검색 필터와 버튼을 추가합니다. 지금은 이것이 Home에 필요한 전부입니다. 이 단계에서는 검색 요소를 레이아웃에 추가할 뿐, 아직 검색 기능은 구현하지 않습니다.

    시작용 프로젝트를 다운로드하지 않고 새 Angular 프로젝트로 시작했다면 (ng new) 검색 버튼과 입력창 테두리가 보이도록 src/styles.css에 다음 전역 스타일을 추가하세요:

    :root {
  --primary-color: #605dc8;
  --secondary-color: #8b89e6;
  --accent-color: #e8e7fa;
  --shadow-color: #e8e8e8;
}

button.primary {
  padding: 10px;
  border: solid 1px var(--primary-color);
  background: var(--primary-color);
  color: white;
  border-radius: 8px;
}

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

    1. first-app 디렉터리에서 에디터로 home.ts를 여세요.
    2. home.ts의 @Component에서 template 프로퍼티를 다음 코드로 수정하세요.

    src/app/home/home.ts에서 교체할 코드

    import {Component} from '@angular/core';

@Component({
  selector: 'app-home',
  template: `
    <section>
      <form>
        <input type="text" placeholder="Filter by city" />
        <button class="primary" type="button">Search</button>
      </form>
    </section>
  `,
  styleUrls: ['./home.css'],
})
export class Home {}

    1. 다음으로 에디터에서 home.css를 열고 다음 스타일로 내용을 수정하세요.

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

      src/app/home/home.css에서 교체할 코드

      .results {
  display: grid;
  column-gap: 14px;
  row-gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(400px, 400px));
  margin-top: 50px;
  justify-content: space-around;
}

input[type="text"] {
  border: solid 1px var(--primary-color);
  padding: 10px;
  border-radius: 8px;
  margin-right: 4px;
  display: inline-block;
  width: 30%;
}

button {
  padding: 10px;
  border: solid 1px var(--primary-color);
  background: var(--primary-color);
  color: white;
  border-radius: 8px;
}

@media (min-width: 500px) and (max-width: 768px) {
  .results {
      grid-template-columns: repeat(2, 1fr);
  }
  input[type="text"] {
      width: 70%;
  }   
}

@media (max-width: 499px) {
  .results {
      grid-template-columns: 1fr;
  }    
}

    2. 앱이 오류 없이 빌드되는지 확인하세요. 앱에 필터 검색 입력창과 버튼이 스타일과 함께 표시되어야 합니다. 오류가 있다면 수정한 후 다음 단계로 진행하세요.

      로고, 필터 검색 입력창, 검색 버튼이 표시된 Homes 앱의 브라우저 화면

    4. SUMMARY: 이번 실습에서는 앱에 새 컴포넌트를 만들고 필터 입력창과 버튼을 추가했습니다.

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