ProgrammingFrontendAngular

[Angular CLI] 명령어 사용 및 활용 방법

, , ,

Angular CLI는 개발자가 Angular 애플리케이션을 쉽게 생성, 유지 및 관리하는 데 도움이 되는 강력한 명령줄 인터페이스입니다. 개발 워크플로우를 간소화하고 생산성을 향상시키는 다양한 기능을 제공합니다.

이 글에서는 필수 Angular CLI 명령어와 이 명령어가 복잡하고 정교한 Angular 애플리케이션을 개발하는 데 어떻게 도움이 되는지 살펴보겠습니다.

Angular CLI 설치

Angular CLI를 사용하려면 시스템에 전역적으로 설치해야 합니다. Node.js와 npm이 설치되어 있는지 확인한 후 다음 명령어를 실행하세요.

1
npm install -g @angular/cli

새로운 Angular 애플리케이션 생성

새로운 Angular 애플리케이션을 만들려면 ng new 명령어 뒤에 프로젝트 이름을 사용하세요.

1
ng new my-app

이 명령어는 Angular 애플리케이션에 필요한 파일과 폴더를 포함하여 새 프로젝트 디렉터리를 생성합니다. 또한 필요한 종속성을 설치하고 로컬 개발 서버를 설정합니다.

실행

라이브 리로딩(live reloading)으로 로컬 개발 서버를 시작하려면 프로젝트의 루트 디렉터리로 이동하여 명령어를 실행하세요.

1
ng serve

기본적으로 http://localhost:4200/ 주소로 애플리케이션이 실행됩니다.

Component, Directive, Service 생성

Angular CLI를 사용하면 Component, Directive, Service, Pipe 및 Guard 와 같은 Angular 애플리케이션의 다양한 파일을 빠르게 생성할 수 있습니다.

  • Component 생성
1
2
3
ng generate component my-component
# or
ng g c my-component
  • Directive 생성
1
2
3
ng generate directive my-directive
# or
ng g d my-directive
  • Service 생성
1
2
3
ng generate service my-service
# or
ng g s my-service
  • Module 생성
1
2
3
ng generate module my-module
# or
ng g m my-module

이 명령어는 필요한 파일을 생성하고 해당 NgModule을 업데이트하여 새 요소를 등록합니다.

빌드

Angular 애플리케이션의 프로덕션 모드로 빌드를 하려면 다음 명령어를 실행하세요.

1
ng build --prod

이 명령어는 dist/ 폴더에 최적화된 빌드를 생성합니다.

테스트 실행 및 Linting

Angular CLI에는 테스트 실행 및 코드 Linting에 대한 지원이 내장되어 있습니다. 다음 명령어를 실행하세요.

  • Karma로 단위 테스트 실행
1
ng test
  • Protractor를 사용하여 end-to-end 테스트 실행
1
ng e2e
  • TSLint로 코드 Lint
1
ng lint

Custom 빌드 구성

Angular CLI는 angular.json 파일을 사용하여 프로젝트 구성을 관리합니다. 이 파일을 수정하여 출력 경로, 파일 이름, 최적화 옵션과 같은 빌드 설정을 사용자에 맞게 설정할 수 있습니다.

예를 들어, outputPath 속성을 업데이트하여 프로덕션 모드 빌드의 출력 경로를 변경할 수 있습니다.

1
2
3
4
5
6
"configurations": {
  "production": {
    "outputPath": "custom-output-folder",
    ...
  }
}

코드 복잡성 및 테마

Angular CLI를 사용하면 코드를 Component, Directive, Service로 모듈화하여 애플리케이션의 복잡성을 관리할 수 있습니다. 이는 깨끗하고 체계적인 코드베이스를 유지하는 데 도움이 되므로 애플리케이션을 더 쉽게 확장하고 수정할 수 있습니다.

테마 설정과 관련하여 Angular CLI는 테마를 직접 처리하지 않지만 CSS나 SCSS 또는 LESS와 같은 전처리기를 사용하여 테마를 프로젝트에 통합할 수 있습니다. Bootstrap, Bulma 또는 Angular Material과 같은 널리 사용되는 CSS 프레임워크를 사용하여 일관되고 시각적으로 매력적인 사용자 인터페이스를 만들 수도 있습니다.

결론

Angular CLI는 복잡하고 정교한 Angular 애플리케이션을 쉽게 개발하는 데 도움이 되는 강력한 도구입니다. 프로젝트 생성, 유지 관리를 위한 필수 명령어로 워크플로우를 간소화함으로써 고품질 코드를 작성하고 최고의 사용자 경험을 제공하는 데 집중할 수 있습니다.

Angular CLI와 그 기능을 계속 탐색하면서 생산성을 향상하고 강력하고 확장 가능한 애플리케이션을 구축할 수 있는 더 많은 방법을 찾을 수 있습니다.

Share