O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Front-end 
Development Process 
2014.11.30 
Outsider 
Adieu 2014, 봄싹 
어디까지 개선할 수 있나
0VUTJEFS 
$ http://blog.outsider.ne.kr 
# outsideris@gmail.com 
" @outsideris 
! outsideris
게으른 개발자 
https://www.flickr.com/photos/frosted_peppercorn/2411572004
어려운 작업을 할 때 
항상 게으른 사람을 
선택합니다. 
게으른 사람은 
가장 쉬운 방법을 
찾기 때문입니다. 
- Bill Gates 
https://www.flickr.com/photos/loritingey/350...
https://www.flickr.com/photos/scottlynchnyc/10546981384 
Automation
https://www.flickr.com/photos/oldpatterns/6252459830 
서버사이드에 비해 
많이 뒤쳐져 있었다
의존성 관리 
https://www.flickr.com/photos/ciat/4106461308
<!DOCTYPE html> 
<html> 
<head> 
<title>SpringSprout Demo</title> 
</head> 
<body> 
<h1>SpringSprout Demo</h1> 
</body> 
<...
어떻게 사용하고 있나요? 
% 라이브러리 
사이트 검색
어떻게 사용하고 있나요? 
% 라이브러리 
사이트 검색 
프로젝트 폴더에 
다운로드 &
어떻게 사용하고 있나요? 
% 라이브러리 
사이트 검색 
' HTML에 
& 
프로젝트 폴더에 
코드 추가 
다운로드
<!DOCTYPE html> 
<html> 
<head> 
<title>SpringSprout Demo</title> 
<link href="./css/bootstrap.css" 
rel="stylesheet"> 
</...
Package Manager 
http://browserify.org/ 
http://bower.io/
$ bower install jquery bootstrap 
jquery#2.1.1 components/jquery 
bootstrap#3.3.1 components/bootstrap 
└── jquery#2.1.1 
...
<!DOCTYPE html> 
<html> 
<head> 
<title>SpringSprout Demo</title> 
<link href="./components/bootstrap/dist/css/bootstrap.c...
Pagage Manager를 쓸 때의 장점 
( 라이브러리 파일을 형상관리도구에 넣지 않는다 
CSS나 JS가 아닌 컴포넌트 단위로 관리한다 
버전만 관리하면서 필요에 따라 업데이트하기 쉽다. 
보통은 min 버전이 함...
웹서버 실행 
https://www.flickr.com/photos/110751683@N02/13792583873/
어떻게 사용하고 있나요? 
) 로컬 파일을 브라우저에서 실행 
C:Documents/Project/index.html
어떻게 사용하고 있나요? 
) 로컬 파일을 브라우저에서 실행 
C:Documents/Project/index.html 
* Apache, nginx
어떻게 사용하고 있나요? 
) 로컬 파일을 브라우저에서 실행 
C:Documents/Project/index.html 
Apache, nginx 
* 
+ 
WAS 실행(Tomcat 등)
어떻게 사용하고 있나요? 
) 로컬 파일을 브라우저에서 실행 
C:Documents/Project/index.html 
Apache, nginx 
* 
+ 
WAS 실행(Tomcat 등) 
, python -m Simp...
http://gruntjs.com 
http://gulpjs.com
module.exports = function(grunt) { 
'use strict'; 
// 프로젝트 설정 
grunt.initConfig({ 
}); 
}; 
1 
2 
3 
4 
5 
6 
7 
8 
9 
Gru...
grunt-contrib-connect 
grunt-contrib-watch
grunt.initConfig({ 
connect: { 
server: { 
options: { 
port: 8000, 
base: '' 
} 
} 
}, 
watch: {} 
}); 
1 
2 
3 
4 
5 
6 
...
$ grunt connect watch 
Running "connect:server" (connect) task 
Started connect web server on http://0.0.0.0:8000 
Running...
빌드도구를 쓸 때의 장점 
( 프로젝트 별로 필요한 환경을 자동화 
프로젝트내에서 자동화된 환경을 공유 
다른 개발도구에 종속되지 않는다 
CI서버 등에서 사용할 수 있다 
( 
( 
(
코드의 품질 관리 
https://www.flickr.com/photos/wiertz/10248755515
CSS LINT 
ESLint 
https://github.com/yaniswang/HTMLHint 
http://twitter.github.io/recess/ 
http://csslint.net 
http://esli...
.profile { 
height: 400px; 
} 
.learn_more { 
-ms-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); 
-webkit-box-shadow: i...
$ recess style.css 
Analyzing the following files: style.css 
FILE: style.css 
STATUS: Busted 
FAILURES: 2 failures 
Under...
var temp; 
function sum(a, b) { 
return a + b 
} 
1 
2 
3 
4 
5 
common.js
$ jshint util.js 
util.js: line 4, col 3, 
Missing "use strict" statement. 
util.js: line 4, col 15, 
Missing semicolon. 
...
/* @flow */ 
function foo(x) { 
return x*10; 
} 
foo("Hello, world!"); 
1 
2 
3 
4 
5 
6 
7 
hello.js
$ flow check hello.js 
hello.js:7:5,19: string 
This type is incompatible with 
hello.js:4:10,13: number 
Found 1 error
grunt.initConfig({ 
recess: { 
dev: { 
src: ['src/main.css'] 
} 
}, 
jshint: { 
dev: { 
src: ['js/**/*.js'], 
} 
}, 
flow:...
grunt.initConfig({ 
recess: { dev: { … } }, 
jshint: { dev: { … } }, 
flow: { dev: { … } }, 
watch : { 
css: { 
files: ['c...
pre-processor 
https://www.flickr.com/photos/photomonkey/5669185
http://sass-lang.com/ 
http://lesscss.org/ 
http://learnboost.github.io/stylus/ 
http://coffeescript.org/
grunt.initConfig({ 
less:{ 
dev: { 
files: { 
'css/style.css': 'css/main.less' 
} 
} 
}, 
watch : { 
less: { 
files: ['css...
어떻게 사용하고 있나요? 
' 코드 수정
어떻게 사용하고 있나요? 
' 코드 수정 
- 브라우저로 이동
어떻게 사용하고 있나요? 
' 코드 수정 
브라우저로 이동 
F5로 새로 고침 
. 
-
어떻게 사용하고 있나요? 
' 코드 수정 
/ 변경 내용 확인 
브라우저로 이동 
F5로 새로 고침 
. 
-
grunt.initConfig({ 
connect: { 
server: { 
options: { 
port: 9999, 
base: '' 
} 
} 
}, 
watch: { 
less: { 
files: ['css/**...
유닛테스트 
https://www.flickr.com/photos/photomonkey/5669185
assert test framework test runner
expect(foo).to.be.a('string'); 
expect(foo).to.equal('bar'); 
expect(foo).to.have.length(3); 
expect(beverages) 
.to.have....
describe('Array', function() { 
describe('#indexOf()', function() { 
it('should return -1', function() { 
// assert 
}) 
}...
function plus(a, b) { 
return a + b; 
} 
function minus(a, b) { 
return a - b; 
} 
function times(a, b) { 
return a * b; 
...
describe('util', function() { 
describe('plus', function() { 
it('should return 3', function() { 
var result = plus(1, 2);...
karma-runner 
( 필요한 파일 로딩 
설정된 브라우저 실행 후 테스트 
테스트 결과를 Socket.IO로 콘솔에 출력 
파일 수정할 때마다 재 실행 
( 
( 
(
작성한 자동화 스크립트는 최대한 써먹자
배포 
https://www.flickr.com/photos/bribri/8731091993
<!DOCTYPE html> 
<html> 
<head> 
<title>SpringSprout Demo</title> 
<link href="/components/bootstrap/dist/css/bootstrap.cs...
어떻게 사용하고 있나요? 
0 CSS/JS 병합
어떻게 사용하고 있나요? 
0 CSS/JS 병합 
1 CSS/JS 압축
어떻게 사용하고 있나요? 
0 CSS/JS 병합 
HTML에서 링크 변경 
CSS/JS 압축 
' 
1
grunt.initConfig({ 
useminPrepare: { 
html: 'index.html', 
options: { 
dest: '.' 
} 
}, 
usemin: { 
html: 'index.html' 
} ...
<!DOCTYPE html> 
<html> 
<head> 
<title>SpringSprout Demo</title> 
<!-- build:css /dist/css/style.css --> 
<link href="/co...
Thank you! 
예제: 
https://github.com/outsideris/presentations/ 
tree/master/14-11-30-adieu-springsprout2
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나
Próximos SlideShares
Carregando em…5
×

Front-end Development Process - 어디까지 개선할 수 있나

48.206 visualizações

Publicada em

Adieu 2014, 봄싹 세미나(http://adieu2014.github.io/)에서 발표한 발표자료

Publicada em: Tecnologia
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

Front-end Development Process - 어디까지 개선할 수 있나

  1. 1. Front-end Development Process 2014.11.30 Outsider Adieu 2014, 봄싹 어디까지 개선할 수 있나
  2. 2. 0VUTJEFS $ http://blog.outsider.ne.kr # outsideris@gmail.com " @outsideris ! outsideris
  3. 3. 게으른 개발자 https://www.flickr.com/photos/frosted_peppercorn/2411572004
  4. 4. 어려운 작업을 할 때 항상 게으른 사람을 선택합니다. 게으른 사람은 가장 쉬운 방법을 찾기 때문입니다. - Bill Gates https://www.flickr.com/photos/loritingey/350043329
  5. 5. https://www.flickr.com/photos/scottlynchnyc/10546981384 Automation
  6. 6. https://www.flickr.com/photos/oldpatterns/6252459830 서버사이드에 비해 많이 뒤쳐져 있었다
  7. 7. 의존성 관리 https://www.flickr.com/photos/ciat/4106461308
  8. 8. <!DOCTYPE html> <html> <head> <title>SpringSprout Demo</title> </head> <body> <h1>SpringSprout Demo</h1> </body> </html> 1 2 3 4 5 6 7 8 9
  9. 9. 어떻게 사용하고 있나요? % 라이브러리 사이트 검색
  10. 10. 어떻게 사용하고 있나요? % 라이브러리 사이트 검색 프로젝트 폴더에 다운로드 &
  11. 11. 어떻게 사용하고 있나요? % 라이브러리 사이트 검색 ' HTML에 & 프로젝트 폴더에 코드 추가 다운로드
  12. 12. <!DOCTYPE html> <html> <head> <title>SpringSprout Demo</title> <link href="./css/bootstrap.css" rel="stylesheet"> </head> <body> <h1>SpringSprout Demo</h1> <script src="/js/jquery.js"></script> <script src="/js/bootstrap.js"></script> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14
  13. 13. Package Manager http://browserify.org/ http://bower.io/
  14. 14. $ bower install jquery bootstrap jquery#2.1.1 components/jquery bootstrap#3.3.1 components/bootstrap └── jquery#2.1.1 $ ls components/ bootstrap jquery
  15. 15. <!DOCTYPE html> <html> <head> <title>SpringSprout Demo</title> <link href="./components/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> </head> <body> <h1>SpringSprout Demo</h1> <script src="./components/jquery/dist/jquery.js"> </script> <script src="./components/bootstrap/dist/js/bootstrap.js"> </script> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
  16. 16. Pagage Manager를 쓸 때의 장점 ( 라이브러리 파일을 형상관리도구에 넣지 않는다 CSS나 JS가 아닌 컴포넌트 단위로 관리한다 버전만 관리하면서 필요에 따라 업데이트하기 쉽다. 보통은 min 버전이 함께 제공된다 ( ( (
  17. 17. 웹서버 실행 https://www.flickr.com/photos/110751683@N02/13792583873/
  18. 18. 어떻게 사용하고 있나요? ) 로컬 파일을 브라우저에서 실행 C:Documents/Project/index.html
  19. 19. 어떻게 사용하고 있나요? ) 로컬 파일을 브라우저에서 실행 C:Documents/Project/index.html * Apache, nginx
  20. 20. 어떻게 사용하고 있나요? ) 로컬 파일을 브라우저에서 실행 C:Documents/Project/index.html Apache, nginx * + WAS 실행(Tomcat 등)
  21. 21. 어떻게 사용하고 있나요? ) 로컬 파일을 브라우저에서 실행 C:Documents/Project/index.html Apache, nginx * + WAS 실행(Tomcat 등) , python -m SimpleHTTPServer
  22. 22. http://gruntjs.com http://gulpjs.com
  23. 23. module.exports = function(grunt) { 'use strict'; // 프로젝트 설정 grunt.initConfig({ }); }; 1 2 3 4 5 6 7 8 9 Gruntfile.js
  24. 24. grunt-contrib-connect grunt-contrib-watch
  25. 25. grunt.initConfig({ connect: { server: { options: { port: 8000, base: '' } } }, watch: {} }); 1 2 3 4 5 6 7 8 9 10 11 12 Gruntfile.js
  26. 26. $ grunt connect watch Running "connect:server" (connect) task Started connect web server on http://0.0.0.0:8000 Running "watch" task Waiting…
  27. 27. 빌드도구를 쓸 때의 장점 ( 프로젝트 별로 필요한 환경을 자동화 프로젝트내에서 자동화된 환경을 공유 다른 개발도구에 종속되지 않는다 CI서버 등에서 사용할 수 있다 ( ( (
  28. 28. 코드의 품질 관리 https://www.flickr.com/photos/wiertz/10248755515
  29. 29. CSS LINT ESLint https://github.com/yaniswang/HTMLHint http://twitter.github.io/recess/ http://csslint.net http://eslint.org http://flowtype.org http://www.jshint.com
  30. 30. .profile { height: 400px; } .learn_more { -ms-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); -o-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); } 1 2 3 4 5 6 7 8 9 10 11 style.css
  31. 31. $ recess style.css Analyzing the following files: style.css FILE: style.css STATUS: Busted FAILURES: 2 failures Underscores should not be used when naming selectors 8. .learn_more Incorrect property order for rule ".learn_more" Correct order below: 9. -webkit-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); 10. -moz-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); 11. -ms-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); 12. -o-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); 13. box-shadow: inset 5px 5px rgba(0, 0, 0, 0.5);
  32. 32. var temp; function sum(a, b) { return a + b } 1 2 3 4 5 common.js
  33. 33. $ jshint util.js util.js: line 4, col 3, Missing "use strict" statement. util.js: line 4, col 15, Missing semicolon. util.js: line 1, col 5, 'temp' is defined but never used. util.js: line 3, col 10, 'sum' is defined but never used. 4 errors
  34. 34. /* @flow */ function foo(x) { return x*10; } foo("Hello, world!"); 1 2 3 4 5 6 7 hello.js
  35. 35. $ flow check hello.js hello.js:7:5,19: string This type is incompatible with hello.js:4:10,13: number Found 1 error
  36. 36. grunt.initConfig({ recess: { dev: { src: ['src/main.css'] } }, jshint: { dev: { src: ['js/**/*.js'], } }, flow: { dev: { } } }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Gruntfile.js
  37. 37. grunt.initConfig({ recess: { dev: { … } }, jshint: { dev: { … } }, flow: { dev: { … } }, watch : { css: { files: ['css/**/*.css'], tasks: ['recess:dev'] }, js: { files: ['js/**/*.js'], tasks: ['jshint:dev', 'flow:dev'] } } }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Gruntfile.js
  38. 38. pre-processor https://www.flickr.com/photos/photomonkey/5669185
  39. 39. http://sass-lang.com/ http://lesscss.org/ http://learnboost.github.io/stylus/ http://coffeescript.org/
  40. 40. grunt.initConfig({ less:{ dev: { files: { 'css/style.css': 'css/main.less' } } }, watch : { less: { files: ['css/**/*.less'], tasks: ['less:dev'] } } }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Gruntfile.js
  41. 41. 어떻게 사용하고 있나요? ' 코드 수정
  42. 42. 어떻게 사용하고 있나요? ' 코드 수정 - 브라우저로 이동
  43. 43. 어떻게 사용하고 있나요? ' 코드 수정 브라우저로 이동 F5로 새로 고침 . -
  44. 44. 어떻게 사용하고 있나요? ' 코드 수정 / 변경 내용 확인 브라우저로 이동 F5로 새로 고침 . -
  45. 45. grunt.initConfig({ connect: { server: { options: { port: 9999, base: '' } } }, watch: { less: { files: ['css/**/*.less'], tasks: [‘less:dev’], options: { livereload: true } }, js: { files: ['js/**/*.js'], tasks: ['jshint:dev', ‘flow:dev’], options: { livereload: true } } } }); 1 2 3 4 5 6 7 8 9 10 11 12 Gruntfile.js
  46. 46. 유닛테스트 https://www.flickr.com/photos/photomonkey/5669185
  47. 47. assert test framework test runner
  48. 48. expect(foo).to.be.a('string'); expect(foo).to.equal('bar'); expect(foo).to.have.length(3); expect(beverages) .to.have.property('tea') .with.length(3); 1 2 3 4 5 6 7 8 9
  49. 49. describe('Array', function() { describe('#indexOf()', function() { it('should return -1', function() { // assert }) }) }) 1 2 3 4 5 6 7 8
  50. 50. function plus(a, b) { return a + b; } function minus(a, b) { return a - b; } function times(a, b) { return a * b; } function divide(a, b) { return a / b; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 util.js
  51. 51. describe('util', function() { describe('plus', function() { it('should return 3', function() { var result = plus(1, 2); expect(result).to.equal(3); }); }); describe('minus', function() { it('should return 2', function() { var result = minus(5, 3); expect(result).to.equal(2); }); }); }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 util.spec.js
  52. 52. karma-runner ( 필요한 파일 로딩 설정된 브라우저 실행 후 테스트 테스트 결과를 Socket.IO로 콘솔에 출력 파일 수정할 때마다 재 실행 ( ( (
  53. 53. 작성한 자동화 스크립트는 최대한 써먹자
  54. 54. 배포 https://www.flickr.com/photos/bribri/8731091993
  55. 55. <!DOCTYPE html> <html> <head> <title>SpringSprout Demo</title> <link href="/components/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> <link href="/css/common.css" rel="stylesheet"> <link href="/css/main.css" rel="stylesheet"> <link href="/css/page.css" rel="stylesheet"> <link href="/css/content.css" rel="stylesheet"> </head> <body> <script src="/components/jquery/dist/jquery.js"></script> <script src="/components/bootstrap/dist/js/bootstrap.js"> </script> <script src="/js/common.js"></script> <script src="/js/template.js"></script> <script src="/js/service.js"></script> <script src="/js/server.js"></script> <script src="/js/util.js"></script> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 index.html
  56. 56. 어떻게 사용하고 있나요? 0 CSS/JS 병합
  57. 57. 어떻게 사용하고 있나요? 0 CSS/JS 병합 1 CSS/JS 압축
  58. 58. 어떻게 사용하고 있나요? 0 CSS/JS 병합 HTML에서 링크 변경 CSS/JS 압축 ' 1
  59. 59. grunt.initConfig({ useminPrepare: { html: 'index.html', options: { dest: '.' } }, usemin: { html: 'index.html' } }); grunt.registerTask('build', [ 'useminPrepare', 'concat:generated', 'cssmin:generated', 'uglify:generated', 'usemin' ]); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Gruntfile.js
  60. 60. <!DOCTYPE html> <html> <head> <title>SpringSprout Demo</title> <!-- build:css /dist/css/style.css --> <link href="/components/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> <link href="/css/common.css" rel="stylesheet"> <link href="/css/main.css" rel="stylesheet"> <link href="/css/page.css" rel="stylesheet"> <link href="/css/content.css" rel=“stylesheet"> <!-- endbuild --> </head> <body> <!-- build:js /dist/js/app.js --> <script src="/components/jquery/dist/jquery.js"></script> <script src="/components/bootstrap/dist/js/bootstrap.js"> </script> <script src="/js/common.js"></script> <script src="/js/template.js"></script> <script src="/js/service.js"></script> <script src="/js/server.js"></script> <script src=“/js/util.js"></script> <!-- endbuild --> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 index.html
  61. 61. Thank you! 예제: https://github.com/outsideris/presentations/ tree/master/14-11-30-adieu-springsprout2

×