Angular CLI로 개발 환경 만들기

Angular를 사용해보기 위해서 당연히 개발 환경 세팅을 해야겠죠.

역시나 준비된 프레임워크답게 Command Line Interface(CLI)를 제공하고 있습니다.

물론 요즘에는 Graphical User Interface(GUI)를 선호하는 추세도 있긴 하지만요.

그래도 프로그래머들은 CLI에 편하고 익숙해질 필요가 있습니다.

Linux, Git 등 많은 도구들이 CLI로 동작 하니까요.

네, 잡설이 길었습니다.

Prerequisite: Node.js

Angular를 설치하기 위해서 먼저 설치해야하는 녀석들이 있습니다.

Node.js 와 Node Package Manager(npm) 입니다.

사실 Node.js를 설치하면 npm도 자동으로 따라오니 설치해야하는 녀석이 되겠군요.

Node.js 홈페이지에서 Long Term Support(LTS)버젼 받아서 설치하면 됩니다.

간단한 건 넘어가도록 할게요.

그럼 Node.js가 설치되었다는 가정 하에 Angular 개발 환경을 만들어 보겠습니다.

cmd를 실행하여 Angular 개발 환경을 세팅하고자 하는 위치로 이동합니다.

npm install -g @angular/cli

위 명령어를 통해 angular cli를 설치할 수 있습니다.

npm install은 Node Package Manager가 특정 패키지를 설치하도록 하구요.

여기서 -g 옵션은 global을 의미하여 해당 패키지를 지속적으로 사용할 때 쓰입니다.

-g 옵션을 사용하면 %AppDATA%\npm\node_modules에 패키지가 저장됩니다.

Windows 7을 예로들면 경로는 아래와 같습니다.

C:\Users\John\AppData\Roaming\npm\node_modules\

그럼 이제 개발을 시작하기 위한 환경을 구성해보겠습니다.

예를 들어 applicationName이라는 폴더에서 작업을 한다고 가정해볼게요.

ng new applicationName

위 명령어를 통해 개발을 시작하기 위한 환경 세팅이 완료됩니다.

엄청 간단하죠?

applicationName폴더에 들어갑니다.

cd applicationName

그리고 아래 명령어가 정상적으로 실행되는지를 확인합니다.

ng serve

localhost의 4200포트로 접근하면 아래와 같은 화면이 보입니다.

Angular App 기본 화면

그럼 이제부터 시작입니다!