Hello world

첫 실습을 시작으로 각 실습에서 기능을 추가하며 완전한 Angular 앱을 만들어 봅니다. 이번 실습에서는 애플리케이션에 익숙한 문구인 "Hello World"를 표시하도록 수정합니다.

학습 목표

애플리케이션이 브라우저에서 정상적으로 실행되고 오류 없이 내용이 표시된다면 Angular 앱 개발을 시작할 수 있도록 개발 환경과 IDE가 올바르게 설정된 것입니다.

NOTE: 내장 에디터를 사용한다면 네 번째 단계로 이동하세요. 브라우저 놀이터에서는 앱을 실행하기 위해 ng serve를 실행할 필요가 없습니다. ng generate와 같은 다른 명령어는 오른쪽 콘솔 창에서 실행할 수 있습니다.

기본 앱 다운로드하기

코드 에디터 오른쪽 위의 "다운로드" 아이콘을 클릭하세요. 이 튜토리얼의 소스 코드가 담긴 .zip 파일이 다운로드됩니다. 로컬 터미널과 IDE에서 이 프로젝트를 연 다음 기본 앱 테스트를 진행하세요.

튜토리얼의 어느 단계에서든 이 아이콘을 클릭하면 해당 단계의 소스 코드를 다운로드해 그 지점부터 시작할 수 있습니다.
기본 앱 테스트하기

이 단계에서는 실습의 출발점인 기본 앱을 다운로드한 후 기본 Angular 앱을 빌드합니다. 이를 통해 튜토리얼을 계속 진행하는 데 필요한 개발 환경이 준비되어 있는지 확인합니다.

IDE의 터미널 창에서 다음 작업을 수행하세요:
1. 프로젝트 디렉터리에서 first-app 디렉터리로 이동하세요.
2. 다음 명령어로 앱 실행에 필요한 의존성을 설치하세요.
```
npm install
```
3. 다음 명령어로 기본 앱을 빌드하고 실행하세요.
```
ng serve
```
  앱이 오류 없이 빌드되어야 합니다.
4. 개발용 컴퓨터의 웹 브라우저에서 http://localhost:4200을 여세요.
5. 브라우저에 기본 웹사이트가 표시되는지 확인하세요.
6. 다음 단계를 진행하는 동안 ng serve를 실행 상태로 두어도 됩니다.
프로젝트 파일 살펴보기

이 단계에서는 기본 Angular 앱을 구성하는 파일을 살펴봅니다.

IDE의 탐색기 창에서 다음 작업을 수행하세요:
1. 프로젝트 디렉터리에서 first-app 디렉터리로 이동하세요.
2. src 디렉터리를 열어 다음 파일을 확인하세요.
  1. 파일 탐색기에서 Angular 앱 파일이 있는 /src를 찾으세요.
    1. index.html은 앱의 최상위 HTML 템플릿입니다.
    2. styles.css는 앱의 최상위 스타일 시트입니다.
    3. main.ts는 앱 실행이 시작되는 파일입니다.
    4. favicon.ico는 일반적인 웹사이트에서 사용하는 것과 같은 앱 아이콘입니다.
  2. 파일 탐색기에서 Angular 앱의 컴포넌트 파일이 있는 /app을 찾으세요.
    1. app.ts는 app-root 컴포넌트를 정의하는 소스 파일입니다. 이 컴포넌트는 앱의 최상위 Angular 컴포넌트입니다. 컴포넌트는 Angular 애플리케이션의 기본 구성 요소입니다. 컴포넌트 정의에는 코드, HTML 템플릿, 스타일이 포함되며, 이를 한 파일에 작성하거나 별도의 파일로 나눌 수 있습니다.
      
      이 앱에서는 스타일을 별도 파일에 작성하고 컴포넌트 코드와 HTML 템플릿은 이 파일에 작성합니다.
    2. app.css는 이 컴포넌트의 스타일 시트입니다.
    3. 새 컴포넌트는 이 디렉터리에 추가됩니다.
  3. 파일 탐색기에서 앱에 사용하는 이미지가 있는 /public 디렉터리를 찾으세요.
  4. 파일 탐색기에서 Angular 앱을 빌드하고 실행하는 데 필요하지만 평소에는 직접 다루지 않는 파일과 디렉터리를 확인하세요.
    1. .angular에는 Angular 앱 빌드에 필요한 파일이 있습니다.
    2. .e2e에는 앱 테스트에 사용하는 파일이 있습니다.
    3. node_modules에는 앱에서 사용하는 Node.js 패키지가 있습니다.
    4. angular.json은 앱 빌드 도구에 Angular 앱의 구성을 전달합니다.
    5. package.json은 npm(Node 패키지 매니저)이 완성된 앱을 실행할 때 사용합니다.
    6. tsconfig.*는 TypeScript 컴파일러에 앱의 설정을 전달하는 파일입니다.
Angular 앱 프로젝트를 구성하는 파일을 확인했다면 다음 단계로 진행하세요.

Hello World 만들기

이 단계에서는 Angular 프로젝트 파일을 수정해 화면에 표시되는 내용을 바꿉니다.

IDE에서 다음 작업을 수행하세요:
1. first-app/src/index.html을 여세요.
  
  NOTE: 이 단계와 다음 단계는 로컬 환경에서만 필요합니다!
2. index.html의 <title> 엘리먼트를 다음 코드로 바꿔 앱 제목을 수정하세요.
  src/index.html에서 교체할 코드
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Homes</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link
      href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>
```
  그런 다음 index.html의 변경 사항을 저장하세요.
3. 다음으로 first-app/src/app/app.ts를 여세요.
4. app.ts의 @Component 정의에서 template 줄을 다음 코드로 바꿔 앱 컴포넌트의 텍스트를 수정하세요.
  src/app/app.ts에서 교체할 코드
```
import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  imports: [],
  template: ` <h1>Hello world!</h1> `,
  styleUrls: ['./app.css'],
})
export class App {
  title = 'homes';
}
```
5. app.ts의 App 클래스 정의에서 title 줄을 다음 코드로 바꿔 컴포넌트 제목을 수정하세요.
  src/app/app.ts에서 교체할 코드
```
import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  imports: [],
  template: ` <h1>Hello world!</h1> `,
  styleUrls: ['./app.css'],
})
export class App {
  title = 'homes';
}
```
  그런 다음 app.ts의 변경 사항을 저장하세요.
6. 앞에서 실행한 ng serve 명령어를 중지했다면 IDE의 터미널 창에서 ng serve를 다시 실행하세요.
7. 브라우저에서 localhost:4200을 열고 앱이 오류 없이 빌드되며 제목에는 Homes 가, 본문에는 Hello world 가 표시되는지 확인하세요:

SUMMARY: 이번 실습에서는 기본 Angular 앱에 Hello world 를 표시하도록 수정했습니다. 이 과정에서 앱을 로컬에서 실행하고 테스트하는 ng serve 명령어를 알아봤습니다.

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

학습 목표

기본 앱 다운로드하기

기본 앱 테스트하기

프로젝트 파일 살펴보기

Hello World 만들기

src/index.html에서 교체할 코드

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

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

`Hello World` 만들기