(2) 앵귤러 앱 첫 편집

저번에 angular 앱 생성 후 ng serve 명령어를 쳐서 이렇게 페이지를 띄웠습니다. 이제 이 페이지를 직접 수정해 보려고 합니다. ㅎㅎ

 

저기 my-first-app is running! 저기를 고칠게요!

생성한 앱 폴더를 들어가시면 수많은 파일들이 많을텐데요. 이 페이지의 파일은 src > app > app.component.html 입니다. 나머지 파일들이 뭔지는 나중에 자세하게 알아보겠습니당. 저 부분의 코드는 344 라인의

{{ title }} app is running! 이 부분입니다.

<span>{{ title }} app is running!</span>

이 {{ title }} 이 뭔지는 잘은 모르겠지만 프로젝트 생성할 때 이름을 넣어줬는데 그 이름과 엮여있나 보네요!

 

<span>this app {{ title }}</span>

this app {{ title }} 이라고 수정해보겠습니다. 아 ng serve 한 상태로 수정!

 

ng serve 를 종료하고 다시  하지 않아도 바뀌어 있는 걸 알 수 있어요. 파일을 자동으로 보고 프로젝트를 다시 빌드하기 때문에 껐다 키지 않아도 알아서 업데이트 해줍니다 ㅎㅎ 좋져?

 

이제 {{ title }} 을 바꿔봐야겠죠! 같은 폴더에 app.component.ts 를 보면 

우선 title = 'my-first-app' 을 title = 'my app' 으로 변경해보면 정상적으로 변경된 것을 볼 수 있습니다. 그런데 왜 이렇게 하냐, 그냥 my app 이라고 때려박으면 되지 않냐! 그 이유는 만약 my app 이라고 정적으로 때려 박아버리면 동적으로 변경이 될 수가 없기 때문입니다. 만약 title 의 값을 경우에 따라 변경시켜야 한다면 ts 파일에서 조건을 달아주면 되는 것이죠!

쉽게 예를 들어 title 이 'my app', 'my-first-app' 둘 중 하나가 랜덤으로 출력되게 하고 싶다. 이럴 경우

 

title = Math.random() > 0.5 ? 'my app' : 'my-first-app';

 

으로 고치면 새로고침 할 때마다 랜덤으로 출력이 되겠죠??

 

그런데 재미있는 건 크롬 기준 ctrl+u 눌러 페이지 소스를 보면

화면은 거창한데 비해 소스는 얼마 없습니다. 대신 이상한게 있어요 <app-root></app-root> 이건 뭘까요. 어디서 본 거 같은데.. 네 마자요. 위 app.component.ts에 selector: 'app-root' 요기서 봤네요. 이 소스는 src > index.html 에 있습니다. 

이 <app-root></app-root> 부분에 templateUrl: './app.component.html' 요놈이 들어가나 보네요! 와우 놀라워라~ 물론 둘 이상의 component 가 있을 수 있습니다. 그건 다음에 포스트 하도록 하겠습니다.

 

이상 angular 앱 첫 편집이었습니다. 수정사항 있으면 언제든지 알려주시기 바랍니다.