JAVAmugeo

• 컴포넌트란¿

컴포넌트는 Angular의 핵심구성요소로서 Angular 애플리케이션은 컴포넌트를 중심 CBD, Component Vased Development으로 구성된다. 컴포넌트의 역할은 애플리케이션의 화면을 구성하는 뷰View를 생성하고 관리하는 것이다.

컴포넌트는 독립적이고 완결된 뷰를 생성하기 위하여 "HTML, CSS, 자바스크립트를 하나의 단위로 묶는 것"

• 컴포넌트의 기본 구조

생성된 루트 컴포넌트 src/app/app.component.ts

컴포넌트는 1)임포트 영역과 2)@Component 데코레이터 영역 3)컴포넌트 클래스 영역으로 구분할 수 있다.

임포트 영역

컴포넌트에 필요한 의존 모듈을 임포트한다. 

@Component 데코레이터 영역

@Component 데코레이터에는 메타데이터 객체를 인자로 전달한다. 메타데이터 객체는 컴포넌트 생성에 필요한 정보(셀렉터, 템플릿, 스타일 정의 등)를 담고 있다.

컴포넌트 클래스 영역

컴포넌트 뷰를 관리하기 위한 로직을 담은 클래스를 정의한다. 컴포넌트 클래스는 컴포넌트의 내부 관심사인 뷰의 관리에 집중해야 하며 애플리케이션 공통 관심사는 서비스로 분리하여야 한다.

주의해야 할 것은 @Componenet 데코레이터 바로 아래에는 반드시 컴포넌트 클래스를 위치시켜야 한다는 점이다. @Component 데코레이터는 자신의 바로  아래에 위치한 클래스를 컴포넌트 클래스로 인식한다. 따라서 데코레이터와 데코레이터가 장식하는 클래스 사이에는 아무것도 존재해서는 안 된다.

출처 : Angular Essentials

• Angular CLI란¿

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

• 프로젝트 생성

$ ng new <project-name>

ex) $ ng new angular-project

프로젝트가 생성되면 스캐폴딩이 생성된다. Angular 스타일 가이드의 기본 애플리케이션 구조, 네이밍 룰, 코딩 컨벤션 등을 준수하여 생성된 것이다.

• 프로젝트 실행

프로젝트를 로컬 환경에서 실행(preview)하기 위해서는 ng serve 명령어를 사용한다.

$ ng serve <project-name>

ex) ng serve angular-project

--open(-o) 옵션을 사용하면 자동으로 브라우저 실행하여 준다. 아니면 브라우저를 열고 주소창에 localhost:4200을 입력하여 개발용 서버로 접속한다.

$ ng serve --open

ng serve 명령어를 사용한 프로젝트 실행 결과

• 프로젝트 구성요소 생성

출처 : Angular Essentials