[001] 앵귤러 (Angular) - Hello World

안녕하세요~ totally 개발자입니다.

 

앵귤러(Angular)는 프레임워크로 타입스크립트를 기반으로 모듈 및 Component로 구성이 됩니다. SPA(Single Page Application)의 구조를 가지고 있으며 개발에 필요한 전반적인 기능과 라이브러리가 자체적으로 제공이 되고 있습니다. 같이 차근차근 배워보면 좋을 것 같습니다. 다운로드 및 설치는 다른 포스팅 및 유튜브 강좌에서 많이 소개되어 있으므로 바로 본론으로 들어가보도록 하겠습니다.

 

 

처음 앵귤러 프로젝트를 열면 이렇게 여러가지 directory들이 보입니다. 그 중 src -> app -> app.component.html에 들어가서 모든 내용을 지우고 <h1>Hello World</h1>을 입력하고 터미널을 열어서 ng serve를 입력해줍니다.

 

localhost:4200으로 열어보면 Hello World가 잘 출력됨을 알 수 있습니다. 이 app.component.html의 Hello World가 어떻게 전달이 되어서 실행되는지를 같이 살펴보자면, 

 

app.component.ts에 들어가면 4번째 줄에 selector: 'app-root'이라고 이미 작성되어 있는 것을 확인할 수 있습니다.

 

 

그리고 app 폴더 바깥의 index.html을 들어가서 확인하면 11번째 줄에 <app-root></app-root>라는 HTML 태그가 있는 것을 확인할 수 있습니다. 그래서 이 app-root의 이름이 변경되면 당연히 Hello World가 출력되지 않게 됩니다. 다음 시간에 진행할 component에서도 이 selector를 그대로 활용하게 되므로 숙지하면 될 것 같습니다. 감사합니다~