[Angular] IntelliJ에서 Angular-CLI를 이용한 프로젝트 만들기

 

 

 

Angular-CLI는 간단한 명령어를 사용하여 Angular 프로젝트 스캐폴딩(scaffolding)을 생성, 실행, 빌드할 수 있으며 Angular의 다양한 구성 요소를 선별적으로 추가할 수 있는 커맨드-라인 인터페이스(command line interface)이다. 개발용 서버를 내장하고 있어서 간단히 프로젝트를 실행시켜서 동작을 확인할 수 있다. Angular CLI는 Angular 프로젝트 스캐폴딩을 간단한 명령어로 생성해 주어 개발환경 구축에 소요되는 시간을 최소화할 뿐 아니라 표준 스타일 가이드를 제공한다.

 

Angular CLI가 지원하는 기능은 아래와 같다.

• Angular 프로젝트 생성
• Angular 프로젝트에 컴포넌트, 디렉티브, 파이프, 서비스, 클래스, 인터페이스 등의 구성 요소 추가
• LiveReload를 지원하는 내장 개발 서버를 사용한 Angular 프로젝트 실행
• Unit/E2E(end-to-end) 테스트 환경 지원
• 배포를 위한 Angular 프로젝트 패키징

 

 

일반적으로 Angular 프로젝트를 만들 때 VSCode를 많이 사용하지만, 전에 IntelliJ를 주로 사용해서 단축키나 환경설정 같은 것들이 익숙했기 때문에 IntelliJ로 Angular 프로젝트를 만들어보기로 했다.

나는 IntelliJ를 직접 돈을 내고 구매해서 사용했고(1년), 사용기간이 끝난 뒤 2017.1 버전으로 사용할 수 있어서 해당 버전을 사용하고 있다. 그래서 현재 나오고 있는 최신 버전과는 조금 다른 UI일 수 있다. (제공되는 라이브러리도 다름..ㅠㅠ)

 

 

IntelliJ에서 Angular-CLI를 이용해서 프로젝트를 직접 만들 수 있지만, 항상 마지막에 IntelliJ에서 자동으로 필요한 모듈과 설정들을 설치하는 부분이 제대로 이루어지지 않아서 cmd 창에서 프로젝트를 만드는 편이다. (AngularJS, Angular-CLI도 모두 설치되어있는데 안된다..)

 

 

1. terminal을 열어서 프로젝트가 위치할 경로로 이동한 뒤, Angular-CLI를 설치한다.

> npm install -g angular-cli 

 

 

 

2. 설치가 완료되면 프로젝트를 만든다.

> ng new 프로젝트명

 

프로젝트를 만든 뒤 IntelliJ를 켜서 해당 프로젝트를 open하면, 아래와 같이 setting되어있다.

 

 

 

3. IntelliJ 하단에 있는 terminal에서 프로젝트를 시작한다.

> ng serve

 

 

 

4. http://localhost:4200에 접속한다.

app이 정상적으로 동작하는 것을 볼 수 있다!

 

 

 

 

 

 

참고 사이트 : https://poiemaweb.com/angular-cli

Angular CLI | PoiemaWeb