[Angular 02] 앵귤러 시작하기

[Angular 02] 앵귤러 시작하기

1. 타입스크립트

타입스크립트는 Microsoft에 의해 개발/관리되고 있는 오픈소스 프로그래밍 언어이며, 자바스크립트를 확장한 언어입니다. 자바스크립트 ECMA(European Computer Manufactureres Association) Script 표준을 따르고 있습니다. 타입스크립트의 가장 큰 특징은 자바스크립트에 타입을 추가한 언어입니다.

<타입스크립트와 자바스크립트의 관계>

2. 타입스크립트 설치

MS는 타입스크리트를 오픈 소스로 공개하고 npm을 통해서 패키지로 손쉽게 설치할 수 있게 하였습니다.

npm install -g typescript

설치가 끝났다면 터미널에서 tsc 명령을 사용할 수 있습니다. tsc는 타입스크립트 소스를 자바 스크립트로 컴파일하기 위한 명령어 입니다. 'tsc --version'을 입력하여 버전이 출력되는지 확인해 보자.

tsc --version

3. 앵귤러 CLI

앵귤러 CLI는 프로젝트 생성부터 템플릿 코드 자동 생성, 개발 서버, 배포, 테스트 등 앵귤러 프로젝트를 진행하는 데 필요한 거의 모든 기능을 제공해 주는 만능 개발 도구이며, 표준 스타일 가이드를 제공합니다.

<앵귤러 CLI가 지원하는 기능들>

Angular 프로젝트 생성

Angular 컴포넌트, 디렉티브, 파이브, 클래스, 인터페이스 등의 구성 요소

Unit/E2E 테스트 환경지원

프로젝트 패키징 배포

앵귤러 CLI를 설치해 보자.

npm i @angular/cli -g

<앵귤러 CLI 설치 완료 화면>

설치가 완료되면 ng 명령어를 사용할 수 있습니다. 앵귤러 CLI는 터미널 환경에서 명령을 통하여 실행합니다. ng만 입력한 후 실행하면 터미널의 모든 명령어를 확인할 수 있습니다.

아래 명령어로 버전을 확인해보자.

ng --version

<앵귤러 CLI 설치 확인>

4. 프로젝트 생성

앵귤러 CLI의 프로젝트 생성 명령은 ng new 입니다. ng new 명령은 앵규럴 프로젝트에 필요한 기본 설정 파일뿐 아니라 바로 실행할 수 있는 수준의 기본 애플리케이션 코드까지 자동으로 생성해줍니다.

ng new hello-angular cd hello-angular

프로젝트 생성이 끝나고 나면 앵귤러 CLI로 생성된 프로젝트에는 자동으로 생성된 설정 파일 및 기본 코드가 있습니다. 이것은 Angular 스타일 가이드를 따른 구조, 네이밍 룰 등을 준수하여 생성된 것입니다.

5. 프로젝트 실행

프로젝트를 로컬에서 개발환경으로 실행하는 명령어는 ng serve 입니다. 명령을 실행하면 웹 서버를 실행하고 Webpack을 사용하여 소스를 번들링 합니다. 그럼 ng serve 명령을 실행해봅시다.

ng serve

명령이 실행이 끝나면 "Compiled successfully."가 출렵됩니다. 이제 애플리케이션을 실행할 수 있는 상태가 된 것입니다. localhost:4200으로 브라우저에서 접속해 보자. 프로젝트를 실행할 때 아래 옵션을 추가하면 자동으로 브라우저를 실행해줍니다.

ng serve --open

프로젝트 실행할 때 디폴트 호스트 및 포트 설정방법은 아래와 같습니다.

ng serve -host 0.0.0.0 -port 4300

참고 : 앵귤러 첫걸음

from http://lovelushi.tistory.com/2 by ccl(A) rewrite - 2020-03-07 08:21:19