고객이 사용하는 브라우져중 IE는 v8이상만 지원토록 한다면, 이전의 블로그 소스는 IE8이상에서 제대로 보이지 않을 것이다. IE8 이상 및 Chrome, Safari, Firefox에 지원토록 애플리케이션 환경을 개선해 보자 (사실 IE8에서 돌아가면 다른 곳은 문제되지 않음)
1. Windows OS 에서 소스 셋업하기
- GitHub에서 환경파일을 클론하고 Windows 환경 설정이 없는 branch로 이동
- npm install 수행
$ git clone git@github.com:ysyun/SPA_Angular_SpringFramework_Eclipse_ENV.git
$ git checkout feature_mybatis_mapper
$ npm install .
- npm install 시에 imgmin 관련 오류가 발생한다. package.json과 Gruntfile.js 에서 이미지 압축설정을 제거한다
// package.json 에서 두가지 설정 제거 (분홍색)
"grunt-contrib-imagemin": "~0.2.0",
"grunt-svgmin": "~0.2.0",
// Gruntfile.js 에서 imagemin, svgmin 관련 설정 제거 (분홍색)
imagemin: {
.. 중략 ..
},
svgmin: {
.. 중략 ..
},
.. 중략 ..
dist: [
'coffee',
'copy:styles',
'imagemin',
'svgmin',
'htmlmin'
]
- Mysql 설치하고 사용자 생성
+ WEB-INF/spring/dbpool.properties에서 Database를 생성하고 사용자를 생성한다
+ 테스트 person table을 만든다
mysql> GRANT ALL
on <DBName>.*
to <UserName>@localhost
identified by '<Password>' with grant option;
mysql> create database <DBName>;
mysql> flush privileges;
mysql> update mysql.user set password = password('<password>')
where host='localhost' and user='<UserName>';
mysql> flush privileges;
mysql> \q
$ mysql -u <UserName> -p <DBName>
Enter password : *****
mysql> create table person( id int, name varchar(30));
- eclipse에서 Maven Project로 import를 해서 Tomcat 7 버전에서 수행하여 보면 아직은 제대로 나오지 않을 것이다.
2. jQuery 1.9.* 이상 사용할 때 ie 객체 null 에러 해결
- Angular.js와 함께 사용시 jQuery 버전이 1.2 이상을 경우 IE8 에서 window.ie 객체를 찾으면서 오류가 발생한다
- 해당 오류를 해결하기 위하여 jquery-migrate을 추가한다 (참조)
// bower를 통하여 bower_components 밑으로 설치한다
$ bower install jquery-migrate --save
// index.html 에 추가한다
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/jquery-migrate/jquery-migrate.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
3. CDN 문제 해결
- jquery 또는 angular와 같이 유명한 Javascript 모듈은 Grunt 빌드할 때 구글의 CDN 쪽으로 url을 자동 변경한다.
- Gruntfile.js에서 CDN 관련 내역을 삭제한다
// 분홍색 제거
cdnify: {
dist: {
html: ['<%= yeoman.dist %>/*.html']
}
},
// 분홍색 제거
grunt.registerTask('build', [
'clean:dist',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
'copy:dist',
'cdnify',
4. Bootstrap RWD 적용 문제 해결
- Bootstrap v3을 사용할 경우 IE8 에서 MediaQuery를 지원하지 않는 관계로 반응형 웹 디자인(RWD)이 적용되지 않는다 (참조)
- IE8 이상에서 MediaQuery 지원을 위하여 respond.js 를 설치한다
// bower 설치
$ bower install respond --save
// index.html 설정 : respond.js 설정은 bootstrap 밑으로 넣는다
<!-- build:js scripts/plugins.js -->
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/respond/respond.src.js"></script>
<!-- endbuild -->
5. Minification 으로 인한 Angular.js 애플리케이션 파일 오류 문제 해결
- Grunt 빌드를 통하여 main.js (controller 파일)이 minification 되면 $scope, $http등도 이름이 축약되어 IE에서 인식을 못 한다
// index.html 원본 소스
// 하기 <!-- --> 주석처리 된것을 Grunt가 인식하여 scripts 폴더 밑으로 sciprts.js 파일명으로 minification 된다
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
// dist/index.html 배포된 소스
<script src="scripts/d41d8cd9.scripts.js"></script>
- app.js 와 main.js 파일에서 $scope, $http 등과 같은 명칭이 축약되어 어떤것인지 알수 있게 배열 String(문자)로 명시해 준다 (참조)
// app.js 에서
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/resttest', {
templateUrl: 'views/resttest.html',
controller: 'RestTestCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
// main.js 에서
angular.module('SolarDasbhoardApp')
.controller('MenuCtrl', ['$scope', '$location', function ($scope, $location) {
$scope.activeWhen = function (value) {
return value ? 'active' : '';
};
$scope.path = function () {
return $location.url();
};
}])
.. 하위도 동일
6. HTML 검증 호환을 위해 html 태그 수정
- ng-* 로 되어 있는 속성을 전부 data-ng-*로 변경하여 HTML Validation 호환성을 확보한다 (참조)
- *.html 에서 data-를 전부 붙여준다
// index.html 에서
<body data-ng-app="SolarDasbhoardApp" data-ng-controller="MenuCtrl">
<ul class="nav navbar-nav">
<li data-ng-class="activeWhen(path()=='/')"><a href="#/">Home</a></li>
<li data-ng-class="activeWhen(path()=='/resttest')"><a href="#/resttest">RESTTest</a></li>
</ul>
<div class="container" data-ng-view=""></div>
// views/restest.html 에서
<form accept-charset="UTF-8" data-role="form">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="ID" data-ng-model="person.id" type="text" value="99">
</div>
<div class="form-group">
<input class="form-control" placeholder="Name" data-ng-model="person.name" type="text" value="dowon">
</div>
<input class="btn btn-lg btn-success btn-block" type="submit" value="Save" data-ng-click="save()">
<input class="btn btn-lg btn-success btn-block" type="submit" value="Update" data-ng-click="update()">
</fieldset>
</form>
.. 중략 ..
<tr data-ng-repeat="person in persons">
<td>{{person.id}}</td>
<td><a data-ng-click="delete(person.id)">{{person.name}}</a></td>
</tr>
7. IE에서 delete 예약어 문제 해결
- IE에서 수행을 할려면 여전히 main.js 에서 오류가 있다고 나올 것이다
- $http.delete에서 delete가 ie에서 예약어 이기 때문이다. 따라서 두군에 delete를 수정해 주어야 한다.
// main.js 에서
// 기존 코드
$scope.delete = function(id) {
console.log('Delete Person : ', id);
$http.delete(actionUrl + id).success(function () {
load();
});
}
// 변경 코드
$scope.deletePerson = function(id) {
console.log('Delete Person : ', id);
$http['delete'](actionUrl + id).success(function () {
load();
});
}
// views/resttest.html 에서 delete호출을 deletePerson 으로 변경
<td><a data-ng-click="deletePerson(person.id)">{{person.name}}</a></td>
8. ng-app 명명 문제 해결
- IE8이상에서 ng-app의 위치와 선언방법을 변경한다
// 형식
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
// 변경
<html class="ng-app:DasbhoardApp" id="ng-app" data-ng-app="DasbhoardApp" xmlns:ng="http://angularjs.org">
이제 Angular.js와 Bootstrap v3 을 IE8 버전 이상에서 사용해 보자
* 소스 : https://github.com/ysyun/SPA_Angular_SpringFramework_Eclipse_ENV/tree/feature_windows_ie8
* 하루종일 삽질해서 알아낸 IE8 내용
- 위의 소스를 IE8에서 수행하면 RestTest가 제대로 안될 것이다 (하기 내역은 feature_windows_ie8 에 첨부되지 않았음)
- 문제 : IE 8 초기버전에서 console 객체가 undefined 라는 것 (참조)
// 이런 내용이 들어가야 한다
/**
* Protect window.console method calls, e.g. console is not defined on IE
* unless dev tools are open, and IE doesn't define console.debug
*/
(function() {
if (!window.console) {
window.console = {};
}
// union of Chrome, FF, IE, and Safari console methods
var m = [
"log", "info", "warn", "error", "debug", "trace", "dir", "group",
"groupCollapsed", "groupEnd", "time", "timeEnd", "profile", "profileEnd",
"dirxml", "assert", "count", "markTimeline", "timeStamp", "clear"
];
// define undefined methods as noops to prevent errors
for (var i = 0; i < m.length; i++) {
if (!window.console[m[i]]) {
window.console[m[i]] = function() {};
}
}
})();
// bower 통하여 console-shim을 설치한다
$ bower install console-shim --save
// index.html에 선택적으로 설정한다
<!--[if lt IE 9]>
<script src="bower_components/modernizr/modernizr.js"></script>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<script src="bower_components/console-shim/console-shim.js"></script>
<![endif]-->
<참조>
- Angular.js 공식 IE 호환성 설정
- IE 버전에 대한 조건부 주석처리하기
- HTML5와 CSS3 지원을 위한 Modernizr 사용 이유
