Angular -프로젝트 생성과 기본 구조

 

 

안녕하세요.

 

저번시간에 Angular CLI 를 설치를 했었습니다.

 

오늘은 프로젝트를 생성해보고 기본 구조에 대해 알아보겠습니다.

 

저는 8.3.26 버전 입니다

 

그리고 tool은 VScode를 사용합니다

 

Angular CLI가 설치 안되신 분은 아래로 가셔서 설치 하시고 오시면 됩니다!

https://le-piee.tistory.com/25

 

 

 

 

---

 

1. 프로젝트 생성

 

 

 

첫번째로 프로젝트를 생성하려는 디렉토리로 이동을 합니다.

 

 

 

그 다음 ng new first-app ( ng new "프로젝트명" ) 명령어를 입력합니다

 

 

 

그러시면 앵귤러 라우팅을 추가 할 꺼냐는 말이 나오는데

Y를 하게되면 routing.module.ts 파일이 추가 됩니다.

N를 하게되면 파일이 생성되지는 않지만 

라우팅 기능이 app.module.ts 파일에 포함됩니다.

 

저는 Y로 하겠습니다. 

 

 

 

그 다음 어떤 스타일의 스타일시트를 사용할꺼냐는 말이 나옵니다.

저는 CSS로 하겠습니다.

 

 

 

이렇게까지 하게되면 Angular 프로젝트가 생성됩니다.

 

 

프로젝트가 잘 생성된 것 같습니다.

테스트를 통해 잘 생성이 되었나 확인해보도록 하죠

 

 

생성된 프로젝트로 디렉토리를 변경한 후,

ng serve first-app  ( ng serve 프로젝트명 ) 명령어를 입력합니다

 

빌드가 진행되고 4200포트에서 실행되고 있다고 나오네요.

저 주소를 복사한 후 주소창에 붙혀넣기 해줍니다.

 

 

 

잘 빌드가 된 것을 확인 할 수 있습니다.

 

 

cmd를 종료하시면 빌드가 종료됩니다

 

 

 

 

---

 

2. 기본 구조와 Hello World!

 

 

위에서 만든 프로젝트를 열어보면

상당히 복잡한 구조로 되어있습니다.

 

중요한건 angular.json 파일입니다.

이 파일이 cli에서 사용되어지는 configuration 파일입니다

또는 Angular 프로젝트에 대한 description이 담긴 파일이라고 생각하시면 됩니다.

 

 

 

index,.html

index.html 파일을 보면 app-root태그 말고는 별다른 태그가 없습니다.

하지만 Angular CLI가 스크립트나 ts파일들을 웹팩을 통해 번들링해서

빌드 할 때는 동적으로 추가를 시켜줍니다

 

angular.json

angular.json 파일을 보시면

아웃풋에 dist와 first-app 라는 폴더가 생기고

그 곳에 배포용 index.html과 스크립트가 만들어집니다.

 

그 다음 main.ts라는 스크립트 파일을 제일 먼저 실행합니다.

 

 

 

 

 

main.ts파일을 보시면 bootstrapModule이라는 것을 호출합니다.

PlatformBrowserDynamic가 하는 역할은

Angular는 우리가 실행하면 바로 실행되는게 아니라 

우리가 만든 코드를 한번 컴파일을 해서 자바스크립트 파일로 변환하는데

이것을 브라우저에서 동적으로 하겠다는 메소드

 

 

AppModule을 오른쪽 클릭하여 정의로 이동을 하면

 

 

app.module.ts파일이 열리는데

해당 파일은 클래스입니다.

 

근데 위에 @ngModule이라는 데코레이터를 볼 수 있는데.

이건 타입스크립트에서 제공하는 기능입니다.

 

저렇게 @NgModule이라는 데코레이터를 사용하면

이 클래스는 그냥 클래스가 아닌  AngularModule이라는 것을 정의한 클래스가 됩니다.

 

이 클래스를 보시면 데코레이터를 제외하면 클래스 안에 아무것도 없습니다.

말 그대로 이 모듈은 root모듈을 설정하는 클래스 입니다.

그 외에는 다른 기능이 없습니다.

 

 

AppComponent가 중요한데

이 코드는 index.html에 bootstrap을 넣어주겠다는 뜻입니다.

 

정의로 이동해보면

app-root에 selector가 되어서 index.html에 들어가게됩니다.

 

이것 또한 위에 @component 데코레이터가 적혀있습니다.

이것 또한 그냥 클래스가 아닌, Component클래스입니다.

 

 

위에서 언급했던 app-root 태그입니다.

 

 

component와 Module은 따로 정리해서 올리도록 하겠습니다.

 

 

 

templateURL과 styleUrls에 들어잇는 파일들을 열어보겠습니다.

 

 

 

엄청난 양의 코드들이 적혀있습니다.

 

 

 

 

 

 

검색을 통해 {{ title }} 를 찾아줍니다.

 

 

 

다시 app.component.ts로 돌아와서 

title에 있는 값을 바꿔줍니다!

 

 

 

 

ng serve를명령어 통해 빌드를 합니다.

 

 

 

빌드 완료 후, 접속해보시면 title이 바뀐 것을 확인 할 수 있습니다.

 

component와 html이 연결이 되어서 

 

component에 있는 값이 표현이 된 것입니다!