SlideShare ist ein Scribd-Unternehmen logo
1 von 64
Downloaden Sie, um offline zu lesen
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/350043329
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
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 SimpleHTTPServer
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
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
Front-end Development Process - 어디까지 개선할 수 있나
.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);
Front-end Development Process - 어디까지 개선할 수 있나
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
Front-end Development Process - 어디까지 개선할 수 있나
/* @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
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/**/*.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 병합 
1 CSS/JS 압축
어떻게 사용하고 있나요? 
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
Thank you! 
예제: 
https://github.com/outsideris/presentations/ 
tree/master/14-11-30-adieu-springsprout2

Weitere ähnliche Inhalte

Was ist angesagt?

Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드수정 김
 
Python server-101
Python server-101Python server-101
Python server-101Huey Park
 
Vue SSR vs Prerender
Vue SSR vs PrerenderVue SSR vs Prerender
Vue SSR vs PrerenderChangwan Jun
 
Nodejs 발표자료
Nodejs 발표자료Nodejs 발표자료
Nodejs 발표자료shanka2
 
진짜기초 Node.js
진짜기초 Node.js진짜기초 Node.js
진짜기초 Node.jsWoo Jin Kim
 
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기XpressEngine
 
Node.js + Websocket 삽질기
Node.js + Websocket 삽질기Node.js + Websocket 삽질기
Node.js + Websocket 삽질기Paprikhan
 
Clean Front-End Development
Clean Front-End DevelopmentClean Front-End Development
Clean Front-End Development지수 윤
 
Meteor 0.3.6 Preview
Meteor 0.3.6 PreviewMeteor 0.3.6 Preview
Meteor 0.3.6 PreviewJuntai Park
 
[오픈소스컨설팅]Gradle Basic - How to use Gradle in Java Project
[오픈소스컨설팅]Gradle Basic - How to use Gradle in Java Project[오픈소스컨설팅]Gradle Basic - How to use Gradle in Java Project
[오픈소스컨설팅]Gradle Basic - How to use Gradle in Java ProjectJi-Woong Choi
 
20131217 html5
20131217 html520131217 html5
20131217 html5DK Lee
 
Springcamp spring boot intro
Springcamp spring boot introSpringcamp spring boot intro
Springcamp spring boot introJae-il Lee
 
막하는 스터디 네 번째 만남 AngularJs (20151108)
막하는 스터디 네 번째 만남 AngularJs (20151108)막하는 스터디 네 번째 만남 AngularJs (20151108)
막하는 스터디 네 번째 만남 AngularJs (20151108)연웅 조
 
스프링군살없이세팅하기(The way to setting the Spring framework for web.)
스프링군살없이세팅하기(The way to setting the Spring framework for web.)스프링군살없이세팅하기(The way to setting the Spring framework for web.)
스프링군살없이세팅하기(The way to setting the Spring framework for web.)EunChul Shin
 
React 튜토리얼 2차시
React 튜토리얼 2차시React 튜토리얼 2차시
React 튜토리얼 2차시태현 김
 
Vue 뽀개기 1장 환경설정 및 spa설정
Vue 뽀개기 1장 환경설정 및 spa설정Vue 뽀개기 1장 환경설정 및 spa설정
Vue 뽀개기 1장 환경설정 및 spa설정leejungwang
 
Nodejs, PhantomJS, casperJs, YSlow, expressjs
Nodejs, PhantomJS, casperJs, YSlow, expressjsNodejs, PhantomJS, casperJs, YSlow, expressjs
Nodejs, PhantomJS, casperJs, YSlow, expressjs기동 이
 

Was ist angesagt? (20)

Gulp 입문
Gulp 입문 Gulp 입문
Gulp 입문
 
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
 
Python server-101
Python server-101Python server-101
Python server-101
 
Vue SSR vs Prerender
Vue SSR vs PrerenderVue SSR vs Prerender
Vue SSR vs Prerender
 
