IntelliJ 에서 Angular 2 프로젝트 시작하기

Angular를 시작하기 위해 문서를 찾아보면 대부분 편집 툴로 Visual Studio Code 를 추천한다.

처음 접해보는 용어와 Node라는 런타임, 그리고 npm 사이에서 새로운 편집툴은 Angular의 진입 장벽을 더욱 높인다.

평소 사용하고 있는 IDE인 IntelliJ에서 Angular2(이하 Angular) 프로젝트를 생성할 수 있으면 조금이나마 진입 장벽을 낮출 수 있을것 같아서 내용을 정리한다.

해당 문서는 Window 환경을 기준으로 작성했다.

1. Node.js 설치

https://nodejs.org/ko/ 에 접속하여 stable 버전인 v6.10.3 LTS 를 다운받고 설치한다.

Node.js라는 개념이 쉽게 와닿지 않는다.  노드란 무엇일까?

"Node.js 는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임" 이라고 공식페이지에서 말한다.

런타임이란 프로그램이 실행되고 있을 때 존재하는 곳을 뜻하는데, 우리가 익숙하게 사용하고 있는 JRE를 떠올리면 쉽다.

JRE는 Java Runtime Environment의 준말로 우리가 개발한 JAVA 어플리케이션을 구동하기 위한 환경인 것이다.

이처럼 노드는 JavaScript로 개발된 어플리케이션을 구동하기 위한 환경이다.

또한 Node.js의 패키지 생태계를 지원하기 위해 npm 이란 것이 있다.

리눅스에서 흔히 사용하는 yum, apt-get, rpm과 비슷한 개념의 패키지 매니져이며 npm은 JavaScript를 위한 패키지 매니저라고 보면 된다.

Node.js를 설치할때 npm도 같이 설치 된다.

2. Angular CLI 설치 (https://cli.angular.io/)

cmd 창에서 

npm install -g @angular/cli@latest 

npm install --save-dev @angular/cli@latest

여기까지 설치 후 cmd 창에서 ng -v를 날려보면 다음과 같은 버전 정보가 나와야한다.

#최근 angular 패키지의 이름이 변경되었고, 이전버전을 디프리케이트 했다. 

골뱅이가 붙어서 시작하는게 변경된 버전이니 책이나 구버전 문서들을 볼때 주의해야겠다.

Angular 프로젝트 생성, 빌드, 테스트를 도와주는 command line interface(CLI)이다.

Angular CLI 로 프로젝트를 생성하면 각각 따로 설정해줘야하는 polyFill, tsConfig, typings, karma 등등 각종 의존성등을 설정해준다.

NodeJs를 처음 접하면 온갖 의존성 관리에 좌절하기 마련인데, 이러한 문제를 

Angular CLI는 가장 최적화된 상태로 프로젝트를 생성함으로써 진입 문턱을 낮춰준다.

이밖에 쉽게 테스트할 수 있는 로컬 서버과 테스트까지 제공해주니 각각 따로 세팅하는것 보다 Angular CLI 사용하는것을 추천한다.

3. IntelliJ 플러그인 설치

 

IntelliJ에는 Angular 프레임워크가 없다. (Web Storm 에는 있음)

플러그인으로 설치 하기 위해 IntelliJ Settings -> Plugins -> Browse Repositories -> AngularJS 를 검색 설치한다.

재시작 후 File -> New -> Project -> Static Web 을 보면 Angular CLI 를 확인할 수 있다. 

4. 프로젝트 생성

File -> New -> Project -> Static Web 을 보면 Angular CLI 후 Next를 클릭하면,

프로젝트 이름과 위치를 지정할 수 있으며, Node Interpreter 와 Angular CLI를 선택 할 수 있다. 

Node 는 1번 단계에서 설치한 node.exe.의 위치를, Angular CLI 는 npm으로 설치한 Angular CLI 패키지 위치를 지정해주면된다.

프로젝트 생성을 마치면 IntelliJ가 자동으로 Angular CLI에 new 명령어를 날려 필요한 라이브러리들을 다운받고 설치한다.

 

 

 

Angular CLI 위치가 목록에 보이지 않는다면 다음 사이트를 참조해보자.

https://www.jetbrains.com/help/idea/2017.1/using-angular.html

http://revf.tistory.com/entry/IntelliJ%EC%97%90%EC%84%9C-Angular2-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-with-Angular-CLI

5. output 세팅

AngularJs는 타입스크립트를 사용하기 때문에 타입스크립트를 자바스크립트로 컴파일 하는 빌드과정이 필요하다.

IntelliJ 터미널 또는 좌측 하단 npm 창에서 build 를 클릭하면 명시적으로 컴파일할 수 있다. 

이때 컴파일 결과물들을 임의의 위치에 저장하려면  angular-cli.json 설정을 수정하면 된다.

추후 스프링과 연동할때 필요할것으로 보이므로 관심이 있으면 수정해보자.

"outDir": "dist",  --> "outDir": "output",  

 

빌드 시작

 

빌드 성공

 

빌드 결과물

 

6. 프로젝트 실행

생성한 프로젝트를 실행하기 위해 Angular CLI 는 serve 명령어를 지원해준다.

IntellJ의 npm 창에는 start로 표시되어있는데, 클릭해보면 터미널 창에서 ng serve 명령어를 날리는 것을 볼 수 있다.

ng serve 를 하면 콘솔창에서 연결정보 (localhost:4200)를 확인 할 수있다.

(ng serve 는 ng build 를 포함한다.)

 

7. 실행 확인

별다른 설정을 하지 않았다면, ng serve로 시작한 어플리케이션은 라이브 코딩을 지원한다. (자동 빌드)

src/app/app.component.ts 의 title 변수를 변경하고 저장하면 자동으로 업데이트 되는것을 확인 할 수 있다.