3.Angular 프로젝트 첫걸음

3.Angular 프로젝트 첫걸음

프로젝트 생성 이후 visual studio code에서 새로 만든 프로젝트를 열어보았습니다.

프로젝트를 열면 configuration에 관련된 많은 파일들이 있는데요.

가장 중요한 건 angular.json 파일로 angular.json 파일은 Angular프로젝트에 대한 전체적인 설정 파일이라고 볼 수 있습니다.

주요 옵션을 살펴보자면,

angular.json

index : 처음 시작하는 파일

outputPath : angular cli가 빌드시 프로젝트 내에서 사용되는 자바스크립트나 css파일들을 웹팩을 통해 번들링 한 후 그 번들링 한 파일을 동적으로 추가시키는 경로, 배포용 파일이 생성되는 곳

main : 어플리케이션에서 처음으로 호출하는 스크립트 파일

제일 먼저 시작되는 파일인 main.ts 파일을 확인해 보겠습니다.

main.ts

가장 밑에 platformBrowserDynamic().bootstrapModule(AppModule); 이렇게 메서드를 호출하고 있는데

platformBrowserDynamic() 이란 앵귤러는 작성한 코드 그대로 실행되는 것이 아니라 한번 컴파일을 해서 실제로 실행 가능한 자바스크립트 코드를 만들어내는데 이 작업을 브라우저에서 동적으로 진행하겠다는 것을 의미합니다.

bootstrapModule() 은 앵귤러 어플리케이션을 실행할 루트 모듈을 지정하는 것입니다.

루트모듈로 지정된 AppModule 파일을 살펴보겠습니다.

app.Module.ts

겉보기에는 그냥 클래스 파일 같지만 @NgModule 데코레이터를 발견할 수 있습니다.

@NgModule 데코레이터는 타입 스크립트에서 지원하는 기능으로서 이 데코레이터를 추가하면 해당 클래스가 그냥 클래스가 아니라 앵귤러 모듈을 정의한 클래스가 되게 합니다.

@NgModule 중간에 AppComponent를 부트스트랩 한다 (bootstrap: [AppComponent])라고 써져있는데

이 의미는 해당 컴포넌트를 index.html에 넣어주겠다는 것이다.

app.component.ts

AppComponent 파일을 보면 AppComponent가 app-root라는 셀렉터가 되어있고

이것이 현재 비어있는 index.html의 app-root태그 안에 추가가 되면서 그려지게 될 것입니다.

AppComponent 파일도 그냥 클래스 같지만 위에 @Component라는 데코레이터가 추가되면서 컴포넌트 클래스로 만들어줍니다.

app.component.html

appComponent의 templateUrl로 지정되어있는 app.component.html를 열어보았습니다.

중간에 이중 중괄호 안에 있는 title을 보았는데 이건 AppComponent에 정의된 title 속성입니다.

어떻게 출력되는지는 빌드 후 http://localhost:4200/ 에서 확인하실 수 있습니다.

first-project app is running

만약 AppComponent의 title 값을 바꾼다면 app.component.html의 title의 값 또한 바뀌고 실제 화면에서도 바뀐 값이 적용이 됩니다.

title의 값을 hello angular로 변경 화면에 변경된 값이 적용된 모습 확인

이렇게 값이 따라 바뀌는 걸 보면 AppComponent의 title과 app.component.html의 title은 바인딩되었다고 할 수 있습니다.

from http://choonsdevlog.tistory.com/4 by ccl(A) rewrite - 2021-10-13 08:27:33