Angular 시작하기

이 장에서는 Angular CLI를 설치하고, 프로젝트를 만들어 개발 서버로 실행한 뒤 첫 수정을 해 보는 과정까지 다룹니다. 마지막으로 Angular 작업을 편하게 해 주는 편집기 도구도 소개합니다.

준비물

Angular 프로젝트는 Node.js 위에서 동작하는 Angular CLI로 만들고 실행합니다. nodejs.org에서 현재 LTS(또는 유지보수 LTS) 버전의 Node.js를 설치합니다. Angular 버전마다 지원하는 Node.js 버전은 angular.dev의 버전 호환표에 정리되어 있습니다. npm은 Node.js와 함께 설치되며, pnpm·Yarn·Bun을 써도 됩니다.

node --version
npm --version

Angular CLI 설치

어디서나 ng 명령을 쓸 수 있도록 CLI를 전역으로 설치합니다.

npm install -g @angular/cli
ng version

Windows PowerShell에서는 실행 정책 때문에 ng 스크립트가 실행되지 않을 수 있습니다. Angular 문서는 이 경우 Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned로 현재 사용자에게 로컬 스크립트 실행을 허용하는 방법을 안내합니다. 전역 설치를 원하지 않는다면 npx @angular/cli new my-app처럼 npx로 CLI를 실행해도 됩니다.

프로젝트 만들기

ng new는 작업 공간 폴더를 만들고, 의존성을 설치하고, Git 저장소까지 초기화합니다.

ng new my-app

CLI는 스타일시트 형식(CSS, SCSS, Sass, Less)과 서버 사이드 렌더링(SSR)·정적 사이트 생성 사용 여부 같은 몇 가지 질문을 합니다. 옵션으로 미리 답할 수도 있습니다.

개발 서버 실행

cd my-app
ng serve --open

앱은 http://localhost:4200에서 열립니다. 개발 서버는 파일을 지켜보다가 저장할 때마다 바뀐 부분만 다시 빌드하고 브라우저를 새로 고칩니다. 다른 포트를 쓰려면 ng serve --port 4300을 실행합니다. 생성된 package.json에는 npm start가 ng serve로 연결되어 있어 두 명령은 같은 일을 합니다.

첫 수정

루트 컴포넌트는 src/app에 있습니다. 최근 CLI는 파일 이름을 app.ts, app.html, app.css로, 클래스 이름을 App으로 만듭니다. 이전 버전으로 만든 프로젝트에서는 app.component.ts와 AppComponent이지만 구조는 같습니다.

import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {
  protected readonly title = signal('my-app');
}

템플릿 내용을 간단하게 바꾸고 저장해 봅니다.

<h1>Hello, {{ title() }}!</h1>
<p>Edit src/app/app.html and save to see the change.</p>
<router-outlet />

{{ title() }}은 title 시그널을 읽어 값을 화면에 출력합니다. <router-outlet />은 나중에 라우트를 추가했을 때 해당 페이지가 표시될 자리입니다.

코드 생성하기

CLI는 컴포넌트, 서비스 같은 구성 요소를 일관된 이름과 테스트 파일까지 갖춰 만들어 줍니다.

ng generate component hero-list
ng g service hero
ng g guard auth
ng generate --help

ng g는 ng generate의 줄임말입니다. --dry-run을 붙이면 어떤 파일이 만들어질지 미리 볼 수 있습니다. ng add는 라이브러리를 설치하고 설정 작업까지 실행합니다. 예를 들어 ng add @angular/material처럼 씁니다.

편집기 설정

• VS Code: 공식 Angular Language Service 확장을 설치합니다. 템플릿 안에서 자동 완성, 타입 검사, 정의로 이동을 쓸 수 있습니다.
• WebStorm 등 JetBrains IDE는 Angular 지원이 기본으로 들어 있습니다.
• Angular DevTools: 실행 중인 앱의 컴포넌트 트리를 살펴보고 변경 감지 성능을 분석하는 Chrome·Firefox 확장입니다.
• Prettier 같은 서식 도구로 저장할 때 자동 정리를 켜 두면 템플릿과 TypeScript 코드 모양을 일정하게 유지할 수 있습니다.

정리

• Node.js를 설치한 뒤 npm install -g @angular/cli로 Angular CLI를 설치합니다.
• ng new로 프로젝트를 만들고 ng serve로 http://localhost:4200에서 실행하면 저장할 때마다 자동으로 새로 고쳐집니다.
• 루트 컴포넌트는 src/app에 있으며, 템플릿은 시그널을 함수처럼 호출해 읽습니다.
• 새 코드는 ng generate로 만들고, 편집기에는 Angular Language Service를 설치합니다.