Angular CLI

• 간단한 명령어를 사용하여 Angular 프로젝트 스캐폴딩(scaffolding)을 생성, 실행, 빌드할 수 있으며 Angular의 다양한 구성 요소를 선별적으로 추가할 수 있는 커맨드-라인 인터페이스(command line interface)
• 개발용 서버를 내장하고 있어서 간단히 프로젝트를 실행시켜서 동작을 확인할 수 있다.

Angular CLI가 지원하는 기능

• Angular 프로젝트 생성
• Angular 프로젝트에 컴포넌트, 디렉티브, 파이프, 서비스, 클래스, 인터페이스 등의 구성 요소 추가
• LiveReload를 지원하는 내장 개발 서버를 사용한 Angular 프로젝트 실행
• Unit/E2E(end-to-end) 테스트 환경 지원
• 배포를 위한 Angular 프로젝트 패키징

Angular CLI 설치

• Angular CLI 는 Node 및 npm 을 사용하여 JavaScript 도구를 설치하고 실행하기 때문에 Node.js 설치가 필요하다.
• Angular CLI 설치

npm install -g @angular/cli

• ng help 명령어를 사용하면 Angular CLI 사용법을 참조할 수 있다.

ng help

프로젝트 생성 및 실행

• ng new CLI 를 통해 Angular 프로젝트를 생성할 수 있다.

ng new <project-name>

• 프로젝트 루트 위치에서 ng serve 명령어를 통해 프로젝트를 실행할 수 있다.
  • ng serve명령은 서버를 시작하고, 파일을 감시할 뿐만 아니라 해당 파일을 변경할 때 앱을 다시 빌드하고 브라우저를 다시 로드한다.
  • --open 옵션은 앱을 빌드하며 브라우저를 자동으로 실행해준다.

cd <project-name>
ng serve --open

• 브라우저 주소창에 http://localhost:4200/ 을 입력하여 Angular 개발용 서버에 접속할 수 있다.

프로젝트 구성요소 생성하기

• 프로젝트에 새로운 구성요소를 생성하기 위해서는 ng generate 명령어를 사용한다.
  • ng generate 명령어는 축약형 ng g와 동일하게 동작한다.

생성 대상 구성요소	명령어	축약형
컴포넌트	ng generate component component-name	ng g c component-name
디렉티브	ng generate directive directive-name	ng g d directive-name
파이프	ng generate pipe pipe-name	ng g p pipe-name
서비스	ng generate service service-name	ng g s service-name
모듈	ng generate module module-name	ng g m module-name
가드	ng generate guard guard-name	ng g g guard-name
클래스	ng generate class class-name	ng g cl class-name
인터페이스	ng generate interface interface-name	ng g i interface-name
Enum	ng generate enum enum-name	ng g e enum-name

컴포넌트 생성

ng generate component home 명령어를 실행하면 Angular CLI는 아래와 같이 동작한다.

• src/app 폴더에 home 폴더를 생성한다.
  • 컴포넌트는 URL 경로의 단위(화면 단위)가 될 수 있기 때문에 폴더로 구분된다.
• src/app/home 폴더에 4개의 파일을 생성한다.
  • home.component.html컴포넌트 템플릿을 위한 HTML 파일
  • home.component.css컴포넌트 템플릿의 스타일링을 위한 CSS 파일
  • home.component.ts컴포넌트 클래스 파일
  • home.component.spec.ts컴포넌트 유닛 테스트를 위한 스펙 파일
• --type 옵션을 사용하면 component를 page 타입으로 만들 수도 있다.
  • 프로젝트 진행시 page 와 component를 구분하기 위함이며, 파일 이름 구조만 다를 뿐 생성되는 파일은 같다.

ng generate component home --type=page

• 생성된 컴포넌트 클래스 파일 src/app/home/home.component.ts을 살펴보자.
  • 명령어에 지정한 컴포넌트 이름을 파스칼 표기법(PascalCase)으로 자동 변경하여 생성된다.

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

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [],
  templateUrl: './home.component.html',
  styleUrl: './home.component.scss'
})
export class HomeComponent {

}

• 메타데이터 객체의 selector 프로퍼티에 ‘app-home’이 설정되어 있다.
  • selector 프로퍼티는 컴포넌트를 마크업으로 표현할 때 사용하는 이름이다.
  • 예를 들어 루트 컴포넌트인 src/app/app.component.ts에서 home 컴포넌트를 사용하려면 아래와 같이 작성하면 된다.

<!-- src/app/app.component.html -->
<app-home></app-home>

• selector 프로퍼티의 기본 접두사는 app 이며 angular.json에서 확인할 수 있다.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app", // 기본 접두사
      ...
}

• angular.json의 prefix 프로퍼티값을 수정하면 이후 생성되는 컴포넌트의 셀렉터 접두사는 수정된 값으로 변경된다.
  • 만약 프로젝트 생성 단계에서부터 컴포넌트의 기본 셀렉터 접두사를 변경하고 싶다면 ng new 명령어로 프로젝트를 생성할 때 --prefix 옵션을 추가한다.

ng new my-app --prefix <prefix-name>

Tailwind CSS 설치하기

• Tailwind CSS 설치

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

• config 파일 수정

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,ts}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

• style 파일에 @tailwind 지시문 추가

./src/styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;

• 적용 확인

<h1 class="text-3xl font-bold underline">Hello world!</h1>

References

• PoiemaWeb
• https://angular.dev/tools/cli/setup-local