프론트엔드들이 지향하는 지향점이 있을것이다. 그리고 생각보다 그 지향점은 공통점들이 있을것이다. 이런 생각으로 요새 웹 프론트엔드들을 관심있게 살펴보고 있다.

삽질을 하다보니까 어느정도 공부하면 좋을것 같은 윤곽이 잡혔는데,

• CSS 기본
• Foundation
• AngularJS

그래서 파일관리자 유틸 웹앱에 AngularJS를 적용해보고 있다.

Scope

자바스크립트를 살펴보면서 가장 어려웠던 점은, 호스트 환경에 대한 다양함이었다. 어떤 호스트환경은 전역객체로 요상한것을 제공해주고 다른 어떤것은 제공안해주고, 내가만든 모듈이 어디까지 퍼지는지 모르겠고 등등..

AngularJS에서는 그러한 어려움을 DI해주는 Scope으로 깔끔하게 해주는것 같다. 그래서 자바스크립트 초보자인 나에게 매우 좋았다.

Controller와 ng-model

Scope을 정하는 많은 Best practices 가 있겠지만, 나는 기본적으로 Controller 단위나 Directive 단위로 Scope을 정한다.

Controller 단위로 Scope을 정하는것은 간단한데, Scope을 만들 div에서 ng-controller로 Controller 이름을 정하고 angular module에서 더하는 controller에 해당 scope을 연결해서 사용하면 된다.

위 예제는 전체 body에 controller가 하나만 있는 상황인데, module에 추가한 “FileController”에서 해당 Scope 아래에 있는 ng-model=”fileAll”이라든가, ng-click=”checkAllFiles()”등을 다룰수 있다. (ng-init=”initList(2)”는 서버사이드에서 클라이언트 사이드 웹앱에게, “2”라는 상수 변수를 전달하기 위해 있는 메소드인데, 해당 Scope이 시작될때 처음으로 시작되는 init 함수이다)

Controller의 등록 및 구현은 위의 내용처럼 되어있다.

외부 모듈로 ab-base64를 사용하고 있고, AngularJS가 제공해주는 $scope, $window와 새로 추가한 base64모듈을 해당 controller안에서 사용하기 때문에, 위와 같은 모양으로 DI를 해주었다.

Scope안에서 사용했던 checkAllFiles()는 Controller안에서 저렇게 정의 및 구현해주면 된다.

Factory

ab-base64는 외부에서 구현한 서비스 객체인데, 이러한 서비스등을 Factory를 통해 구현할 수 있다.

위와 같이 dispatcher라는 서비스를 factory로 구현했다면, base64를 DI하여 사용했듯이 dispatcher도 DI하여 사용할 수 있다.

Directive

하나 혹은 몇개의 적은 controller를 사용하는데에는 html에서 scope을 정하여 사용하는것도 편리하기는 하지만, 만일 응집도가 전혀 다른 많은 모듈을 사용한다면, 하나의 html에 다 나타내는것은 한번에 봐야하는 정보량이 너무 많아 개발하고 관리하기 힘들것이다.

AngularJS는 directive라는 기능으로 이러한 모듈들을 Component화 할 수 있게 해준다.

result-loader 컴포넌트를 사용한 경우에 html에서는 위와 같이 깔끔하게 모듈화가 된다.

result-loader directive의 모습인데, template를 통해 UI를 결정할 수 있고 내부적으로 Controller가 있어서 위의 Controller와 동일하게 사용 가능하다. 모듈간의 통신은 서비스로 만든 resultActionCreators를 통해서 하는데, 데이터의 단방향 흐름 기법인 Flux를 차용했다.

AngularJS와 Flux

Clean Architecture는 매우 훌륭하게 여러 아키텍쳐들을 잘 정리한것 같다. 간단한 앱에서의 Flux 패턴 사용도 꽤 편리하다.(flux에 대해서는 예전에 간단히 적은글이 있다.) 관련된 자료를 사내 모임에서 간단하게 발표한것이 있다.