2주차 진행을 하며 기존 웹 저장소를 별도로 구성해 완전히 별도의 애플리케이션을 구축할 예정이었으나 프러덕션 저장소의 업무로직의 복잡도와 지속적인 개발로 인한 신규 저장소 소스의 불일치 문제가 발생하였다. 따라서 완전히 새로운 저장소로 별도 애플리케이션을 개발하기 보다 Lagacy 코드를 리팩토링 하고 테스트 코드를 신규로 넣고 동시에 연속적인 빌드 환경을 구축하기로 한다.
1. 모듈 리팩토링
- AngularJS에서 하나로 묶여 있는 모듈을 여러개로 쪼개는 작업을 진행한다.
+ 다행히 기존 애플리케이션이 generator-angular-fullstack 으로 되어 있기 때문에 별도로 작업했던 내용을 적용한다.
+ jandiApp 모듈만 존재한다면 애플리케이션을 위한 추상화 모듈과 공통 모듈로 두가지를 생성한다.
- web_client 폴더는 jandi의 웹 애플리케이션 저장소 이름이다.
+ web_client/client 폴더 밑으로 components 폴더를 만들고 그 밑으로 app와 base 폴더를 만든다.
+ components/app는 애플리케이션과 연관이 있는 대표 모듈 폴더이다.
+ components/base는 jandi외에도 어디서나 사용 가능한 그리고 웹에서 bower로 다운로드한 모듈의 폴더이다.
$ cd web_client/client/
$ mkdir components && cd components
$ mkdir app
$ mkdir base
- app와 base에 대한 대표 모듈을 만든다.
+ components/app/app.framework.js 파일 생성
+ components/base/base.farmework.js 파일 생성
+ app.framework 모듈은 base.framework 모듈을 의존한다.
// app.framework.js 내역
(function() {
'use strict';
angular
.module('app.framework', ['base.framework']);
})();
// base.framework.js 내역
(function() {
'use strict';
angular
.module('base.framework', []);
})();
- 자바스크립트 로딩 우선순위를 지정한다.
+ index.html 파일의 app.js 보다 먼저 로딩 될 수 있도록 app.framework.js와 base.framework.js를 지정한다.
+ grunt serve 명령 수행시 app.framework.js와 base.framework.js 파일이 자동 inject 되지 않도록 ingore 설정을 한다.
+ watch와 inject에 경로를 설정하고 설정앞에 ! 주면 exclude하겠다는 의미이다.
// index.html 일부 내역
<!-- build:js({.tmp,client}) app/app.js -->
<script src="components/base/base.framework.js"></script>
<script src="components/app/app.framework.js"></script>
<script src="app/app.js"></script>
<!-- injector:js -->
<script src="assets/javascripts/angulartics-ga-custom.js"></script>
// Gruntfile.js 일부 내역
watch: {
injectJS: {
files: [
'<%= yeoman.client %>/{app,components}/**/*.js',
'!<%= yeoman.client %>/{app,components}/**/*.spec.js',
'!<%= yeoman.client %>/{app,components}/**/*.mock.js',
'!<%= yeoman.client %>/components/base/base.framework.js',
'!<%= yeoman.client %>/components/app/app.framework.js',
'!<%= yeoman.client %>/app/app.js'],
tasks: ['injector:scripts']
},
... 중략 ....
injector: {
options: {},
// Inject application script files into index.html (doesn't include bower)
scripts: {
options: {
transform: function(filePath) {
filePath = filePath.replace('/client/', '');
filePath = filePath.replace('/.tmp/', '');
return '<script src="' + filePath + '"></script>';
},
starttag: '<!-- injector:js -->',
endtag: '<!-- endinjector -->'
},
files: {
'<%= yeoman.client %>/index.html': [
[
'{.tmp,<%= yeoman.client %>}/assets/javascripts/*.js',
'{.tmp,<%= yeoman.client %>}/{app,components}/**/*.js',
'!{.tmp,<%= yeoman.client %>}/components/base/base.framework.js',
'!{.tmp,<%= yeoman.client %>}/components/app/app.framework.js',
'!{.tmp,<%= yeoman.client %>}/app/app.js',
'!{.tmp,<%= yeoman.client %>}/{app,components}/**/*.spec.js',
'!{.tmp,<%= yeoman.client %>}/{app,components}/**/*.mock.js']
]
}
},
모듈 리팩토링 준비가 되었다. 리팩토링할 대상을 선정한다. generator-angular-fullstack으로 애플리케이션을 생성하면 client/app/app.js 파일이 메인 파일이 된다. 먼저 app.js안에 애플리케이션 모듈 set과 config, run에 다양한 설정이 되어 있다면 이들을 base.framework 또는 app.framework으로 분리할 수 있는지 점검한다. 일반적으로 다음과 같은 상태로 app.js를 설정하고 한다.
위와 같이 app.js 한 곳에 다양한 설정들이 있는 것을 리팩토링을 통해 모듈단위로 나눌것이다. 이렇게 할 수 있는 것은 메인 모듈이 의존하는 모듈을 설정하면서 의존모듈을 로딩하면서 의존모듈의 config, run을 수행해 주고 그리고 자신의 모듈을 로딩하기 때문이다. app.js안에 app.framework과 base.framework 모듈의 의존관계를 설정하고 로그를 찍어보자. 먼저 의존관계의 모듈 config와 최종 애플리케이션 모듈인 jandiApp config를 로딩한 후 run을 다시 의존 모듈부터 수행시킨다. 즉, 애플리케이션을 최초 호출할 때 config, run 은 최초 한번 수행됨을 이용해서 각 기능의 초기화를 모듈단위로 나누는 것이다.
// app.js 의존관계 설정
angular.module('jandiApp', [
'base.framework',
'app.framework',
... 중략 ...]);
// config, run의 수행 순서 로그
=========> Base framework Module config
=========> App framework Module config
=========> jandiApp Module config
=========> Base framework Module run
=========> App framework Module run
=========> jandiApp Module run
2. Config 모듈 생성
최초 환경 설정 부분을 모듈로 만들어서 app.framework 모듈에 의존성을 설정해 보자. app.js의 run 메소드에는 api 버전과 서버주소에 대한 기본 환경 설정이 있다. 이것을 config.js라는 별도의 모듈로 빼서 환경설정에 대한 부분을 독립시킨다.
- config.js 모듈 파일 생성 : 최초 환경 셋업이 필요한 부분은 config 모듈의 run 메소드에 설정한다. 즉, app.js 있던것을 옮겨옴
- config.service.js 서비스 생성 : 해당 서비스를 통해 어디서나 주입을 받아 사용토록 한다.
$ cd web_client/components/app
$ mkdir config && cd config
// app.js 일부내역
app.run(function() {
$rootScope.server_address = configuration.api_address + "inner-api/";
$rootScope.server_uploaded = configuration.api_address;
$rootScope.api_version = configuration.api_version;
$rootScope.configuration = configuration;
});
// components/app/config/config.js 내역
(function() {
'use strict';
angular
.module('app.config', [])
.constant('configuration', {
name : 'local',
api_address : 'http://www.jandi.com/',
api_version : '2',
ga_token : 'UA-222222-1',
ga_token_global : 'UA-1111111-1',
mp_token : 'abcdefghijklmn',
base_url : '.jandi.io',
base_protocol : 'http://',
main_address : 'http://www.jandi.com/main/#/',
app_store_address : 'xxxx',
play_store_address : 'yyyy'
})
.run(run);
/* @ngInject */
function run($rootScope, config) {
// server address, server api version
config.init($rootScope);
}
})();
// components/app/config/config.service.js 내역
(function() {
'use strict';
angular
.module('app.config')
.service('config', config);
/* @ngInject */
function config(configuration) {
var self = this;
this.init = init;
function init($rootScope) {
// TODO : maybe remove next factoring
// compatibility for current version
$rootScope.server_address = configuration.api_address + "api/";
$rootScope.server_uploaded = configuration.api_address;
$rootScope.api_version = configuration.api_version;
// configuration constant service
configuration.server_address = configuration.api_address + "api/";
configuration.server_uploaded = configuration.api_address;
configuration.api_version = configuration.api_version;
// config service
self.server_address = configuration.api_address + "inner-api/";
self.server_uploaded = configuration.api_address;
self.api_version = configuration.api_version;
}
}
})();
config.js 에서 app.config 모듈을 run 하면서 config.service.js 를 주입받아 최초에 init()을 하고 있다. 파라미터로 $rootScope를 전달하는데 이는 초기 app.js에서 환경값을 $rootScope에 설정해서 사용하기 때문이다. 향후에는 $rootScope를 통해 접근하는 것을 없애고 config 서비스 통해 필요한 정보를 접근토록 할 예정으로 1차로 기존 버전의 애플리케이션 수정없이 환경설정으로 뺄 수 있는 상태로 리팩토링한다. AngularJS에서 초기 설정 정보를 접근하기 위한 원칙을 다음과 같이 세우면 좋다.
- AngularJS의 서비스는 singleton object 이므로 초기 값을 변수로 가지고 있고 접근자 API를 노출한다.
- AngularJS 서비스에 $scope, $rootScope를 절대로 주입하지 않는다. 오직 controller와 module.run 에서만 주입을 받아 사용한다.
- 따라서 서비스는 서비스를 주입받아 공통정보에 접근해야 한다.
원칙에 따라 하나씩 모듈로 쪼개고 app.js에는 업무적인 로직에만 집중할 수 있도록 만든다. 향후 components/app/* 모듈은 사용자가 사용하는 웹화면과 관리자가 사용하는 웹화면에 동시에 적용되는 애플리케이션과 관련된 공통 모듈이 들어갈 것이다. 현재까지 모듈의 의존관계 모습은 다음과 같이 app.js의 jandiApp 의존관계는 app.framework 밖에 없다. 하지만 서로 의존관계가 설정되어 있기 때문에 jandiApp 모듈의 AngularJS 모든 컴포넌트는 base.framework과 app.framework의 의존관계 설정 모듈의 컴포넌트를 주입받아 사용할 수 있게 된다.
// app.js 의존관계
angular
.module('jandiApp', [
'app.framework'
]);
// app.framework.js 의존관계
angular
.module('app.framework', [
'base.framework',
'app.config'
])
.run(run)
.config(config);
// base.framework.js 의존관계
angular
.module('base.framework', [
'ui.router',
'ui.bootstrap',
'gettext'
'ngCookies',
'ngResource',
'ngSanitize',
'ngAnimate'
])
좀 더 구조적인 관계의 모듈 설정을 통해 구조적인 애플리케이션을 개발하는 첫단추를 꽤었다.
'My Projects > Jandi' 카테고리의 다른 글
| [Jandi] 팀 커뮤니케이션 서비스 (0) | 2015.01.07 |
|---|
