그리고 HoneymonUserAuthenticationFailureHandler가 호출되면 /login?error={message}&email={email}의 형식으로 리다이렉트되도록 해뒀다. 그런데 암만 로그인 실패가 나도 /login?error= 로 리다이렉트 되지를 않는 것이다. 이 문제 떄문에 한참 씨름을 했다.
ViewController 에서 /login 요청에 대한 처리를 수행하기는 하지만 뒤에 전달되는 파라미터들을 모두 소거시킨다는 것을 이해하지 못한 것이다.
어떤 장애든지 기본적인 접근은 그 장애에 영향을 주는 설정부터 살펴보도록 하자. ㅡ_-);; 내가 허비한 시간 우짤꺼야!!
This is a shortcut for defining a ParameterizableViewController that immediately forwards to a view when invoked. Use it in static cases when there is no Java controller logic to execute before the view generates the response.
예외 메시지를 살펴보니 sendRedirect 메서드가 호출된 이후에 재호출하려고 하면 java.lang.IllegalStateException: Cannot call sendRedirect() after the response has been committed 가 출력되는 것이다. 호출된 이후에는 다시 호출할 수 없다는 뜻으로 변경할 수 없다는 뜻이다.
gulp.watch(global, function) - 전역변수의 변경사항이 생겼을 때 호출할 함수 정의
gulp.src(global) - 읽어올 위치
gulp.dest(folder) - 작성된 파일을 놓을 위치
gulp와 파일 연결하기(Concatenating)
gulp만 설치한다고 끝나는 것은 아니다. gulp 가 동작할 수 있도록 플러그인을 설치하고 gulpfile 에 태스크를 추가해야 한다. gulp-concat 플러그인이 필요하다.
$ npm install --save-dev gulp-concat
를 실행하고 나면 package.json 에 "gulp-concat": "^2.6.0" 가 추가된다.
이제 gulpfile 에 필요한 테스크를 추가한다.
// Include gulp
var gulp = require('gulp');
// Include plugins
var concat = require('gulp-concat');
//Concatenate JS File: src/js 에 있는 파일들을 main.js 로 연결
gulp.task('scripts', function() {
return gulp.src('src/js/*.js')
.pipe(concat('honeymon.js'))
.pipe(gulp.dest('build/js'));
});
// Default Task
gulp.task('default', ['scripts']);
gulp-concat 플러그인 설정을 포함하고 gulp.task 를 사용하여 기본 테스크에 script 를 추가했다. 이 태스크는 3단계 과정으로 처리가 된다:
gulp.src 에서 정의한 src/js 디렉토리에 있는 확장자 js 를 연결한다.
main.js 로 연결한다.
build/js 디렉토리에 main.js 파일을 밀어 넣는다.
gulp 를 이용한 JS 최소화하기
보통 자바스크립트를 배포할 때 최소화(Minify)하는 과정을 거치는데 gulp 에서는 이를 처리하는 플러그인이 있다. 그리고 나서 파일명 접미사로 .min 를 붙이는 rename 플러그인도 함께 설치한다.
$ npm install --save-dev gulp-unglify gulp-renmae
이제 gulpfile.js 에 scripts 태스크를 수정한다.
// Include gulp
var gulp = require('gulp');
// Include plugins
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
//Concatenate JS File: src/js 에 있는 파일들을 main.js 로 연결
gulp.task('scripts', function () {
return gulp.src('src/js/*.js')
.pipe(concat('honeymon.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('js'));
});
gulp 를 이용한 css 처리
gulp 를 이용해서 sass 파일을 컴파일하여 css 를 생성하는 태스크를 추가한다.
루비의 공식적인 sass 컴파일러를 설치한다.
$ npm install --save-dev gulp-ruby-sass
이제 gulpfile.js 에 sass 태스크를 수정한다.
// Include gulp
var gulp = require('gulp');
// Include plugins
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var sass = require('gulp-ruby-sass');
//Concatenate JS File: src/js 에 있는 파일들을 main.js 로 연결
gulp.task('scripts', function () {
return gulp.src('src/js/*.js')
.pipe(concat('honeymon.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('build/js'));
});
//Compile SASS
gulp.task('sass', function () {
sass('src/scss/style.scss', {style: 'compressed'})
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('build/css'));
sass('src/scss/honeymon/*.scss', {style: 'compressed'})
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('build/css/honeymon'));
});
// Default Task
gulp.task('default', ['scripts', 'sass']);
프로젝트에 사용하는 이미지 이동
이제 gulp 에서 많은 시간이 걸리는 작업이 남았다. 스크립트나 스타일시트 작업보다 더 오래 걸릴 것이다. gulp-imagemin 와 gulp-cache 를 이용해서 이미지를 최적화하는 작업을 진행한다.
$ npm install --save-dev gulp-imagemin gulp-cache
gulp-imagemin 와 gulp-cache 에 대한 의존성을 추가하고 image 태스크를 수정하자.
// Include gulp
var gulp = require('gulp');
// Include plugins
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var sass = require('gulp-ruby-sass');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
//Concatenate JS File: src/js 에 있는 파일들을 main.js 로 연결
gulp.task('scripts', function () {
return gulp.src('src/js/*.js')
.pipe(concat('honeymon.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('build/js'));
});
//Move image files
gulp.task('images', function() {
return gulp.src(srcPath + '/img/**/*')
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
.pipe(gulp.dest(buildPath + 'img'));
});
//Compile SASS
gulp.task('sass', function () {
sass('src/scss/style.scss', {style: 'compressed'})
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('build/css'));
sass('src/scss/honeymon/*.scss', {style: 'compressed'})
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('build/css/honeymon'));
});
//Build JavaScript, Images, Sass
gulp.task('build', ['scripts', 'images', 'sass']);
// Default Task
gulp.task('default', ['build']);
실제로 많이 걸린다..
➜ test-front-web git:(master) ✗ gulp
[14:27:52] Using gulpfile ~/workspace/honeymon/test-front-web/gulpfile.js
[14:27:52] Starting 'scripts'...
[14:27:52] Starting 'images'...
[14:27:52] Starting 'sass'...
[14:27:52] Finished 'sass' after 19 ms
[14:27:52] Finished 'scripts' after 147 ms
[14:27:54] Finished 'images' after 2.18 s
[14:27:54] Starting 'build'...
[14:27:54] Finished 'build' after 1.61 μs
[14:27:54] Starting 'default'...
[14:27:54] Finished 'default' after 1.5 μs
프로젝트에서 작성한 html 을 이동시키자.
html 을 옮기는 과정에서는 2가지 작업을 해야한다.
src html 에서 보고 있는 *.css 와 *.js 의 경로를 변경해야 한다.
build 로 이동시키면서 빌드 컴파일러된 *.css 와 *.js 를 보도록 변경해야 한다.
우선은 src 에서 build 로 이동처리를 먼저 하자.
// Include gulp
var gulp = require('gulp');
// Include plugins
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var sass = require('gulp-ruby-sass');
var buildPath = 'build/'
var srcPath = 'src/'
//Concatenate JS File: src/js 에 있는 파일들을 main.js 로 연결
gulp.task('scripts', function () {
return gulp.src(srcPath + 'js/*.js')
.pipe(concat('honeymon.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest(buildPath + 'js'));
});
//Move image files
gulp.task('images', function() {
gulp.src(srcPath + 'img')
.pipe(gulp.dest(buildPath + 'img'));
});
//Compile SASS
gulp.task('sass', function () {
sass(srcPath + 'scss/style.scss', {style: 'compressed'})
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(buildPath + 'css'));
sass(srcPath + 'scss/honeymon/*.scss', {style: 'compressed'})
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(buildPath + 'css/honeymon'));
});
gulp.task('html-copy', function() {
gulp.src([srcPath + 'index.html', srcPath + 'sample.html'])
.pipe(gulp.dest(buildPath))
gulp.src(srcPath + 'tx/*.html')
.pipe(gulp.dest(buildPath + '/tx'))
});
//Build JavaScript, Images, Sass
gulp.task('build', ['scripts', 'images', 'sass', 'html-copy']);
// Default Task
gulp.task('default', ['build']);
이제 gulp-html-replace 플러그인을 설치하고 html 을 옮기면서 stylesheet 와 script 를 처리해보자.