Node.js 기본
Node.js 기본Node.js 기본
Node.js 기본
 
Nodejs 발표자료
Nodejs 발표자료Nodejs 발표자료
Nodejs 발표자료
 
진짜기초 Node.js
진짜기초 Node.js진짜기초 Node.js
진짜기초 Node.js
 
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
 
Node.js intro
Node.js introNode.js intro
Node.js intro
 
Node.js + Websocket 삽질기
Node.js + Websocket 삽질기Node.js + Websocket 삽질기
Node.js + Websocket 삽질기
 
Clean Front-End Development
Clean Front-End DevelopmentClean Front-End Development
Clean Front-End Development
 
Meteor 0.3.6 Preview
Meteor 0.3.6 PreviewMeteor 0.3.6 Preview
Meteor 0.3.6 Preview
 
[오픈소스컨설팅]Gradle Basic - How to use Gradle in Java Project
[오픈소스컨설팅]Gradle Basic - How to use Gradle in Java Project[오픈소스컨설팅]Gradle Basic - How to use Gradle in Java Project
[오픈소스컨설팅]Gradle Basic - How to use Gradle in Java Project
 
20131217 html5
20131217 html520131217 html5
20131217 html5
 
Springcamp spring boot intro
Springcamp spring boot introSpringcamp spring boot intro
Springcamp spring boot intro
 
막하는 스터디 네 번째 만남 AngularJs (20151108)
막하는 스터디 네 번째 만남 AngularJs (20151108)막하는 스터디 네 번째 만남 AngularJs (20151108)
막하는 스터디 네 번째 만남 AngularJs (20151108)
 
스프링군살없이세팅하기(The way to setting the Spring framework for web.)
스프링군살없이세팅하기(The way to setting the Spring framework for web.)스프링군살없이세팅하기(The way to setting the Spring framework for web.)
스프링군살없이세팅하기(The way to setting the Spring framework for web.)
 
React 튜토리얼 2차시
React 튜토리얼 2차시React 튜토리얼 2차시
React 튜토리얼 2차시
 
Vue 뽀개기 1장 환경설정 및 spa설정
Vue 뽀개기 1장 환경설정 및 spa설정Vue 뽀개기 1장 환경설정 및 spa설정
Vue 뽀개기 1장 환경설정 및 spa설정
 
Nodejs, PhantomJS, casperJs, YSlow, expressjs
Nodejs, PhantomJS, casperJs, YSlow, expressjsNodejs, PhantomJS, casperJs, YSlow, expressjs
Nodejs, PhantomJS, casperJs, YSlow, expressjs
 

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

응답하라 반응형웹 - 3. bootstrap
응답하라 반응형웹 - 3. bootstrap응답하라 반응형웹 - 3. bootstrap
응답하라 반응형웹 - 3. bootstrapredribbon1307
 
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지yongwoo Jeon
 
OSS SW Basics Lecture 08: Software Configuration Management (2)
OSS SW Basics Lecture 08: Software Configuration Management (2)OSS SW Basics Lecture 08: Software Configuration Management (2)
OSS SW Basics Lecture 08: Software Configuration Management (2)Jeongkyu Shin
 
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web AnimationsChang W. Doh
 
Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발지수 윤
 
오픈소스로 만드는 DB 모니터링 시스템 (w/graphite+grafana)
오픈소스로 만드는 DB 모니터링 시스템 (w/graphite+grafana)오픈소스로 만드는 DB 모니터링 시스템 (w/graphite+grafana)
오픈소스로 만드는 DB 모니터링 시스템 (w/graphite+grafana)I Goo Lee
 
Polymer따라잡기
Polymer따라잡기Polymer따라잡기
Polymer따라잡기Han Jung Hyun
 
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]WSConf.
 
Meteor React Tutorial 따라하기
Meteor React Tutorial 따라하기Meteor React Tutorial 따라하기
Meteor React Tutorial 따라하기Jiam Seo
 
