Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 - 어디까지 개선할 수 있나
Upcoming SlideShare
Loading in …5
×

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

49,477 views

Published on

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

Published in: Technology
  • Sex in your area is here: ❶❶❶ http://bit.ly/2F4cEJi ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ♥♥♥ http://bit.ly/2F4cEJi ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, Copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ,Download or read Ebooks here ... ......................................................................................................................... Download FULL PDF EBOOK here { https://urlzs.com/UABbn }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Download or read that Ebooks here ... ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×