이 가이드에서는 Angular CLI로 Angular 개발 환경을 설정하는 방법을 알아봅니다. CLI 설치, 초기 워크스페이스와 시작용 앱 생성, 설정 확인을 위한 로컬 앱 실행 방법을 설명합니다.
로컬 환경을 설정하지 않고 Angular 체험하기
Angular를 처음 사용한다면 브라우저에서 Angular의 핵심을 소개하는 지금 시작하기부터 살펴보세요. 이 독립적인 튜토리얼은 온라인 개발을 위한 대화형 StackBlitz 환경을 활용합니다. 준비가 될 때까지 로컬 환경을 설정하지 않아도 됩니다.
시작하기 전에
Angular CLI를 사용하려면 다음 기술에 익숙해야 합니다:
명령줄 인터페이스(CLI) 도구 사용법과 명령어 셸의 기본 개념도 알고 있어야 합니다. TypeScript를 알고 있으면 도움이 되지만 필수는 아닙니다.
의존성
로컬 시스템에 Angular CLI를 설치하려면 Node.js가 필요합니다. Angular CLI는 Node와 패키지 매니저인 npm을 사용해서 브라우저 밖에서 JavaScript 도구를 설치하고 실행합니다.
Node.js를 다운로드하고 설치하면 npm CLI도 함께 설치됩니다.
Angular를 사용하려면 활성 LTS 또는 유지보수 LTS 버전의 Node.js가 필요합니다.
자세한 내용은 Angular 버전 호환성 가이드를 참고하세요.
Angular CLI 설치하기
Angular CLI를 설치하려면 터미널 창을 열고 다음 명령어를 실행하세요:
PowerShell 실행 정책
Windows 클라이언트 컴퓨터에서는 기본적으로 PowerShell 스크립트 실행이 비활성화되어 있기 때문에 위 명령어를 실행하면 오류가 발생할 수 있습니다. npm 전역 실행 파일에 필요한 PowerShell 스크립트 실행을 허용하려면 다음 실행 정책을 설정해야 합니다:
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned명령어 실행 후 표시되는 메시지를 주의 깊게 읽고 안내를 따르세요. 실행 정책을 설정하면 어떤 영향을 미치는지 이해해야 합니다.
Unix 권한
일부 Unix 계열 환경에서는 전역 스크립트의 소유자가 root 사용자이기 때문에 위 명령어를 실행하면 권한 오류가 발생할 수 있습니다.
sudo를 사용해서 root 사용자 권한으로 명령어를 실행하고, 비밀번호를 요청하면 입력하세요:
root 권한으로 명령어를 실행하면 어떤 영향을 미치는지 이해해야 합니다.
워크스페이스와 초기 애플리케이션 생성하기
Angular 앱은 워크스페이스 안에서 개발합니다.
새 워크스페이스와 시작용 앱을 생성하려면 다음과 같이 CLI의 ng new 명령어에 my-app이라는 이름을 지정해서 실행한 뒤, 포함할 기능을 묻는 질문에 답하면 됩니다:
ng new my-appAngular CLI는 필요한 Angular npm 패키지와 다른 의존성을 설치합니다. 이 과정에는 몇 분 정도 걸릴 수 있습니다.
CLI는 워크스페이스와 같은 이름의 새 디렉터리에 워크스페이스와 바로 실행할 수 있는 작은 환영 앱을 생성합니다. 이후 명령어가 이 워크스페이스에서 실행되도록 새 디렉터리로 이동하세요.
cd my-app애플리케이션 실행하기
Angular CLI에는 앱을 로컬에서 빌드하고 제공하는 개발 서버가 포함되어 있습니다. 다음 명령어를 실행하세요:
ng serve --openng serve 명령어는 서버를 시작하고 파일의 변경을 감지하며, 파일이 변경되면 앱을 다시 빌드하고 브라우저를 새로고침합니다.
--open(또는 -o) 옵션을 지정하면 브라우저에서 http://localhost:4200/을 자동으로 열어서 생성된 애플리케이션을 보여줍니다.
워크스페이스와 프로젝트 파일
ng new 명령어는 Angular 워크스페이스 폴더를 만들고 그 안에 새 애플리케이션을 생성합니다.
워크스페이스 하나에는 여러 애플리케이션과 라이브러리를 포함할 수 있습니다.
ng new 명령어로 생성하는 초기 애플리케이션은 워크스페이스의 최상위 디렉터리에 위치합니다.
기존 워크스페이스에 애플리케이션이나 라이브러리를 추가로 생성하면 기본적으로 projects/ 하위 폴더에 위치합니다.
새로 생성한 애플리케이션에는 최상위 컴포넌트와 템플릿의 소스 파일이 포함됩니다.
각 애플리케이션에는 컴포넌트, 데이터, 정적 리소스를 보관하는 src 폴더가 있습니다.
생성된 파일은 직접 편집하거나 CLI 명령어로 추가하고 수정할 수 있습니다.
컴포넌트, 디렉티브, 파이프, 서비스 등을 위한 새 파일을 추가하려면 ng generate 명령어를 사용하세요.
애플리케이션이나 라이브러리를 생성하거나 조작하는 ng add, ng generate 등의 명령어는 워크스페이스 안에서 실행해야 합니다.
반면 ng new와 같은 명령어는 워크스페이스를 새로 생성하기 때문에 워크스페이스 밖에서 실행해야 합니다.