< Web 개발 – AngularDart for Web >
결론부터 이야기 하면, AngularDart는 기존의 Angular 프레임워크를 이해하는 개발자에게 권장하기에 적합한 기술 입니다. Angular를 다뤄보지 않은 경우라면, Flutter 기반으로 개발을 하거나, Angular에 대한 이해를 한후 AngularDart를 다루는 것을 권합니다.
Dart 언어로 Web 어플리케이션을 만드는 방법으로 지금까지 두가지 방법을 설명 하였습니다. 첫째는 Flutter를 사용하는 방법으로, HTML/CSS에 대한 이해 보다는 Flutter 프레임워크로 모바일 프로그래밍 방식과 동일하게 Web 어플리케이션을 만드는 방법입니다. 두번째는 Dart for Web으로 dart:html 코어 라이브러리를 사용하여, HTML/CSS/JavaScript를 사용하는 방식에서 JavaScript 대신 Dart 언어가 사용되는 형태였습니다. 마지막은 Web 개발시 사용되는 Angular 프레임워크를 Dart 언어로 porting한 AnduglarDart 입니다. JavaScript로 개발된 Angular 프레임워크에 대응하는 Dart의 프레임워크라고 보면 됩니다. 공식 홈페이지는 https://angulardart.dev/ 입니다.
AngularDart는 현재 공식 릴리즈는 아니고, alpha 버전 입니다. Google은 Angular에 의존하는 미션 크리티컬 앱이 계속 제대로 작동하는지 확인하기 위해서, 각 버전의 AngularDart (alpha 릴리스 포함)를 철저히 테스트 하고 있다고 공표하고 있습니다. alpha 레이블은 API가 변경될 가능성이 있으며, 앞으로 나올 릴리스 (또는 이후 릴리스)로 인해 코드가 손상 될 수 있음도 경고하고 있으니 참조 바랍니다.
일단 가장 간단한 AngularDart 기반의 프로그램을 돌려보도록 하겠습니다. 이를 위해서, 공식 홈페이지의 Get Started를 방문( https://angulardart.dev/guide/setup )해 봅니다. 공식 버전이 릴리즈 되지 않은 이유인지, 여러 방법이 제시되고 있는데, 여기서는 가장 간단한 방법을 사용해 보고자 합니다.
첫번째로 AngularDart 기반의 프로그램의 기본 골격이 만들어져 있는 프로젝트의 압축 화일을 다운로드 받습니다. Get Started에 공개된 링크를 통해서도 다운로드 가능하지만, GitHub에서 다음 주소의 화일로 바로 다운로드 가능합니다. zip으로 압축된 화일이므로, 압축을 해제한 후, 희망하는 디렉토리에 위치시킵니다.
https://github.com/angular-examples/quickstart/archive/master.zip
두번째로 압축이 해제된 디렉토리 안으로 이동해서 CLI 커맨드로 pub get 명령을 수행하여, AngularDart를 포함한 패키지 화일을 다운 받아 설치할 수 있도록 합니다.
세번째로 webdev serve 명령으로 바로 실행을 해보도록 합니다. 그리고 http://localhost:8080으로 접속을 합니다. 이에 따른, 웹 브라우저 상에 단순히 아래와 같은 “Hello Angular” 문자열을 출력하는 기능입니다.
소스 코드를 살펴보면, 먼저 index.html의 body 부분이 다음처럼 되어 있는 것을 볼 수 있습니다. 특이하게 <my-app> 태그가 있는 것을 볼 수 있습니다.
<body> <my-app>Loading...</my-app> </body>
다음으로 main.dart는 다음과 같이 짧게 되어 있습니다. import를 통해서 AngulartDart 패키지와 이에 기반하는 어플리케이션의 template를 불러 오는 것을 볼 수 있습니다.
import 'package:angular/angular.dart';
import 'package:angular_app/app_component.template.dart' as ng;
void main() {
runApp(ng.AppComponentNgFactory);
}
사실 위의 두개 화일로는 왜 화면에 “Hello Angular”가 출력되었는지 이해를 하기 어렵습니다. 이 부분을 이해하기 위해서는 압축을 해제한 프로젝트 폴더안의 lib 서브 디렉토리에 위치한 app_component.dart 화일을 열어봐야 합니다. 이 화일의 내용은 다음과 같습니다.
import 'package:angular/angular.dart';
@Component(
selector: 'my-app',
template: 'Hello {{name}}',
)
class AppComponent {
var name = 'Angular';
}
AngularDart 어플리케이션은 components 들로 구성 됩니다. component는 HTML template와 component class의 조합으로, 웹 브라우저의 스크린에 나타날 내용을 제어하는 역할을 합니다. 주어진 예제를 토대로 설명하면, component는 모두 @Component 키워드로 시작 합니다. component 안의 selector 문법을 볼 수 있는데, 이 부분이 index.html에서 <my-app> 태그로 되어 있는 부분에 대해서, 어떻게 출력이 되는지를 결정합니다. 주어진 예제에서는 “my-app” 태그 부분을 제어하는 내용으로 ‘<h1>Hello {{name}}</h1>’를 사용한다는 의미에서 template 문법이 사용되는 것을 볼 수 있습니다. 정리해서 이야기 하면, index.html의 <my-app>을 웹 브라우저가 처리해야 하면, app_component.dart에서 “my-app”을 selector로 지정한 component를 찾는 것 입니다. 이렇게 해서, 매칭되는 component를 찾으면 정해진 내용으로 index.html의 해당 부분을 업데이트 하는데, 현재는 ‘<h1>Hello {{name}}</h1>’ 내용으로 출력을 하는 것 입니다. 이는 HTML 구문인데, 이슈는 {{ … }}으로 되어진 부분입니다.
이런 문법을 AngularDart에서는 interpolation binding 표현이라고 부릅니다. 어플리케이션 실행시, AngularDart는 {{name}}으로 되어진 부분을 component의 name Property의 값으로 대체하는데, 위의 코드를 보면, 이 값이 ‘Angular’ 문자열 인 것을 볼 수 있습니다. 따라서, 화면에 “Hello Angular” 문자열이 출력되게 됩니다. 따라서 var name = ‘Angular’; 구문을 var name = ‘World’;으로 변경해 봅니다. 그리고 나서 다시 화면을 업데이트 하면 다음과 같이 출력이 바뀐 것을 알 수 있습니다.
우리가 실행한 위의 프로그램을 공식 사이트에서는 “Starter App”이라고 하며, 공식 사이트인 https://angulardart.dev/tutorial/toh-pt0 에서 더 세부적인 설명을 볼 수 있습니다.
마무리
이 Tutorial에서는 Flutter를 주로 다루는 것을 방향으로 하고 있기에, AngularDart에 대한 소개는 이 정도로 마칩니다. AngularDart는 Angular 프레임워크를 선호하는 개발자라면 관심을 기울여 볼만한 기술입니다. Angular에 대한 지식을 갖춘 개발자라면 공식 사이트의 Tutorial( https://angulardart.dev/tutorial )을 따라해 보면서, 기존 Angular와 같은 부분과 다른 부분에 대해서 이해해 보도록 하기 바랍니다.
주의할 사항은 아직 공식 릴리즈가 아닌 만큼 업데이트 되는 상황을 수시로 모니터링 하면서 기술을 활용할 필요가 있습니다.
Creative Commons License (CC BY-NC-ND)