독립형 구성요소 시작하기

1. 소개

빌드 대상

이 Codelab에서는 Angular v14를 사용하여 야생동물 사진 갤러리 애플리케이션을 빌드합니다. 완성된 신청서에는 사진 모음이 표시되며 사진작가에게 연락할 수 있는 메시지 보내기 양식과 사진에 나온 동물에 관한 흥미로운 사실을 알아볼 수 있는 채팅 창이 있습니다.

Angular v14 및 새로운 독립형 구성요소 기능을 사용하여 애플리케이션의 모든 항목을 빌드합니다.

Angular 프레임워크 및 Angular CLI에 관한 모든 참조는 Angular v14를 반영합니다. 독립형 구성요소는 Angular v14의 미리보기 기능이므로 Angular v14를 사용하여 완전히 새로운 애플리케이션을 만들어야 합니다. 독립형 구성요소는 Angular 애플리케이션을 빌드하는 간소화된 방법을 제공합니다. 독립형 구성요소, 독립형 지시문, 독립형 파이프는 NgModules의 필요성을 줄여 작성 환경을 간소화하는 것을 목표로 합니다. 독립형 구성요소는 기존 Angular 라이브러리 생태계를 최대한 활용할 수 있습니다.

오늘 빌드할 애플리케이션입니다.

완료된 신청서

학습할 내용

  • Angular CLI를 사용하여 새 프로젝트를 스케폴드하는 방법
  • Angular 독립형 구성요소를 사용하여 Angular 앱 개발을 간소화하는 방법
  • 독립형 구성요소를 만드는 방법: UI를 빌드하고 일부 비즈니스 로직을 추가하는 방법
  • 독립형 구성요소를 사용하여 애플리케이션을 부트스트랩하는 방법
  • 독립형 구성요소를 지연 로드하는 방법
  • Dialogflow Messenger를 사용하여 독립형 구성요소에 채팅 대화를 삽입하는 방법
  • Google Cloud CLI (gcloud)를 사용하여 Google Cloud App Engine에 Angular 애플리케이션을 배포하는 방법

필요한 항목

  • Gmail 또는 Google Workspace 계정
  • 다음 주제에 관한 기본 지식
    • HTML을 선택합니다. 요소를 만드는 방법
    • CSS 및 less CSS 선택기를 사용하고 스타일 정의 파일을 만드는 방법
    • TypeScript 또는 JavaScript DOM 구조와 상호작용하는 방법
    • git 및 GitHub 저장소를 포크 및 클론하는 방법
    • bash 또는 zsh와 같은 명령줄 인터페이스 디렉터리를 탐색하고 명령어를 실행하는 방법

2. 환경 설정

로컬 환경 설정

이 Codelab을 완료하려면 로컬 컴퓨터에 다음 소프트웨어를 설치해야 합니다.

  • Node.js의 활성 LTS 또는 유지보수 LTS 버전 Angular 프레임워크 및 Angular CLI를 설치하는 데 사용됩니다.

    노드 버전

    Angular에서 지원됨

    14.15 이상

    지원됨

    16.10 이상

    지원됨

    18.1.0

    지원되지 않음

    로컬 컴퓨터의 Node.js 버전을 확인하려면 명령줄 창에서 다음 node 명령어를 실행합니다.
    node -v
  • 코드 편집기 또는 IDE 파일을 열고 수정하는 데 사용됩니다.Visual Studio Code 또는 원하는 다른 코드 편집기

Angular CLI 설치

모든 종속 항목을 구성한 후 다음 npm 명령어를 실행하여 명령줄 창에서 Angular CLI를 설치합니다.

npm install --global @angular/cli

구성이 올바른지 확인하려면 명령줄에서 다음 Angular 명령어를 실행합니다.

ng version

Angular 명령어가 성공적으로 완료되면 다음 스크린샷과 유사한 메시지가 표시됩니다.

Angular 버전의 터미널 출력

소스 코드 및 이미지

이 단계별 Codelab을 통해 전체 애플리케이션을 처음부터 만듭니다. GitHub 저장소에는 최종 코드가 포함되어 있습니다. 문제가 발생하면 최종 코드와 갤러리 페이지에 표시된 이미지를 검토하세요.

소스 코드를 다운로드합니다.

  1. 브라우저에서 다음 페이지로 이동합니다.
    https://github.com/angular/codelabs/tree/standalone-components
  2. 명령줄 창에서 저장소를 포크 및 클론합니다.

다음 단계에서는 사진 갤러리 애플리케이션을 빌드합니다.

3. 새 애플리케이션 만들기

초기 시작 애플리케이션을 만들려면 다음 작업을 완료합니다.

Angular CLI를 사용하여 새 워크스페이스를 만듭니다. Angular CLI 및 Angular 프레임워크에 대해 자세히 알아보려면 angular.io를 참고하세요.

새 프로젝트 만들기

명령줄 창에서 다음 작업을 완료합니다.

  1. 다음 Angular 명령어를 입력하여 photo-gallery-app라는 새 Angular 프로젝트를 만듭니다.
    ng new photo-gallery-app
  2. 각 메시지에서 기본 선택사항을 수락합니다.Angular 프레임워크가 필요한 패키지와 종속 항목을 설치합니다. 이 프로세스는 몇 분 정도 걸릴 수 있습니다.

Angular CLI가 완료되면 새 Angular 워크스페이스와 실행 준비가 완료된 간단한 애플리케이션이 생성됩니다.

