7. 개발환경설정
이 문서는 Angular CLI 툴을 실행할 수 있는 Angular 개발환경을 어떻게 설정하는지 설명한다. 사전지식, Angular CLI를 설치하는 방법, 워크스페이스와 애플리케이션을 생성하는 방법, 앱을 로컬 환경에서 실행하는 방법에 대해 알아보자.
1. 사전지식
Angular 프레임워크를 사용하려면 다음 내용을 미리 알고 있어야 한다:
TypeScript를 알고 있다면 도움이 되지만 꼭 필요한 것은 아니다.
Angular를 로컬 환경에서 설치하려면 이런 것들이 필요하다:
- Node.js
- npm 패키지 매니저
Angular를 실행하려면 현재 활성 LTS 버전이거나 유지보수 중인 LTS 버전의 Node.js가 필요하다. Node.js 설치방법을 확인하려면 nodejs.org를 참고한다. 시스템에 설치된 Node.js 버전을 확인하려면 터미널에서 node -v 명령을 실행하면 된다.
Angular, Angular CLI, Angular 애플리케이션은 모두 npm 패키지를 활용하는 방식으로 동작한다. 그래서 npm 패키지를 다운받기 위해 npm 패키지 매니저가 필요하다. 이 가이드 문서에서는 npm 클라이언트 커맨드라인 인터페이스를 사용하는데, 이 툴은 Node.js를 설치할 때 함께 설치된다. npm이 설치되었는지 확인하려면 터미널에서 npm -v 명령을 실행하면 된다.
2. Angular CLI 설치하기
Angular CLI를 활용하면 프로젝트나 애플리케이션, 라이브러리를 생성할 수 있고 개발 단계에 필요한 테스트, 번들링, 배포 과정을 간편하게 처리할 수 있다.
Angular CLI를 설치하려면 터미널에서 다음 명령을 실행하면 된다:
3. 워크스페이스, 기본 애플리케이션 생성하기
애플리케이션은 Angular 워크스페이스 영역에서 개발한다.
새 워크스페이스를 생성하면서 기본 애플리케이션도 함께 생성하려면 다음 순서대로 진행하면 된다:
AngularCLI로 ng new 명령을 실행하면서 my-app을 이름으로 지정한다:
ng new 명령을 실행하면 앱을 생성하기 위해 필요한 정보를 추가로 입력받는다. 이 때 엔터키를 입력하면 기본값으로 애플리케이션을 생성한다.
그러고 나면 Angular CLI가 앱 실행에 필요한 Angular npm 패키지를 설치한다. 이 과정은 몇 분 정도 걸린다.
npm 패키지가 설치되고 나면 바로 실행할 수 있는 상태로 워크스페이스와 기본 앱이 구성된다.
4. 애플리케이션 실행하기
Angular CLI는 서버 기능을 내장하고 있기 때문에 로컬 환경에서 앱을 빌드하고 서비스할 수 있다.
워크스페이스 폴더로 이동한다. 이 문서에서는 my-app 폴더이다.
ng serve 명령을 실행한다:
ng serve 명령을 실행하면 서버가 실행되며 애플리케이션 코드가 변경되는 것을 감지하고 그때마다 앱을 다시 빌드해서 서비스한다.
그리고 --open 옵션(또는 -o)을 붙이면 앱을 빌드한 후에 브라우저가 자동으로 실행되면서 http://localhost:4200/ 주소로 접속한다.
이 문서에서 설명한 과정을 그대로 따라왔다면 다음과 같은 화면을 볼 수 있다.