Node.js and react
Node.js and reactNode.js and react
Node.js and reactHyungKuIm
 
Catalyst Framework 살펴보기
Catalyst Framework 살펴보기Catalyst Framework 살펴보기
Catalyst Framework 살펴보기corund
 

Ähnlich wie Front-end Development Process - 어디까지 개선할 수 있나 (20)

Scala for play
Scala for playScala for play
Scala for play
 
응답하라 반응형웹 - 3. bootstrap
응답하라 반응형웹 - 3. bootstrap응답하라 반응형웹 - 3. bootstrap
응답하라 반응형웹 - 3. bootstrap
 
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
 
Html5 performance
Html5 performanceHtml5 performance
Html5 performance
 
What's new in IE11
What's new in IE11What's new in IE11
What's new in IE11
 
4-3. jquery
4-3. jquery4-3. jquery
4-3. jquery
 
Grunt
GruntGrunt
Grunt
 
Hacosa jquery 1th
Hacosa jquery 1thHacosa jquery 1th
Hacosa jquery 1th
 
OSS SW Basics Lecture 08: Software Configuration Management (2)
OSS SW Basics Lecture 08: Software Configuration Management (2)OSS SW Basics Lecture 08: Software Configuration Management (2)
OSS SW Basics Lecture 08: Software Configuration Management (2)
 
테스트
테스트테스트
테스트
 
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations
 
Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발
 
오픈소스로 만드는 DB 모니터링 시스템 (w/graphite+grafana)
오픈소스로 만드는 DB 모니터링 시스템 (w/graphite+grafana)오픈소스로 만드는 DB 모니터링 시스템 (w/graphite+grafana)
오픈소스로 만드는 DB 모니터링 시스템 (w/graphite+grafana)
 
ch04
ch04ch04
ch04
 
Polymer따라잡기
Polymer따라잡기Polymer따라잡기
Polymer따라잡기
 
Redis
RedisRedis
Redis
 
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
 
Meteor React Tutorial 따라하기
Meteor React Tutorial 따라하기Meteor React Tutorial 따라하기
Meteor React Tutorial 따라하기
 
Node.js and react
Node.js and reactNode.js and react
Node.js and react
 
Catalyst Framework 살펴보기
Catalyst Framework 살펴보기Catalyst Framework 살펴보기
Catalyst Framework 살펴보기
 

Mehr von JeongHun Byeon

당근 개발자 플랫폼은 어떤 문제를 해결하고 있는가?
당근 개발자 플랫폼은 어떤 문제를 해결하고 있는가?당근 개발자 플랫폼은 어떤 문제를 해결하고 있는가?
당근 개발자 플랫폼은 어떤 문제를 해결하고 있는가?JeongHun Byeon
 
오픈소스에 기여할 때 알면 좋을 개발 프로세스
오픈소스에 기여할 때 알면 좋을 개발 프로세스오픈소스에 기여할 때 알면 좋을 개발 프로세스
오픈소스에 기여할 때 알면 좋을 개발 프로세스JeongHun Byeon
 
DevOps를 가속화하는 플랫폼 엔지니어링
DevOps를 가속화하는 플랫폼 엔지니어링DevOps를 가속화하는 플랫폼 엔지니어링
DevOps를 가속화하는 플랫폼 엔지니어링JeongHun Byeon
 
클라우드 시대에 맞는 사이트 신뢰성 엔지니어
클라우드 시대에 맞는 사이트 신뢰성 엔지니어클라우드 시대에 맞는 사이트 신뢰성 엔지니어
클라우드 시대에 맞는 사이트 신뢰성 엔지니어JeongHun Byeon
 
디자인에 이어 코딩까지 AI가 프로그램 개발을 척척? : GitHub Copilot, 어디까지 알아보셨나요
디자인에 이어 코딩까지 AI가 프로그램 개발을 척척? : GitHub Copilot, 어디까지 알아보셨나요 디자인에 이어 코딩까지 AI가 프로그램 개발을 척척? : GitHub Copilot, 어디까지 알아보셨나요
디자인에 이어 코딩까지 AI가 프로그램 개발을 척척? : GitHub Copilot, 어디까지 알아보셨나요 JeongHun Byeon
 