새 애플리케이션은 표준 Angular 애플리케이션과 같은 구조를 갖습니다. 새 애플리케이션의 NgModule은 이 Codelab에서 중복됩니다.

애플리케이션 모듈 삭제

애플리케이션 모듈을 삭제하려면 다음 작업을 완료하세요.

  1. 새 photo-gallery-app 프로젝트 디렉터리의 src/app 디렉터리로 이동합니다.
  2. app.module.ts 파일을 삭제합니다.

애플리케이션 모듈을 삭제하면 애플리케이션에 모듈이 없게 됩니다. 애플리케이션에는 애플리케이션 구성요소라는 구성요소가 하나만 있습니다. 구성요소를 독립형으로 선언해야 합니다.

독립형 구성요소 선언

코드 편집기에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리의 src/app 디렉터리로 이동합니다.
  2. app.component.ts 파일을 엽니다.
  3. 다음 매개변수와 값을 데코레이터 목록에 추가합니다.
    standalone: true
    app.component.ts 파일은 다음 코드 예와 거의 일치해야 합니다.
    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true
})
export class AppComponent {
  title = 'photo-gallery-app';
}
  4. app.component.ts 파일을 저장합니다.

새 독립형 애플리케이션 컴파일

명령줄 창에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리로 이동합니다.
  2. 다음 Angular 명령어를 입력하여 새 애플리케이션을 컴파일합니다.
    ng serve

애플리케이션이 컴파일되지 않습니다. 걱정하지 마세요. 몇 가지 사항만 수정하면 됩니다.

bootstrapApplication API 사용

NgModule 없이 애플리케이션을 실행하려면 bootstrapApplication API를 사용하여 독립형 구성요소를 루트 구성요소로 사용해야 합니다.

애플리케이션 모듈 참조 삭제

코드 편집기에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리의 src 디렉터리로 이동합니다.
  2. main.ts 파일을 엽니다.
  3. 더 이상 애플리케이션 모듈이 없으므로 다음 가져오기 코드를 삭제합니다.
    import { AppModule } from './app/app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  4. 더 이상 애플리케이션 모듈이 없으므로 다음 부트스트랩 코드를 삭제합니다.
    platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
    main.ts 파일은 다음 코드 예와 일치해야 합니다.
    import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

bootstrapApplication 구성요소 추가

코드 편집기에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리의 src 디렉터리로 이동합니다.
  2. main.ts 파일을 엽니다.
  3. @angular/platform-browser 서비스에서 bootstrapApplication 구성요소를 가져옵니다.
    import { bootstrapApplication } from '@angular/platform-browser';
  4. 다음 코드를 추가하여 애플리케이션을 부트스트랩합니다.
    bootstrapApplication(AppComponent).catch(err => console.error(err));
  5. 구성요소와 필요한 라이브러리를 가져옵니다.
    import { AppComponent } from './app/app.component';
    main.ts 파일은 다음 코드 예와 일치해야 합니다.
    import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent).catch(err => console.error(err));

라우터 및 공통 모듈 추가

라우터 및 기타 공통 모듈 기능을 사용하려면 각 모듈을 구성요소로 직접 가져와야 합니다.

코드 편집기에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리의 src/app 디렉터리로 이동합니다.
  2. app.component.ts 파일을 엽니다.
  3. 구성요소에 필수 모듈을 가져옵니다.
    import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
  4. 구성요소에 가져오기를 추가합니다.
    imports: [CommonModule, RouterModule],
    app.component.ts 파일은 다음 코드 예와 일치해야 합니다.
    import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [CommonModule, RouterModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true
})
export class AppComponent {
  title = 'photo-gallery-app';
}
  5. app.component.ts 파일을 저장합니다.

새 독립형 애플리케이션 컴파일 및 실행

명령줄 창에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리로 이동합니다.
  2. 다음 Angular 명령어를 입력하여 애플리케이션을 컴파일 및 실행하고 웹 서버를 엽니다. 컴파일 오류를 제거하기 위해 애플리케이션을 실행하기 전에 IDE를 닫아야 할 수도 있습니다.
    ng serve

개발 서버는 포트 4200에서 실행되어야 합니다. 이전의 모든 오류가 사라지고 컴파일이 성공적으로 완료됩니다. 잘하셨습니다. 모듈 없이 독립형 구성요소로 실행되는 Angular 애플리케이션을 만들었습니다.

  1. 이제 일부 사진을 표시하도록 애플리케이션을 아름답게 꾸밀 수 있습니다.

4. 사진을 표시합니다.

새 애플리케이션은 사진 갤러리로 설계되었으며 일부 사진을 표시해야 합니다.

구성요소는 Angular 앱의 핵심 구성 요소입니다. 구성요소에는 세 가지 주요 측면이 있습니다.

  • 템플릿의 HTML 파일
  • 스타일의 CSS 파일
  • 앱 동작을 위한 TypeScript 파일

애플리케이션으로 사진을 이동합니다.

사진은 이전에 GitHub에서 다운로드한 애플리케이션에 제공됩니다.

  1. GitHub 프로젝트의 src/assets 디렉터리로 이동합니다.
  2. 파일을 복사하여 photo-gallery-app 프로젝트 디렉터리의 analogue 디렉터리에 붙여넣습니다.

HTML 템플릿 만들기

app.component.html 파일은 AppComponent 구성요소와 연결된 HTML 템플릿 파일입니다.

