Angular의 개발환경

Angular의 개발환경

Angular를 개발하기위해서 일반적인 개발환경에 대해 포스팅 합니다.

1. Nodejs 설치
2. 타입스크립트 설치
3. Angular프로젝트 구성

Nodejs 설치

Angular의 기본적인 개발환경은 Nodejs입니다. Nodejs는 자바스크립트 기반으로 서버개발이 가능하고 NPM을 이용하여 패키지관리까지 가능하기 때문에 많이 사용하고 있습니다.
먼저 nodejs홈페이지에 접속하여 최신버전의 설치파일을 다운로드하여 설치 합니다.
nodejs는 윈도우 환경 뿐만아니라 리눅스, macOS에서도 설치가 가능합니다.

NPM으로 패키지 설치

Nodejs가 설치되었다면 패키지 매니저인 NPM(Node Package Manager)도 자동으로 설치가 되어 있을 것입니다.
NPM의 설치된 패키지가 무엇무엇인지를 기록하는 메타파일인 package.json를 통해 해당 프로젝트의 패키지를 관리합니다.

CMD창에 아래의 명령어를 입력하면 프로젝트를 정의하여 package.json파일이 만들어 집니다.

C:\> npm init

NPM의 기본적인 명령어

npm을 통해 패키지를 설치하면 해당 프로젝트 폴더의 \node_modules폴더에 패키지가 설치 됩니다.

명령어	내용
npm install	package.json에 등록된 모든 패키지를 일괄 설치함
npm install 패키지명	해당 프로젝트에 패키지를 설치
npm install 패키지명 --save	해당 프로젝트에 패키지를 설치하고 package.json에 기록함 (dependencies 항목에 자동으로 포함)
npm install 패키지명 --save-dev	해당 프로젝트에 패키지를 설치하고 개발환경에서 사용하는것으로 package.json에 기록함 (devDependencies 항목에 자동으로 포함)
npm install -g 패키지명	해당 패키지를 전역에 설치
npm install -g 패키지명@버전	해당 패키지의 특정버전을 전역에 설치
npm install -g 패키지명@latest	해당 패키지의 최신버전을 전역에 설치
npm uninstall -g 패키지명	전역에 설치된 헤당패키지를 제거함
npm view 패키지명 versions	전역에 설치된 모든 패키지를 확인함
npm view 패키지명 version	전역에 설치된 최신 패키지를 확인함

Grunt 설치

Angular로 프로젝트를 진행하기 위해 일반적으로 Grunt나 Gulp 같은 태스크기반 빌드툴(자동화)을 사용해야 편리합니다.
저는 주로 Grunt를 사용하므로 Grunt에 대한 설치를 포스팅하겠습니다.

grunt-cli를 설치

npm을 이용해 전역으로 grunt의 cli를 설치합니다.

$ npm install -g grunt-cli

Grunt 설치

npm을 이용해 프로젝트에 grunt를 설치합니다.

$ npm install grunt --save-dev

package.json 파일 생성

위에 설명을 했듯이 package.json를 생성합니다.

Gruntfile.js 파일 생성

그리고 Gruntfile.js을 생성해야 합니다. 명령어는 따로없고 그냥 파일만들기로 만든후 아래의 코드를 붙혀넣으면 아주 기본적인 Gruntfile.js을 만들 수 있습니다.

module.exports = function(grunt) {

  // 프로젝트 환경설정.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // "uglify" task를 지원하는 플러그인 로드.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};

더 자세한 코드는 아래의 URL을 참조하시기 바랍니다.
grunt Configuring tasks

Bower 설치

Bower는 NPM과 비슷하게 Front-end 개발에 특화된 패키지관리툴 입니다.

$ npm install -g bower

Bower는 설치된 패키지를 package.json과 비슷하게 bower.json파일에 기록을 합니다.
사용법도 npm과 거의 흡사하게 사용합니다.

bower로 패키지 설치하기

$ bower install jquery --save-dev

설치된 bower 패키지는 \bower_components폴더에 저장이 됩니다.

타입스크립트 설치

Angular에서는 자바스크립트, Dart, 타입스크립트를 사용하여 개발할 수 있으며 그중에서 타입스크립트를 주력으로 사용합니다.
타입스크립트가 자바스크립트의 확장언어 이기 때문에 자바스크립트를 사용할줄 알면 쉽게 접근할 수 있습니다.

아래의 명령어로 설치할 수 있습니다.

```bash
C:> npm install -g typescript

타입스크립트가 설치되었다면 아래의 명령어로 컴파일을 할 수 있습니다.

 ```bash
C:\> tsc app.ts

아래는 기본적인 명령어 입니다.

명령어	내용
tsc app.ts	app.ts를 app.js로 컴파일을 하며 기본적으로 ES3로 컴파일 됩니다.
tsc app.ts -t ES5	app.ts를 특정 표준으로 컴파일을 합니다. 여기서는 ES5로 컴파일 됩니다.
tsc app1.ts app2.ts app3.ts	다중컴파일을 할 수 있습니다.
tsc app1.ts app2.ts --out app3.js	다중 파일을 app3.js로 하나의 파일로 합쳐서 컴파일 됩니다.
tsc app.ts -watch	파일에 변경사항이 있을때까지 대기하다가 변경이 일어나면 컴파일을 실행합니다.
tsc -help	타입스크립트의 도움말을 볼 수 있습니다.
tsc -v	타입스크립트의 버전을 볼 수 있습니다.

Angular cli 설치

Angular cli 설치를 통해 CMD창에서 텍스트로 다양한 명령을 수행할 수 있습니다.

```bash
C:> npm install -g @angular/cli

### Angular 기본적인 명령어

명령어 |  내용
---   | ---
**ng new PROJECT_NAME**                     | 기본 Angular 프로젝트를 생성
**ng serve**                                | 웹서브를 실행함
**ng serve --host 0.0.0.0 --port 4201**     | 웹서브의 호스트와 포트를 지정할 수 있음
**ng generate component my-new-component**  | Component 생성
**ng g component my-new-component**         | Component 생성과 동일 (generate를 g 로 단축해서 사용함)
**ng g component ../newer-cmp**             | Component를 상대경로에 생성
**ng g directive my-new-directive**         | Directive 생성
**ng g pipe my-new-pipe**                   | Pipe 생성
**ng g service my-new-service**             | Service 생성
**ng g class my-new-class**                 | Class 생성
**ng g guard my-new-guard**                 | Guard 생성
**ng g interface my-new-interface**         | Interface 생성
**ng g enum my-new-enum**                   | Enum 생성
**ng g module my-module**                   | Module 생성
**ng help**                                 | 도움말 을 볼 수 있음



### Angular cli의 업데이트

 ```bash
C:\> npm uninstall -g @angular/cli
C:\> npm cache clean
C:\> npm install -g @angular/cli@latest

Angular cli로 기본 프로젝트 설치

Angular-cli를 통해서 가장 기본적인 Angular 프로젝트를 생성 할 수 있습니다.

ng new my-project
cd my-project
ng serve

자세한 사용법은 Angular-cli 사이트에서 찾아 보시기 바랍니다.