오픈소스 뒤에 메인테이너 있어요
오픈소스 뒤에 메인테이너 있어요오픈소스 뒤에 메인테이너 있어요
오픈소스 뒤에 메인테이너 있어요JeongHun Byeon
 
오픈소스에 기여할 때 해도 되는 일과 하면 안되는 일
오픈소스에 기여할 때 해도 되는 일과 하면 안되는 일오픈소스에 기여할 때 해도 되는 일과 하면 안되는 일
오픈소스에 기여할 때 해도 되는 일과 하면 안되는 일JeongHun Byeon
 
Lessons from maintaining Mocha, an open source project
Lessons from maintaining Mocha, an open source projectLessons from maintaining Mocha, an open source project
Lessons from maintaining Mocha, an open source projectJeongHun Byeon
 
개발 관련 기술 블로그 운영하기
개발 관련 기술 블로그 운영하기개발 관련 기술 블로그 운영하기
개발 관련 기술 블로그 운영하기JeongHun Byeon
 
Terraform을 이용한 Infrastructure as Code 실전 구성하기
Terraform을 이용한 Infrastructure as Code 실전 구성하기Terraform을 이용한 Infrastructure as Code 실전 구성하기
Terraform을 이용한 Infrastructure as Code 실전 구성하기JeongHun Byeon
 
오픈소스 생태계 일원으로서의 개발자(자막 버전)
오픈소스 생태계 일원으로서의 개발자(자막 버전)오픈소스 생태계 일원으로서의 개발자(자막 버전)
오픈소스 생태계 일원으로서의 개발자(자막 버전)JeongHun Byeon
 
오픈소스 생태계 일원으로서의 개발자
오픈소스 생태계 일원으로서의 개발자오픈소스 생태계 일원으로서의 개발자
오픈소스 생태계 일원으로서의 개발자JeongHun Byeon
 
Node.js API 서버 성능 개선기
Node.js API 서버 성능 개선기Node.js API 서버 성능 개선기
Node.js API 서버 성능 개선기JeongHun Byeon
 
더 나은 개발자 되기
더 나은 개발자 되기더 나은 개발자 되기
더 나은 개발자 되기JeongHun Byeon
 
블로그 주도 개발
블로그 주도 개발블로그 주도 개발
블로그 주도 개발JeongHun Byeon
 
Nodejs Production 적용기
Nodejs Production 적용기Nodejs Production 적용기
Nodejs Production 적용기JeongHun Byeon
 
Sublime Text tips & trikcs
Sublime Text tips & trikcsSublime Text tips & trikcs
Sublime Text tips & trikcsJeongHun Byeon
 
Popular Convention 개발기
Popular Convention 개발기Popular Convention 개발기
Popular Convention 개발기JeongHun Byeon
 
Spring Scala : 스프링이 스칼라를 만났을 때
Spring Scala : 스프링이 스칼라를 만났을 때Spring Scala : 스프링이 스칼라를 만났을 때
Spring Scala : 스프링이 스칼라를 만났을 때JeongHun Byeon
 

Mehr von JeongHun Byeon (20)

당근 개발자 플랫폼은 어떤 문제를 해결하고 있는가?
당근 개발자 플랫폼은 어떤 문제를 해결하고 있는가?당근 개발자 플랫폼은 어떤 문제를 해결하고 있는가?
당근 개발자 플랫폼은 어떤 문제를 해결하고 있는가?
 
오픈소스에 기여할 때 알면 좋을 개발 프로세스
오픈소스에 기여할 때 알면 좋을 개발 프로세스오픈소스에 기여할 때 알면 좋을 개발 프로세스
오픈소스에 기여할 때 알면 좋을 개발 프로세스
 