코드 편집기에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리의 src/app 디렉터리로 이동합니다.
  2. app.component.html 파일을 엽니다.
  3. 기존 HTML을 모두 삭제합니다.
  4. 다음 코드 예에서 HTML을 복사하여 붙여넣습니다.
    <article>
    <h1>Above and below the Ocean</h1>
        <h2>A taste of the Australia and Galapagos Wildlife, meet my friends!</h2>
        <section>
            <section class="row">
                <div class="column">
                  <img src="/assets/49412593648_8cc3277a9c_c.jpg">
                  <img src="/assets/49413271167_22a504c3fa_w.jpg">
                  <img src="/assets/47099018614_5a68c0195a_w.jpg">
                </div>
                <div class="column">
                  <img src="/assets/41617221114_4d5473251c_w.jpg">
                  <img src="/assets/47734160411_f2b6ff8139_w.jpg"> 
                  <img src="/assets/46972303215_793d32957f_c.jpg">
                </div>
                <div class="column">
                  <img src="/assets/45811905264_be30a7ded6_w.jpg">
                  <img src="/assets/44718289960_e83c98af2b_w.jpg">
                  <img src="/assets/46025678804_fb8c47a786_w.jpg">
                </div>
              </section>
        </section>
</article
  5. app.component.html 파일을 저장합니다.

스타일 정의 파일 만들기

코드 편집기에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리의 src 디렉터리로 이동합니다.
  2. styles.css 파일을 엽니다.
  3. 다음 코드 예에서 CSS를 복사하여 붙여넣습니다.
    article {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: 'Raleway';
}

h1 {
  color: #4479BA;
  text-align: center;
  font-size: xx-large;
}

