로컬 개발환경, 워크스페이스 구성하기

로컬 개발환경, 워크스페이스 구성하기

이 튜토리얼을 시작하려면 Angular 앱 개발 환경인 Node.js®와 npm 패키지 매니저가 설치되어 있어야 합니다.

Node.js Angular 앱을 개발하려면 Node.js 10.9.0 이상의 버전이 필요합니다.\   - 버전을 확인하려면 터미널이나 콘솔창에서 node -v 명령을 실행해 보세요 - Node.js가 설치되어 있지 않다면 nodejs.org에서 다운받아 설치하면 됩니다.   npm 패키지 매니저link Angular와 Angular CLI, Angular로 동작하는 예제는 모두 npm 패키지 형태로 제공되는 라이브러리를 사용해서 동작합니다. 그리고 npm 패키지는 npm 패키지 매니저를 사용해서 설치합니다. 이 문서는 Node.js를 설치할 때 기본으로 설치되는 npm 클라이언트를 기준으로 설명합니다. npm 클라이언트가 설치되었는지 확인하려면 터미널이나 콘솔창에서 npm -v 명령을 실행해 보세요.

 

1. Angular CLI 설치하기

Angular CLI는 프로젝트를 생성하거나 애플리케이션을 생성할 때, 라이브러리를 생성하거나 테스트, 번들링, 배포와 같은 개발 과정 전반에 걸쳐 다양하게 활용할 수 있습니다.

Angular CLI를 전역 범위에 설치해 봅시다.

npm을 사용해서 Angular CLI를 설치하려면 터미널이나 콘솔창에서 다음 명령을 실행하면 됩니다

npm install -g @angular/cli

 

2. 워크스페이스 생성하고 앱 기본틀 구성하기

 

Angular 앱은 Angular 워크스페이스(workspace) 컨텍스트 안에서 개발합니다.

워크스페이스를 생성하면서 앱의 기본틀을 구성하려면 다음과 같이 작업하면 됩니다:

 

- Angular CLI 명령 ng new 명령을 실행하면 새 애플리케이션을 생성할 수 있습니다. my-app이라는 이름으로 생성하려면 다음 명령을 실행하면 됩니다:

ng new my-app

- ng new 명령을 실행하면 애플리케이션의 기본 틀을 구성하기 위해 필요한 정보를 프롬프트로 입력받습니다. 지금은 엔터키를 눌러서 모두 기본값으로 설정합니다.

 

이 과정이 끝나면 Angular CLI가 앱을 실행할 때 필요한 npm 패키지를 설치합니다. 이 과정은 몇 분 걸릴수도 있습니다.

ANgular CLI가 새 워크스페이스를 생성하고 애플리케이션 기본 틀도 구성했다면 이제 실행할 준비는 끝났습니다.

 

 

3. 애플리케이션 실행하기

 

Angular CLI는 간단한 서버 기능을 제공하기 때문에 로컬 개발환경에서 빌드한 앱을 간단하게 호스팅할 수 있습니다.

 

- 워크스페이스 폴더로 이동합니다. (이 경우에는 my-app)

 

- Angular CLI 명령 ng serve 명령을 실행하면 서버를 띄울 수 있습니다.  (--open 옵션도 함께 사용해 봅시다.)

cd my-app     ng serve ( --open )

ng serve 명령을 실행하면 서버가 실행되면서 파일이 변경되는 것을 감지합니다. 그리고 파일이 변경되면 변경된 내용으로 앱을 자동으로 재빌드합니다.

--open이나 -o 옵션을 사용하면 서버를 실행한 후에 자동으로 브라우저를 실행해서 http://localhost:4200/로 접속할 수 있습니다.

 

 

참고

https://angular.kr/guide/setup-local

불러오는 중입니다...