kevin의 ing 이야기

Angular CLI 로 Angular 환경 셋팅하기 #1

Web 개발 (업데이트 없음) 2018. 10. 28. 14:59

Angular 시리즈 첫 포스트 시작합니다.

이번 포스트는 https://github.com/angular/angular-cli 를 참고해서 정리했음을 먼저 알립니다.

Angular CLI를 설치하기 앞서서 Node.js 가 필요합니다.

Node의 모듈로 Angular CLI가 작동하기 때문입니다.

Node 및 NPM의 설치 방법은 여기서는 따로 정리하지 않겠습니다.

(구글신에 이미 답이 많습니다. 검색하면 다 나와요.)

NPM까지 설치를 마치셨다고 가정하고 시작합니다.

터미널에서 다음과 같이 입력합니다.

$ npm install -g @angular/cli

(-g 옵션은 잘 아시리라 생각합니다.)

이러면 설치 끝입니다.

사용법을 시작하기 앞서 명령어가 어떤게 있는지 보겠습니다.

$ ng help

너무 많아서 보기도 힘드네요.

쭉 보시면 아시겠지만 명령어 자체 보다는 파라미터에 대한 설명이 대부분이죠?

ng 라는 cli 실행 프로그램 안에서 실행할 수 있는 명령은 다음과 같습니다.

명령	설명	비고
ng new	angular 프로젝트의 default 구성 및 세팅을 생성합니다.
ng serve	angular 프로젝트를 구동합니다.
ng generate	angular 프로젝트 안에서 사용할 모듈을 생성합니다.
ng build	app을 빌드할때 사용합니다. react-native 등을 연동할때 사용하는 것으로 보이네요.
ng completion	ng 명령어 실행시 자동으로 실행되는 스크립트를 지정하는 걸로 해석됩니다만, 정확하지는 않습니다.
ng doc	입력한 키워드에 대한 angular 공식 API 문서를 브라우저에 띄워줍니다.
ng e2e	프로젝트를 e2e 모듈로 테스트 할때 씁니다.
ng eject	app을 추출하고 설정 스크립트까지 만들어준다고 합니다. ng build와 같이 하이브리드 개발 때 사용하는 옵션인듯 합니다.
ng get	Angular CLI의 global 설정에서 입력한 키워드에 해당하는 키의 값을 보여줍니다.
ng help	도움말 기능입니다. 그냥 치면 위와 같은 참사(?)가 일어나므로 ng help <명령어> 같은 방식으로 입력합니다.
ng lint	lint라는 단어 자체가 이해가 안되서 이건 뭔말인지 모르겠네요;;;;;
ng set	Angular CLI의 global 설정을 변경할 때 사용합니다.
ng test	프로젝트에서 단위 테스트를 진행할때 사용됩니다.
ng version	Angular CLI의 버전을 출력합니다.
ng xi18n	source code에서 i18n 타입 메시지를 추출할때 사용합니다.

일단 프로젝트를 생성해줘야 겠죠?

다음 명령어를 입력합니다.

$ ng new first-app

이런식으로 쭉 만들어졌네요.

그럼 바로 돌려보겠습니다.

다음 명령어를 입력합니다.

$ cd first-app; ng serve --host 0.0.0.0 --open

브라우저에서 잘 뜨는지 보겠습니다.

» 프로젝트 실행 명령어에서 파라미터 중어 --host 0.0.0.0 이 있을겁니다.

모든 IP주소에서 들어오는 요청을 받겠다는 것으로 이해하시면 됩니다.

저 옵션을 생략할 경우 localhost 값이 default여서 AWS 등에서 테스트 하시는 경우 접속이 안된 것처럼 보일수 있습니다.

만약 요청받는 IP영역을 제한하고 싶으시면 네트워크의 게이트웨이 영역에 해당하는 IP주소를 찾아서 0.0.0.0 대신 입력하시면 됩니다.

2편에서 이어서 진행하겠습니다~