h2 {
  color: rgb(121, 111, 110);
  text-align: center;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/*   Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

.link_button {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: solid 1px #20538D;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  background: #4479BA;
  color: #FFF;
  padding: 8px 12px;
  text-decoration: none;
  margin-top: 50px;
  font-size: large;
}

@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
  4. styles.css 파일 저장

색인 파일 업데이트

코드 편집기에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리의 src 디렉터리로 이동합니다.
  2. index.html 파일을 엽니다.
  3. 모든 페이지에서 상속할 수 있도록 Raleway 글꼴을 추가합니다.
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
  4. index.html 파일을 저장합니다.
  5. 코드를 저장하고 브라우저를 확인합니다. 개발 서버가 실행 중인 상태에서 저장하면 변경사항이 브라우저에 반영됩니다.
  6. 다음으로, 의견을 보내고 Jimbo와 채팅할 수 있는 새로운 독립형 구성요소를 만들어 보겠습니다. 이 Codelab을 계속 진행하여 Jimbo에 관해 자세히 알아보세요.

5. 새 독립형 구성요소 추가

지금까지 살펴본 것처럼, 독립형 구성 요소는 NgModule의 필요성을 줄여 Angular 애플리케이션을 빌드하는 간단한 방법을 제공합니다. 다음 섹션에서는 사용자가 의견을 보내고 가상 상담사와 채팅할 수 있는 새로운 독립형 구성요소를 만듭니다.

새 독립형 구성요소 만들기

이 새 구성요소를 만들려면 Angular CLI를 다시 사용합니다.

명령줄 창에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리로 이동합니다.
  2. 다음 Angular 명령어를 입력하여 feedback-and-chat라는 새 구성요소를 만듭니다.
    ng generate component feedback-and-chat --standalone
    다음 표에서는 명령어의 부분을 설명합니다.

    부품

    세부정보

    ng

    Angular 프레임워크의 모든 Angular CLI 명령어를 정의합니다.

    generate component

    새 구성요소의 스캐폴딩을 만듭니다.

    feedback-and-chat

    구성요소의 이름

    --standalone

    Angular 프레임워크에 독립형 구성요소를 만들도록 지시합니다.

새 독립형 구성요소 가져오기

새 독립형 구성요소를 사용하려면 먼저 app.components.ts 파일의 imports 배열에 추가해야 합니다.

이 구성요소는 독립형 구성요소이므로 모듈인 것처럼 가져오면 됩니다.

코드 편집기에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리의 src/app 디렉터리로 이동합니다.
  2. app.component.ts 파일을 엽니다.
  3. 새 독립형 구성요소를 가져옵니다.
    import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';
  4. 구성요소에서 가져오기를 업데이트합니다.
    imports: [CommonModule, RouterModule, FeedbackAndChatComponent],
    app.component.ts 파일은 다음 코드 예와 일치해야 합니다.
    import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';

@Component({
  selector: 'app-root',
  imports: [CommonModule, RouterModule, FeedbackAndChatComponent],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true
})
export class AppComponent {
  title = 'photo-gallery-app';
}
  5. app.component.ts 파일을 저장합니다.

구성요소 지연 로드

즉시 로드 패러다임에서 지연 로드 패러다임으로 전환합니다. 지연 로드 패러다임에서는 필요할 때까지 코드가 클라이언트에 전달되지 않습니다. 지연 로드는 페이지 로드 시간을 줄이고, 성능을 개선하고, 사용자 환경을 개선하는 데 효과적인 방법입니다. 라우터는 지연 로드를 처리하며 이는 ngModule와 독립형 구성요소에서 동일합니다.

애플리케이션 구성요소와 연결된 HTML 템플릿 업데이트

독립형 구성요소를 지연 로드하려면 사용자가 선택할 때만 구성요소를 활성화하는 버튼을 UI에 추가합니다.

코드 편집기에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리의 src/app 디렉터리로 이동합니다.
  2. app.component.html 파일을 엽니다.
  3. 파일 끝까지 스크롤하여 article 요소를 닫기 전에 다음 코드 예를 추가합니다.
    <a class="link_button" routerLink="feedback-and-chat">Find out more about these guys!</a>
<router-outlet></router-outlet>
  4. app.component.html 파일은 다음 코드 예와 일치해야 합니다.
    <article>
    <h1>Above and below the Ocean</h1>
    <h2>A taste of the Australia and Galapagos Wildlife, meet my friends!</h2>
    <section>
        <section class="row">
            <div class="column">
                <img src="/assets/49412593648_8cc3277a9c_c.jpg">
                <img src="/assets/49413271167_22a504c3fa_w.jpg">
                <img src="/assets/47099018614_5a68c0195a_w.jpg">
            </div>
            <div class="column">
                <img src="/assets/41617221114_4d5473251c_w.jpg">
                <img src="/assets/47734160411_f2b6ff8139_w.jpg"> 
                <img src="/assets/46972303215_793d32957f_c.jpg">
            </div>
            <div class="column">
                <img src="/assets/45811905264_be30a7ded6_w.jpg">
                <img src="/assets/44718289960_e83c98af2b_w.jpg">
                <img src="/assets/46025678804_fb8c47a786_w.jpg">
            </div>
        </section>
    </section> 
    <a class="link_button" routerLink="feedback-and-chat">Find out more about these guys!</a>
    <router-outlet></router-outlet>
</article>
  5. app.component.html 파일을 저장합니다.

경로 구성

코드 편집기에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리의 src 디렉터리로 이동합니다.
  2. main.ts 파일을 엽니다.
  3. provideRouter 메서드와 Routes 모듈을 가져옵니다. Angular v 14.2.0에는 애플리케이션의 경로 집합을 구성할 수 있는 새로운 provideRouter 메서드가 도입되었습니다.
    import { provideRouter, Routes } from '@angular/router';
  4. 다음 코드 스니펫을 가져오기와 if 문 사이에 복사하여 붙여넣습니다.
    const routes = [
  {
    path: 'feedback-and-chat',
    loadComponent: () => import('./app/feedback-and-chat/feedback-and-chat.component').then(c => c.FeedbackAndChatComponent),
  }
]
  5. 다음 코드 스니펫을 복사하여 붙여넣고 bootstrapApplication 메서드를 바꿉니다.
    bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
}).catch(err => console.error(err));
    main.ts 파일은 다음 코드 예와 일치해야 합니다.
    import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, Routes } from '@angular/router';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';

const routes = [
  {
    path: 'feedback-and-chat',
    loadComponent: () => 
      import('./app/feedback-and-chat/feedback-and-chat.component').then(c => c.FeedbackAndChatComponent),
  }
]

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
}).catch(err => console.error(err));
  6. main.ts 파일을 저장합니다.

Chrome 개발자 도구로 컴파일 및 검토

Chrome 개발자 도구를 사용하여 Angular 프레임워크가 구성요소를 지연 로드하는 방법을 검토합니다.

명령줄 창에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리로 이동합니다.
  2. 다음 Angular 명령어를 입력하여 애플리케이션을 컴파일하고 실행하고 웹 서버를 엽니다.
    ng serve
    개발 서버는 포트 4200에서 실행되어야 합니다.

브라우저에서 다음 작업을 완료합니다.

  1. 다음 페이지로 이동합니다.
    http://localhost:4200
  2. Chrome 개발자 도구를 열고 네트워크 탭을 선택합니다.
  3. 페이지를 새로고침하면 feedback-and-chat 구성요소가 아닌 여러 파일이 표시됩니다.화면이 다음 화면 캡처와 일치해야 합니다.Chrome DevTools 패널이 열려 있는 앱 스크린샷
  4. 이들 자세히 알아보기 버튼을 선택하여 독립형 구성요소로 라우팅합니다.로그에 구성요소가 전체 라우터에 도달했을 때만 로드된다고 표시됩니다. 목록 끝까지 아래로 스크롤하여 구성요소가 로드되었는지 확인합니다. 화면이 다음 화면 캡처와 일치해야 합니다.지연 로드 구성요소를 보여주는 Chrome Devtools 패널이 열려 있는 앱 스크린샷

6. 양식의 UI 추가

의견 보내기 양식에는 세 개의 입력 UI 필드와 하단에 버튼이 있습니다. 입력 UI 필드는 이름, 발신자 이메일 주소, 설명입니다.

UI를 지원하려면 input 요소에 세 개의 입력 UI 필드와 각각 연결된 각 contactForm 양식 컨트롤에 바인딩되는 formControlName 속성을 추가합니다.

HTML 템플릿에 양식 추가

사용자가 의견을 보낼 수 있도록 UI에 양식을 추가합니다.

코드 편집기에서 다음 작업을 완료합니다.

  1. feedback-and-chat.component.html 파일로 이동합니다.
  2. 기존 HTML을 삭제합니다.
  3. 다음 코드 예의 HTML을 복사하여 붙여넣습니다.
    <article>    
    <h2>Send me a message or use the chat below to learn some cool facts of the animals in the photos</h2>
    <section class="container">
        <form ngNativeValidate [formGroup]="contactForm" (ngSubmit)="onSubmit()">
            <div class="row" *ngIf="showMsg">
                <div class="row">
                    <p>
                        <strong>Thanks for your message!</strong>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="name">Full Name</label>
                </div>
                <div class="col-75">
                    <input type="text" id="fname" placeholder="Your name.." formControlName="fullname" required>
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="lemail">Email</label>
                </div>
                <div class="col-75">
                    <input type="text" id="lemail" placeholder="Your email.." formControlName="email" required>
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="comments">Comments</label>
                </div>
                <div class="col-75">
                    <textarea id="subject" formControlName="comments" placeholder="Write something.." style="height:200px" required></textarea>
                </div>
            </div>
            <div class="row">
              <button type="submit" class="submit">Submit</button>
            </div>
        </form>
    </section>
</article>
  4. feedback-and-chat.component.html 파일을 저장합니다.

양식의 스타일 파일 업데이트

코드 편집기에서 다음 작업을 완료합니다.

  1. feedback-and-chat.component.css 파일로 이동합니다.
  2. 다음 코드 예의 CSS를 복사하여 붙여넣습니다.
    /*   Style inputs, select elements and textareas */
input[type=text], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

/*   Style the label to display next to the inputs */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

/*   Style the submit button */
button {
  background-color: #4479BA;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  font-size: medium;
  font-family: 'Raleway';
}

/*   Style the container */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  width: 100%;
}