DevOps를 가속화하는 플랫폼 엔지니어링
DevOps를 가속화하는 플랫폼 엔지니어링DevOps를 가속화하는 플랫폼 엔지니어링
DevOps를 가속화하는 플랫폼 엔지니어링
 
클라우드 시대에 맞는 사이트 신뢰성 엔지니어
클라우드 시대에 맞는 사이트 신뢰성 엔지니어클라우드 시대에 맞는 사이트 신뢰성 엔지니어
클라우드 시대에 맞는 사이트 신뢰성 엔지니어
 
디자인에 이어 코딩까지 AI가 프로그램 개발을 척척? : GitHub Copilot, 어디까지 알아보셨나요
디자인에 이어 코딩까지 AI가 프로그램 개발을 척척? : GitHub Copilot, 어디까지 알아보셨나요 디자인에 이어 코딩까지 AI가 프로그램 개발을 척척? : GitHub Copilot, 어디까지 알아보셨나요
디자인에 이어 코딩까지 AI가 프로그램 개발을 척척? : GitHub Copilot, 어디까지 알아보셨나요
 
Citizen 개발기
Citizen 개발기Citizen 개발기
Citizen 개발기
 
오픈소스 뒤에 메인테이너 있어요
오픈소스 뒤에 메인테이너 있어요오픈소스 뒤에 메인테이너 있어요
오픈소스 뒤에 메인테이너 있어요
 
오픈소스에 기여할 때 해도 되는 일과 하면 안되는 일
오픈소스에 기여할 때 해도 되는 일과 하면 안되는 일오픈소스에 기여할 때 해도 되는 일과 하면 안되는 일
오픈소스에 기여할 때 해도 되는 일과 하면 안되는 일
 
Lessons from maintaining Mocha, an open source project
Lessons from maintaining Mocha, an open source projectLessons from maintaining Mocha, an open source project
Lessons from maintaining Mocha, an open source project
 
개발 관련 기술 블로그 운영하기
개발 관련 기술 블로그 운영하기개발 관련 기술 블로그 운영하기
개발 관련 기술 블로그 운영하기
 
Terraform을 이용한 Infrastructure as Code 실전 구성하기
Terraform을 이용한 Infrastructure as Code 실전 구성하기Terraform을 이용한 Infrastructure as Code 실전 구성하기
Terraform을 이용한 Infrastructure as Code 실전 구성하기
 
오픈소스 생태계 일원으로서의 개발자(자막 버전)
오픈소스 생태계 일원으로서의 개발자(자막 버전)오픈소스 생태계 일원으로서의 개발자(자막 버전)
오픈소스 생태계 일원으로서의 개발자(자막 버전)
 
오픈소스 생태계 일원으로서의 개발자
오픈소스 생태계 일원으로서의 개발자오픈소스 생태계 일원으로서의 개발자
오픈소스 생태계 일원으로서의 개발자
 
Node.js API 서버 성능 개선기
Node.js API 서버 성능 개선기Node.js API 서버 성능 개선기
Node.js API 서버 성능 개선기
 
더 나은 개발자 되기
더 나은 개발자 되기더 나은 개발자 되기
더 나은 개발자 되기
 
블로그 주도 개발
블로그 주도 개발블로그 주도 개발
블로그 주도 개발
 
Nodejs Production 적용기
Nodejs Production 적용기Nodejs Production 적용기
Nodejs Production 적용기
 
Sublime Text tips & trikcs
Sublime Text tips & trikcsSublime Text tips & trikcs
Sublime Text tips & trikcs
 
Popular Convention 개발기
Popular Convention 개발기Popular Convention 개발기
Popular Convention 개발기
 
Spring Scala : 스프링이 스칼라를 만났을 때
Spring Scala : 스프링이 스칼라를 만났을 때Spring Scala : 스프링이 스칼라를 만났을 때
Spring Scala : 스프링이 스칼라를 만났을 때
 

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