Angular + Node JS 시작하기

1. Angular 첫 시작

ng 는 Angular 의 약칭이며 명령어로 사용이 된다. 그리고 npm 은 Node Package Manager 의 약칭이며 이 또한 명령어로 사용이 된다.

Angular 를 사용하려면 우선은 Angular CLI (Command Line Interface)가 설치되어야 한다. https://cli.angular.io/ 주소로 들어가게 아래와 같은 화면이 나온다. 

위의 이미지와 같이 angular 를 설치하기 위해서는 npm 명령어를 사용하여 설치를 하게 된다. 그런데 npm 은 서두에 언급한것과 같이 Node Package Manager 명령어 이므로 Node JS (노드JS)를 설치를 해야한다. Node JS 를 설치하기 위해서는 https://nodejs.org/en/ 주소로 가서 설치파일을 다운받아 설치하면 된다.

2. Node JS 설치하기

Node JS 사이트로 들어와서 8.12.0 LTS 버전을 다운받아 설치한다. 참고로 LTS 는 Long Term Support 의 약칭이다. 이 버전을 받는 이유는 업데이트가 빈번하게 되면 유지보수가 힘들기 때문이다. 파일을 다운 받으면 해당 파일의 이름은 node-v8.12.0-x64.msi 이며 실행을 하게 되면 아래와 같이 4개의 분류로 설치가 된다. java 계열이므로 runtime (node.exe)설치가 되어야 하고 node package manager 가 기본적으로 설치가 된다. 그외에 온라인 문서 링크와 경로(Path)정보가 추가가 되어진다.

3. Node JS 설치 확인 및 Angular CLI 설치하기

Node JS 가 설치가 되었다면 설치가 정상적으로 확인이 필요한데 일반적인 윈도우 cmd 창으로도 확인이 가능하지만 윈도우10 부터는 Windows PowerShell 을 제공하고 있다. 이것을 이용하면 리눅스에서 사용하던 명령어 사용이 가능하다. 물론 모든 명령어는 아니겠지만 말이다. PowerShell 에서 npm 을 입력하고 엔터를 쳐보자. 그러면 아래와 같은 화면이 나와야 정상적으로 Node JS 가 설치가 되었음을 확인해 볼 수가 있다.

이제 Angular CLI 를 설치해보자.  https://cli.angular.io/ 홈페이지 첫 화면에 보았듯이 아래와 같은 명령어가 있다. 기본적으로 power shell 에 들어가면 C:\Users\계정명으로 경로가 되어있다. 다른 경로에서 작업하려면 cd, mkdir, ls 등의 명령어 사용법에 대해서 찾아보면 된다.맨 첫번째 명령어는 Angular CLI 를 설치를 한다.

npm install -g @angular/cli

4. 새로운 앱 생성 및 실행

그 다음으로는 작업공간(workspace)를 만들고 앱을 초기화 한다. 참고로 여기서 my-dream-app 은 다른 이름으로 변경이 가능하다.

ng new my-dream-app

위의 명령어를 치면 아래와 같은 질문을 물어보게 된다. 그러면 첫번째로 y 를 입력하고 엔터 그리고 SCSS 를 선택하고 엔터를 치면 된다. 물론 옵션이므로 다른 설정으로 변경은 가능하다.

? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? SCSS   [ http://sass-lang.com   ]

생성한 앱으로 이름으로 폴더가 하나 생성되게 되는데 해당 폴더로 이동을 한다.

cd my-dream-app

그리고 해당 앱을 실행시킨다. 이부분에서는 시간이 다소 걸릴 수 있다. 그리고 크롬 웹브라우저에서 주소창에  http://localhost:4200/ 을 입력하면 아래의 화면과 같이 앱의 화면을 볼 수가 있다. 하지만 Power Shell 은 종료를 하면 않된다. 종료를 하게 되면 해당 앱의 실행이 종료가 되기 때문이다.

ng serve

참고로 아래의 표는 ng 명령어에서 사용될 수 있는 옵션들이다.

add Adds support for an external library to your project.   build (b) Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.   config Retrieves or sets Angular configuration values.   doc (d) Opens the official Angular documentation (angular.io) in a browser, and searches for a given keyword.   e2e (e) Builds and serves an Angular app, then runs end-to-end tests using Protractor.   generate (g) Generates and/or modifies files based on a schematic.   [ component | directive | pipe | service | class | interface | enum | guard ]   help Lists available commands and their short descriptions.   lint (l) Runs linting tools on Angular app code in a given project folder.   new (n) Creates a new workspace and an initial Angular app.   run Runs a custom target defined in your project.   serve (s) Builds and serves your app, rebuilding on file changes.   test (t) Runs unit tests in a project.   update Updates your application and its dependencies. See https://update.angular.io/   version (v) Outputs Angular CLI version.   xi18n Extracts i18n messages from source code.