View
23.138
Download
5
Category
Preview:
DESCRIPTION
Adieu 2014, 봄싹 세미나(http://adieu2014.github.io/)에서 발표한 발표자료
Citation preview
Front-end Development Process
2014.11.30OutsiderAdieu 2014, 봄싹
어디까지 개선할 수 있나
! outsideris
" @outsideris
# outsideris@gmail.com
$ http://blog.outsider.ne.kr
https://www.flickr.com/photos/frosted_peppercorn/2411572004
게으른 개발자
https://www.flickr.com/photos/loritingey/350043329
어려운 작업을 할 때 항상 게으른 사람을 선택합니다.
게으른 사람은 가장 쉬운 방법을 찾기 때문입니다.
- Bill Gates
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>
1 2 3 4 5 6 7 8 9
% 라이브러리사이트 검색
어떻게 사용하고 있나요?
% 라이브러리사이트 검색
어떻게 사용하고 있나요?
프로젝트 폴더에다운로드&
% 라이브러리사이트 검색
어떻게 사용하고 있나요?
HTML에코드 추가
프로젝트 폴더에다운로드' &
<!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
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
$ ls components/ bootstrap jquery
<!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
( 라이브러리 파일을 형상관리도구에 넣지 않는다
CSS나 JS가 아닌 컴포넌트 단위로 관리한다
Pagage Manager를 쓸 때의 장점
버전만 관리하면서 필요에 따라 업데이트하기 쉽다.
보통은 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
어떻게 사용하고 있나요?
, python -m SimpleHTTPServer
Apache, nginx
+*
WAS 실행(Tomcat 등)
http://gruntjs.com
http://gulpjs.com
module.exports = function(grunt) { 'use strict';
// 프로젝트 설정 grunt.initConfig({ }); };
1 2 3 4 5 6 7 8 9
Gruntfile.js
grunt-contrib-connect
grunt-contrib-watch
grunt.initConfig({ connect: { server: { options: { port: 8000, base: '' } } }, watch: {} });
1 2 3 4 5 6 7 8 9 10 11 12
Gruntfile.js
$ grunt connect watch Running "connect:server" (connect) task Started connect web server on http://0.0.0.0:8000
Running "watch" task Waiting…
( 프로젝트 별로 필요한 환경을 자동화
프로젝트내에서 자동화된 환경을 공유
빌드도구를 쓸 때의 장점
다른 개발도구에 종속되지 않는다
CI서버 등에서 사용할 수 있다
(
(
(
https://www.flickr.com/photos/wiertz/10248755515
코드의 품질 관리
ESLintCSS LINT
https://github.com/yaniswang/HTMLHint
http://twitter.github.io/recess/
http://csslint.net
http://flowtype.org
http://eslint.org
http://www.jshint.com
.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
$ 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);
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. 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
/* @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: { dev: { } } });
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Gruntfile.js
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
https://www.flickr.com/photos/photomonkey/5669185
pre-processor
http://sass-lang.com/
http://learnboost.github.io/stylus/
http://lesscss.org/
http://coffeescript.org/
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
' 코드 수정
어떻게 사용하고 있나요?
' 코드 수정
어떻게 사용하고 있나요?
브라우저로 이동-
' 코드 수정
어떻게 사용하고 있나요?
F5로 새로 고침
브라우저로 이동
.
-
' 코드 수정
어떻게 사용하고 있나요?
/ 변경 내용 확인
F5로 새로 고침
브라우저로 이동
.
-
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
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.property('tea') .with.length(3);
1 2 3 4 5 6 7 8 9
describe('Array', function() { describe('#indexOf()', function() { it('should return -1', function() { // assert }) }) })
1 2 3 4 5 6 7 8
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
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
( 필요한 파일 로딩
설정된 브라우저 실행 후 테스트
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.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
0 CSS/JS 병합
어떻게 사용하고 있나요?
0 CSS/JS 병합
어떻게 사용하고 있나요?
CSS/JS 압축1
0 CSS/JS 병합
어떻게 사용하고 있나요?
HTML에서 링크 변경
CSS/JS 압축
'
1
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
<!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
예제: https://github.com/outsideris/presentations/tree/master/14-11-30-adieu-springsprout2Thank you!
Recommended