Ahn Jungho

안정호의 블로그입니다

AngularJS 사용 후기

Thursday, January 15, 2015

지난 주부터 AngularJS 튜토리얼을 보기 시작해서 Blinker라는 간단한 사이트를 만들었다. Angular를 처음 사용하면서 겪었던 경험과 고민을 정리해본다.

참고했던 자료

사이트를 만들면서 Angular에 대해 주의 깊게 읽은 글은 공식 튜토리얼Why Does Angular.js Rock?였고1 나머지는 궁금증이 생기면 검색에서 나오는 내용을 바탕으로 개발을 했다.

컨트롤러의 계층

ngRoute모듈을 이용해서 여러 페이지를 구성하려면 ngView 디렉티브에 랜더링할 컨트롤러를 명시해야 한다. 사이트의 규모가 커지면 한 페이지에서 여러 컨트롤러를 사용하게 되는데 컨트롤러의 계층을 어떻게 설계할 것인지 고민하게 된다. 예를 들면 사이트의 상단 헤더를 포함한 컨트롤러와 사이트의 메인 컨텐츠가 포함된 컨트롤러가 한 페이지에 있을 때 두 컨트롤러를 어떻게 구성하고 연결할지에 대한 문제다. 두가지 방법이 있다.

nested controller

<div ng-controller="parentCtrl">
    <nav>...</nav>
    <div ng-view></div>
</div>

ngView를 통해 랜더링할 컨트롤러를 다른 컨트롤러가 포함하는 방식이다. 이 때 자식 컨트롤러는 $parent를 이용해서 부모 컨트롤러의 스코프에 접근할 수 있다. 하지만 부모는 자식의 스코프에 접근할 수 없다.

multiple controller

<nav ng-controller="navCtrl">...</nav>
<div ng-view></div>

이 경우에는 두 컨트롤러의 스코프가 전혀 겹치지 않기 때문에 서로의 스코프에 직접 접근할 수 없다. 따라서 두 컨트롤러가 데이터를 공유하려면 Angular의 싱글턴 객체인 서비스를 사용해야 한다. 내가 만든 사이트에서는 이 방법을 사용했는데 서로 공유해야 하는 정보가 있을 때 서비스 클래스를 만드는 일이 귀찮기는 하지만 더 깔끔하게 컨트롤러의 로직을 분리할 수 있었다.

Angular 코드 내부에서 jQuery 사용

개인적으로 Angular보다 jQuery가 더 익숙하기에 Angular의 컨트롤러 코드안에서 jQuery로 DOM을 제어하고 싶은 생각이 들었다.

좋은 방법은 아닐 것 같지만 Angular로 어떻게 구현할지 감이 안오는 상황이 있어서 jQuery로 코드를 작성해봤다. 그리고 Angular 안에 jQuery 코드를 삽입하면 동작을 할지 호기심도 있었다. 직접 해보니 정상적으로 동작은 했지만 test를 통과하지는 못했는데, 확실하지는 않지만 Angular와 jQuery에서 함께 사용하는 $가 문제였던 것 같다. 그래서 결국은 Angular로 모두 작성했다. 한 사이트에서 Angular와 jQuery를 함께 쓰는 것은 상관없지만 섞어쓰지는 않는 것이 좋겠다.

외부 URL 삽입

Blinker는 Youtube 영상을 iframe으로 삽입했다. 이 때 유투브 URL을 Angular에서 변수로 가지고 있다가 템플릿에서 화면에 표시하려했는데 정상적으로 동작하지 않았다. 외부의 URL을 통해 화면에 표시하거나 HTML 코드를 삽입할 때는 ngSanitize를 사용하면 해결할 수 있다.

Angular에 대한 인상

지난 글에도 적었지만 Angular나 Backbone과 같은 Single-page Application에 막연한 반감이 있었다. 하지만 직접 개발해보니 생산성이 높아서 감탄하는 부분이 있었다. Blinker는 Youtube API를 사용했기 때문에 서버사이드 개발은 전혀 하지 않았지만, 만약 서버도 함께 개발해야 한다면 어떤 방향으로 개발해야할지 고민되는 면이 있기는 하다.

  1. Outsider님의 한국어 번역도 있다.