/*   Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

/*   Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/*   Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/*   Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}
  3. feedback-and-chat.component.css 파일을 저장합니다.

양식의 UI 업데이트 컴파일

명령줄 창에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리로 이동합니다.
  2. 다음 Angular 명령어를 입력하여 애플리케이션을 컴파일하고 실행하고 웹 서버를 엽니다.
    ng serve
    애플리케이션이 컴파일되지 않습니다. 걱정하지 마세요. 양식을 바인딩해야 합니다.
  3. 지금은 다음 항목을 검토하세요.
    • formGroup 속성 결합을 사용하여 contactForm를 form 요소에 바인딩하고 ngSubmit 이벤트 결합을 사용하여
    • FormGroup 지시어는 form 요소에서 내보낸 제출 이벤트를 수신 대기합니다. 그러면 FormGroup 디렉터리는 onSubmit 콜백 함수에 바인딩할 수 있는 ngSubmit 이벤트를 내보냅니다.
    • 이후 단계에서 feedback-and-chat.component.ts 파일에 onSubmit 콜백 함수를 구현합니다.
  4. 다음으로 양식을 결합합니다.

7. 양식에 이벤트 처리 추가

의견 보내기 양식의 UI는 완성되었지만 상호작용이 누락되었습니다. 양식을 사용하여 사용자 입력을 처리하는 것은 많은 일반적인 애플리케이션의 핵심입니다.

실제 시나리오에서는 비즈니스 로직을 구현하여 다음 작업을 완료해야 합니다.

  1. 구성요소와 연결된 렌더링된 DOM 구조에서 사용자 입력을 파싱합니다.
  2. 봇 스팸을 방지하기 위한 보안문자 또는 유사한 메커니즘이 포함된 사용자 입력을 검증합니다.
  3. 지정된 이메일 주소로 이메일을 보냅니다.
  4. 사용자에게 친근한 메시지를 표시합니다.

이 Codelab에서는 다음 작업만 구현합니다.

  1. 구성요소와 연결된 렌더링된 DOM 구조에서 사용자 입력을 파싱합니다.
  2. 사용자에게 친근한 메시지를 표시합니다.

자신의 실력에 도전하고 이 네 가지 동작을 모두 구현해야 합니다.

구성요소에 메시지 보내기 양식 모델 추가

구성요소 클래스에 의견 보내기 양식 모델을 만들고 추가합니다. 양식 모델에 따라 양식의 상태가 결정됩니다. FormBuilder 서비스는 UI 컨트롤을 만드는 편리한 메서드를 제공합니다.

코드 편집기에서 다음 작업을 완료합니다.

  1. feedback-and-chat.component.ts 파일로 이동합니다.
  2. @angular/forms 패키지에서 FormBuilder 서비스와 ReactiveModule 모듈을 가져옵니다. 이 서비스는 컨트롤을 생성하는 편리한 메서드를 제공합니다. 다음 단계에서는 inject 함수를 활용할 예정이므로 @angular/core에서 이 함수도 가져와야 합니다.
    import { Component, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
  3. ReactiveFormsModule 모듈을 가져옵니다.
    imports: [CommonModule,ReactiveFormsModule],
  4. 다음 생성자를 삭제합니다.
    constructor() { }
  5. 클래스 서명 바로 아래에 있는 inject 함수를 통해 FormBuilder 서비스를 삽입합니다.
    private formBuilder = inject(FormBuilder);
    FormBuilder 서비스의 group 메서드를 사용하여 양식 모델을 만들어 사용자의 이름, 이메일 주소, 댓글을 수집합니다.
  6. 새 contactForm 속성을 만들고 group 메서드를 사용하여 양식 모델로 설정합니다.양식 모델에는 name, email, comments 필드가 포함됩니다.
    contactForm = this.formBuilder.group({
  fullname: '',
  email: '',
  comments: ''
});
    양식을 처리할 onSubmit 메서드를 정의합니다.실제 시나리오에서는 onSubmit 메서드를 통해 사용자가 지정된 이메일 주소로 전송된 이메일 메시지를 사용하여 사진가에게 의견 메시지를 제출할 수 있습니다.이 Codelab에서는 사용자 입력을 표시하고 reset 메서드를 사용하여 양식을 재설정하며 사용자 친화적인 성공 메시지를 표시합니다.
  7. 새 onSubmit 메서드를 추가하고 초기화한 후 showMsg 변수를 true로 설정합니다.
    showMsg: boolean = false;

onSubmit(): void {
  console.log('Your feedback has been submitted', this.contactForm.value);
  this.showMsg = true;
  this.contactForm.reset();
}
    feedback-and-chat.component.ts 파일은 다음 코드 예와 일치해야 합니다.
    import { Component, inject, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-feedback-and-chat',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  templateUrl: './feedback-and-chat.component.html',
  styleUrls: ['./feedback-and-chat.component.css']
})
export class FeedbackAndChatComponent {

  showMsg: boolean = false;
  private formBuilder = inject(FormBuilder);

  contactForm = this.formBuilder.group({
    fullname: '',
    email: '',
    comments: ''
  });

  ngOnInit(): void {
  }

  onSubmit(): void {
    console.log('Your feedback has been submitted', this.contactForm.value);
    this.showMsg = true;
    this.contactForm.reset();
  }
}
  8. feedback-and-chat.component.ts 파일을 저장합니다.

의견 보내기 양식 모델을 컴파일하고 표시합니다.

명령줄 창에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리로 이동합니다.
  2. 다음 Angular 명령어를 입력하여 애플리케이션을 컴파일하고 실행하고 웹 서버를 엽니다.
    ng serve
  3. 개발 서버는 포트 4200에서 실행되어야 합니다.

브라우저에서 다음 작업을 완료합니다.

  1. 다음 페이지로 이동합니다.
    http://localhost:4200
  2. Chrome 개발자 도구를 열고 콘솔 탭을 선택합니다.
  3. 전체 이름, 이메일, 의견 텍스트 상자에 값을 입력합니다.
  4. 제출 버튼을 선택합니다.페이지에 성공 메시지가 표시됩니다.
  5. Console 탭에 값이 표시되는지 확인합니다.화면이 다음 스크린샷과 일치해야 합니다.양식에 입력된 JSON 데이터를 표시하는 콘솔이 있는 브라우저 창구성요소 UI에 메시지 보내기 양식을 추가하고 사용자 입력을 파싱하는 코드를 구현했습니다.
  6. 다음으로, 채팅 대화상자를 삽입하여 애플리케이션 방문자가 Jimbo와 대화할 수 있도록 합니다. 짐보는 코알라입니다. 코알라로부터 야생동물에 관한 몇 가지 멋진 사실을 배울 수 있습니다.

8. 채팅 대화상자 추가

Dialogflow CX 또는 유사한 플랫폼과 같은 대화형 인터페이스를 활용합니다. Dialogflow CX 에이전트는 사람과 동시에 대화를 처리하는 가상 에이전트입니다. 이는 인간 언어의 미묘한 차이를 인식하고 대화 중에 최종 사용자의 텍스트 또는 오디오를 앱과 서비스가 이해할 수 있는 구조화된 데이터로 변환하는 자연어 이해 모듈입니다.

이미 사용할 수 있는 샘플 가상 에이전트가 생성되었습니다. 이 실습에서 해야 할 일은 애플리케이션 사용자가 봇과 상호작용할 수 있도록 독립형 구성요소에 채팅 대화상자를 추가하는 것입니다. 이 요구사항을 충족하기 위해 맞춤설정 가능한 대화상자를 제공하는 사전 빌드된 통합인 Dialogflow 메신저를 활용합니다. 채팅 대화상자가 열리면 화면 오른쪽 하단에 표시되고 상담사 기본 환영 인텐트를 트리거합니다. 봇이 사용자에게 인사하고 대화를 시작합니다.

다음 구현은 야생동물에 관한 재미있는 사실을 사용자와 공유합니다. 가상 에이전트의 다른 구현은 고객의 복잡한 사용 사례 (예: 콜센터 상담사)를 해결할 수 있습니다. 많은 기업에서 가상 상담사를 회사 웹사이트와의 기본 커뮤니케이션 채널로 사용합니다.

구성요소에 Dialogflow Messenger 추가

양식과 마찬가지로 채팅 대화상자는 독립형 구성요소가 로드될 때만 표시되어야 합니다.

코드 편집기에서 다음 작업을 완료합니다.

  1. feedback-and-chat.component.ts 파일로 이동합니다.
  2. 다음 코드 예의 df-messenger 요소를 복사하여 페이지의 아무 곳이나 붙여넣습니다.
    <df-messenger agent-id="762af666-79f7-4527-86c5-9ca06f72c317"
              chat-title="Chat with Jimbo!"
              df-cx="true"
              intent="messanger-welcome-event"
              language-code="en"
              location="us-central1"></df-messenger>
    Dialogflow Messenger 통합을 선택하면 Dialogflow에서 df-messenger 요소의 속성을 생성합니다.

    속성

    세부정보

    agent-id

    자동 입력됩니다. Dialogflow 에이전트의 고유 식별자를 지정합니다.

    chat-title

    자동 입력됩니다. 채팅 대화상자 상단에 표시할 콘텐츠를 지정합니다. 처음에는 상담사의 이름으로 미리 채워지지만 맞춤설정해야 합니다.

    df-cx

    CX 상담사와의 상호작용을 나타냅니다. 값을 true로 설정합니다.

    인텐트

    채팅 대화상자가 열릴 때 첫 번째 인텐트를 트리거하는 데 사용되는 커스텀 이벤트를 지정합니다.

    language-code

    첫 번째 인텐트의 기본 언어 코드를 지정합니다.

    위치

    상담사를 배포할 리전을 지정합니다.

  3. feedback-and-chat.component.ts 파일을 저장합니다.

의견 보내기 양식 모델 표시

명령줄 창에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리로 이동합니다.
  2. 다음 Angular 명령어를 입력하여 애플리케이션을 컴파일합니다.
    ng serve
    애플리케이션이 컴파일되지 않습니다. 명령줄에 다음 오류 메시지가 표시됩니다.df-messenger 오류 메시지
  3. 그런 다음 맞춤 스키마를 추가합니다.

독립형 구성요소에 맞춤 스키마 추가

df-messanger 요소는 알려진 요소가 아닙니다. 맞춤 웹 구성요소입니다. Angular 프레임워크의 오류 메시지는 메시지를 숨기려면 두 개의 독립형 구성요소 모두에 CUSTOM_ELEMENTS_SCHEMA를 추가해야 한다고 제안합니다.

코드 편집기에서 다음 작업을 완료합니다.

  1. feedback-and-chat.component.ts 파일로 이동합니다.
  2. CUSTOM_ELEMENTS_SCHEMA 스키마를 가져옵니다.
    import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
  3. 스키마 목록에 CUSTOM_ELEMENTS_SCHEMA를 추가합니다.
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
    feedback-and-chat.component.ts 파일은 다음 코드 예와 일치해야 합니다.
    import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-feedback-and-chat',
  standalone: true,
  imports: [CommonModule,ReactiveFormsModule],
  templateUrl: './feedback-and-chat.component.html',
  styleUrls: ['./feedback-and-chat.component.css'],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

...
  4. df-messanger 웹 구성요소에는 의견 및 채팅 구성요소가 로드될 때만 삽입되어야 하는 JavaScript가 필요합니다. 이를 위해 요소를 활성화하는 데 필요한 채팅 스크립트를 로드하는 ngOnInit() 메서드에 관련 코드를 추가합니다.
    ngOnInit() {
    // Load the chat script, which activates the `<df-messenger>` element.
    const script = document.createElement('script');
    script.async = true;
    script.src = 'https://www.gstatic.com/dialogflow-console/fast/messenger-cx/bootstrap.js?v=1';
    document.head.appendChild(script);
}
  5. feedback-and-chat.component.ts 파일을 저장합니다.

업데이트된 채팅 대화상자 컴파일 및 표시

명령줄 창에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리로 이동합니다.
  2. 다음 Angular 명령어를 입력하여 애플리케이션을 컴파일하고 실행하고 웹 서버를 엽니다.
    ng serve
    개발 서버가 포트 4200에서 실행되어야 합니다.

브라우저에서 다음 작업을 완료합니다.

  1. 다음 페이지로 이동합니다.
    http://localhost:4200
    페이지 하단에 채팅 아이콘이 표시됩니다.
  2. 아이콘을 선택하고 Jimbo와 상호작용하면 재미있는 동물 상식을 알려줍니다.메신저 봇이 응답하는 채팅 창을 표시하는 애플리케이션
  3. 애플리케이션이 완전히 작동합니다.

9. Google App Engine에 애플리케이션 배포

애플리케이션이 머신에서 로컬로 실행 중입니다. 이 Codelab의 다음 마지막 단계는 이를 Google App Engine에 배포하는 것입니다.

Google App Engine에 대해 자세히 알아보려면 App Engine을 참고하세요.

Google App Engine용 환경 설정

다음 조건을 모두 충족하는 경우 다음 단계를 건너뛰고 애플리케이션 배포를 진행합니다.

  • App Engine으로 Cloud 프로젝트를 만들었습니다.
  • Cloud Build API 사용 설정
  • Google Cloud CLI 설치

다음 작업을 완료합니다.

  1. Gmail 또는 Google Workspace 계정에 로그인합니다. 계정이 없는 경우 Google 계정을 만드세요.
  2. Cloud Console에서 결제를 사용 설정하여 Cloud 리소스와 API를 사용합니다. 자세한 내용은 셀프 서비스 Cloud Billing 계정 만들기, 수정, 닫기를 참고하세요.
  3. App Engine 애플리케이션 리소스 및 기타 Google Cloud 리소스를 보관할 Google Cloud 프로젝트를 만듭니다. 자세한 내용은 프로젝트 만들기 및 관리를 참고하세요.
  4. Cloud Console에서 Cloud Build API를 사용 설정합니다. 자세한 내용은 API 액세스 사용 설정하기를 참고하세요.
  5. Google Cloud CLI 및 gcloud 명령줄 도구를 설치합니다. 자세한 내용은 gcloud CLI 설치를 참고하세요.
  6. Google Cloud CLI를 초기화하고 배포하려는 Google Cloud 프로젝트를 사용하도록 gcloud가 구성되었는지 확인합니다. 자세한 내용은 gcloud CLI 초기화를 참고하세요.

독립형 애플리케이션 빌드

명령줄 창에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리로 이동합니다.
  2. 다음 Angular 명령어를 입력하여 애플리케이션의 프로덕션 지원 버전을 컴파일하고 만듭니다.
    ng build

애플리케이션의 프로덕션 버전은 photo-gallery-app 프로젝트 디렉터리의 dist 하위 디렉터리에 생성됩니다.

10. Express.js 프레임워크를 사용하여 애플리케이션 배포

이 Codelab의 샘플 코드는 Express.js 프레임워크를 사용하여 HTTP 요청을 처리합니다. 원하는 웹 프레임워크를 사용할 수 있습니다.

Express.js 프레임워크 설치

명령줄 창에서 다음 작업을 완료합니다.

  1. 다음 명령어를 입력하여 Express.js 프레임워크를 설치합니다.
    npm install express --save

웹 서버 구성

코드 편집기에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리로 이동합니다.
  2. 새 server.js 파일을 만듭니다.
  3. 다음 코드를 복사하여 붙여넣습니다.
    const express = require("express");
const path = require("path");

// Running PORT is set automatically by App Engine
const port = process.env.PORT || 3000;
const app = express();

const publicPath = path.join(__dirname, "/dist/photo-gallery-app");

app.use(express.static(publicPath));

app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname + "/dist/photo-gallery-app/index.html"));
});

app.listen(port, () => {
  console.log(`Server is up on ${port}`);
});
  4. server.js 파일을 저장합니다.

웹 서버 연결

코드 편집기에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리로 이동합니다.
  2. package.json 파일을 엽니다.
  3. server.js 파일에서 노드를 실행하도록 start 명령어를 수정합니다.
    "name": "photo-gallery-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
    start 속성은 애플리케이션의 진입점입니다.
  4. package.json 파일을 저장합니다.

App Engine 구성

코드 편집기에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리로 이동합니다.
  2. 새 app.yaml 파일을 만듭니다.
  3. 다음 코드를 복사하여 붙여넣습니다.
    runtime: nodejs16
service: default
    app.yaml 파일의 정보는 App Engine의 구성을 지정합니다. 런타임과 서비스를 지정하기만 하면 됩니다.
  4. app.yaml 파일을 저장합니다.

gcloud 무시 목록 업데이트

node_modules 디렉터리가 업로드되지 않도록 하려면 .gcloudignore 파일을 만듭니다. .gcloudignore 파일에 나열된 파일은 업로드되지 않습니다.

코드 편집기에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리로 이동합니다.
  2. 새 .gcloudignore 파일을 만듭니다.
  3. 다음 코드를 복사하여 붙여넣습니다.
    # This file specifies files that are *not* uploaded to Google Cloud
# using gcloud. It follows the same syntax as .gitignore, with the addition of
# "#!include" directives (which insert the entries of the given .gitignore-style
# file at that point).
#
# For more information, run:
#   $ gcloud topic gcloudignore
#
.gcloudignore
# If you would like to upload your .git directory, .gitignore file or files
# from your .gitignore file, remove the corresponding line
# below:
.git
.gitignore

# Node.js dependencies:
node_modules/
  4. .gcloudignore 파일을 저장합니다.

애플리케이션 초기화

애플리케이션을 배포하기 전에 프로젝트로 초기화하고 연결된 리전을 선택하세요.

명령줄 창에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리로 이동합니다.
  2. 다음 명령어를 입력하여 애플리케이션을 초기화합니다.
    gcloud app create --project=[YOUR_PROJECT_ID]
  3. 메시지가 표시되면 App Engine 애플리케이션을 배치할 리전을 선택합니다.

애플리케이션 배포

명령줄 창에서 다음 작업을 완료합니다.

  1. 새 photo-gallery-app 프로젝트 디렉터리로 이동합니다.
  2. 다음 명령어를 입력하여 애플리케이션을 배포합니다.
    gcloud app deploy --project=[YOUR_PROJECT_ID]
  3. 프롬프트에서 작업을 확인합니다.gcloud 배포 명령어가 완료되면 애플리케이션에 액세스할 수 있는 URL이 표시됩니다.
  4. 다음 명령어를 입력하여 브라우저에서 새 탭을 엽니다.
    gcloud app browse
    gcloud app deploy 및 glcoud 앱 탐색 입력의 콘솔 출력

11. 축하합니다

축하합니다 Angular v14를 사용하여 샘플 사진 갤러리를 만들고 App Engine에 배포했습니다.

독립형 구성요소 기능과 지연 로드를 실험했습니다. 의견과 댓글을 제공하기 위한 양식 기반의 메시지 보내기 기능을 빌드했습니다. 또한 Dialogflow 메신저를 사용하여 Dialogflow CX 가상 에이전트와의 채팅 대화를 추가했습니다. 잘하셨습니다.

다음 단계

이제 기본 애플리케이션을 완료했으므로 다음 아이디어를 사용하여 개선해 보세요.

  • 양식이 실제로 의견을 전송하지 않으므로 이메일을 보내는 비즈니스 로직을 추가하도록 리팩터링합니다.
  • 실제 시나리오에서는 사용자 입력을 검증하고 보안문자 또는 유사한 메커니즘을 포함하여 봇 스팸을 방지해야 합니다.
  • 새 에이전트를 만들고 Dialogflow CX에서 대화 흐름을 설계하는 방법 알아보기

Angular 프레임워크를 계속 실험하고 즐기세요.

Cloud 프로젝트 정리 및 삭제하기

Cloud 프로젝트를 유지하거나 삭제하여 프로젝트에서 사용된 모든 리소스에 대한 비용 청구를 중지할 수 있습니다.

브라우저에서 다음 작업을 완료합니다.

  1. Gmail 또는 Google Workspace 계정에 로그인합니다.
  2. Google Cloud 콘솔에서 IAM 및 관리자 설정 버튼을 선택합니다.
  3. IAM 및 관리자 페이지에서 리소스 관리 탭을 선택합니다.
  4. 리소스 관리 페이지에서 삭제하려는 프로젝트로 이동하여 선택합니다. 삭제 버튼을 선택하여 대화상자를 엽니다.
  5. 대화상자 창에서 프로젝트 ID를 입력합니다. 종료 버튼을 선택하여 프로젝트를 삭제합니다.