진보한 개발 환경에서 품질 좋은 코드 생산 (webstorm)

100
진보한 개발 환경에서 품질 좋은 코드 생산 ! background : http://goo.gl/OFXKv0

Upload: uyeong-ju

Post on 23-Jun-2015

3.244 views

Category:

Software


20 download

DESCRIPTION

Karma 시연 영상 : http://youtu.be/IsvLKNqwgV0 Node.js 디버깅 시연 영상 : http://youtu.be/nPQPzAIiQyI Grunt 시연 영상 : http://youtu.be/Y8TxUCPaFZ0

TRANSCRIPT

Page 1: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

진보한����������� ������������������  개발����������� ������������������  환경에서����������� ������������������  

품질����������� ������������������  좋은����������� ������������������  코드����������� ������������������  생산����������� ������������������  !����������� ������������������  

background����������� ������������������  :����������� ������������������  http://goo.gl/OFXKv0����������� ������������������  

Page 2: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

NHN����������� ������������������  Technology����������� ������������������  services����������� ������������������  Front-End����������� ������������������  Development����������� ������������������  Team����������� ������������������  

이름����������� ������������������  

이메일����������� ������������������  

TECH@NAVER����������� ������������������  프런트엔드����������� ������������������  개발의����������� ������������������  모든����������� ������������������  것(가제)����������� ������������������  집필����������� ������������������  중����������� ������������������  

방법론,����������� ������������������  패턴,����������� ������������������  설계����������� ������������������  등����������� ������������������  공학적인����������� ������������������  것����������� ������������������  

힙합과����������� ������������������  사케를����������� ������������������  좋아하는����������� ������������������  프런트엔드개발팀의����������� ������������������  코드소총수����������� ������������������  

주우영(코드소총수)����������� ������������������  

[email protected]����������� ������������������  

짧은소개����������� ������������������  

관심분야����������� ������������������  

특이사항����������� ������������������  

Page 3: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  

진보한����������� ������������������  개발����������� ������������������  환경����������� ������������������  

품질����������� ������������������  좋은����������� ������������������  코드����������� ������������������  생산����������� ������������������  

성숙한����������� ������������������  방법론����������� ������������������  

연구된����������� ������������������  설계와����������� ������������������  패턴����������� ������������������  

고수준����������� ������������������  라이브러리����������� ������������������  

통합된����������� ������������������  개발����������� ������������������  환경����������� ������������������  도구����������� ������������������  

Unit����������� ������������������  Test����������� ������������������  

Code����������� ������������������  Lint����������� ������������������  

Task����������� ������������������  Automation����������� ������������������  

Test-runner&Coverage����������� ������������������  

background����������� ������������������  :����������� ������������������  http://goo.gl/9C6UOQ����������� ������������������  

Page 4: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  

성숙한����������� ������������������  방법론����������� ������������������  

연구된����������� ������������������  설계와����������� ������������������  패턴����������� ������������������  

고수준����������� ������������������  라이브러리����������� ������������������  

통합된����������� ������������������  개발����������� ������������������  환경����������� ������������������  도구����������� ������������������  

Unit����������� ������������������  Test����������� ������������������  

Code����������� ������������������  Lint����������� ������������������  

Task����������� ������������������  Automation����������� ������������������  

Test-runner&Coverage����������� ������������������  

WebStorm����������� ������������������  

Karma����������� ������������������  

JSLint����������� ������������������  

Grunt����������� ������������������  

background����������� ������������������  :����������� ������������������  http://goo.gl/9C6UOQ����������� ������������������  

Page 5: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  

WebStorm����������� ������������������  

Karma����������� ������������������  JSLint����������� ������������������  Grunt����������� ������������������  Debugger����������� ������������������  

background����������� ������������������  :����������� ������������������  http://goo.gl/9C6UOQ����������� ������������������  

Page 6: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

좋은����������� ������������������  IDE란����������� ������������������  

무엇인가?����������� ������������������  01����������� ������������������  

background����������� ������������������  :����������� ������������������  http://goo.gl/aNOKJ6����������� ������������������  

Page 7: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

오류없는����������� ������������������  코드를����������� ������������������  빠르게����������� ������������������  생산할����������� ������������������  수����������� ������������������  ����������� ������������������  있도록����������� ������������������  하는����������� ������������������  쾌적한����������� ������������������  개발����������� ������������������  도구����������� ������������������  

Code����������� ������������������  lint����������� ������������������  Refactor����������� ������������������  

Test-runner����������� ������������������  Debugger����������� ������������������  ����������� ������������������  

Auto-complete����������� ������������������  Hinting����������� ������������������  

Code����������� ������������������  Trace����������� ������������������  

Highlighter����������� ������������������  Reliability����������� ������������������  Scalability����������� ������������������  

오류없는����������� ������������������  코드를����������� ������������������  

빠르고����������� ������������������  

쾌적하게����������� ������������������  

Integrated����������� ������������������  ����������� ������������������  Development����������� ������������������  ����������� ������������������  Environment����������� ������������������  

Page 8: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

좋은����������� ������������������  IDE를����������� ������������������  

소개합니다.����������� ������������������  02����������� ������������������  

background����������� ������������������  :����������� ������������������  http://goo.gl/eHqY5O����������� ������������������  

Page 9: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

Sublime����������� ������������������  Text����������� ������������������  

Page 10: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

구글의����������� ������������������  엔지니어였던����������� ������������������  Jon����������� ������������������  Skimmer는����������� ������������������  ����������� ������������������  2005년����������� ������������������   12월����������� ������������������  부터����������� ������������������   3D����������� ������������������  가속����������� ������������������  기능을����������� ������������������  ����������� ������������������  갖춘����������� ������������������  텍스트����������� ������������������  편집기를����������� ������������������  상상해����������� ������������������  왔다가����������� ������������������  ����������� ������������������  2007년����������� ������������������   11월에����������� ������������������  첫����������� ������������������  프로토타입을����������� ������������������  ����������� ������������������  개발했다.����������� ������������������  ����������� ������������������  이후����������� ������������������   편집기를����������� ������������������   완성하고자����������� ������������������   구글����������� ������������������  ����������� ������������������  엔지니어를����������� ������������������  그만두고����������� ������������������  개발에����������� ������������������  몰두����������� ������������������  하여����������� ������������������   SublimeText1을����������� ������������������   2008년에����������� ������������������  ����������� ������������������  발표했다.����������� ������������������  

����������� ������������������  가볍고����������� ������������������  편리하여����������� ������������������  많은����������� ������������������  프런트엔드����������� ������������������  개발자들이����������� ������������������  주����������� ������������������  에디터로����������� ������������������  사용하고����������� ������������������  있다 .����������� ������������������  

Sublime����������� ������������������  Text����������� ������������������  

Page 11: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

Web����������� ������������������   WebStorm은����������� ������������������   IntelliJ로����������� ������������������   유명한����������� ������������������  JetBrains사����������� ������������������   에서����������� ������������������   개발한����������� ������������������   크로스����������� ������������������  ����������� ������������������  플랫폼����������� ������������������  프런트엔드����������� ������������������  전용����������� ������������������  IDE다.����������� ������������������  ����������� ������������������  

����������� ������������������  2009년����������� ������������������  부터����������� ������������������  개발하여����������� ������������������  2010년에����������� ������������������  1.0����������� ������������������  ����������� ������������������  베타를����������� ������������������  발표했으며����������� ������������������  지금은����������� ������������������  버전����������� ������������������  8이다.����������� ������������������  

����������� ������������������  프런트엔드����������� ������������������  개발����������� ������������������  도구에는����������� ������������������  없던����������� ������������������  많은����������� ������������������  기능을����������� ������������������  갖추고����������� ������������������  있어����������� ������������������  매니아����������� ������������������  사용층이����������� ������������������  ����������� ������������������  생기기����������� ������������������  시작했다.����������� ������������������  

����������� ������������������  

Storm����������� ������������������  

Page 12: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

Why����������� ������������������  did����������� ������������������  we����������� ������������������  choose����������� ������������������  ����������� ������������������  

이전까지의����������� ������������������  프런트엔드����������� ������������������  개발����������� ������������������  도구는����������� ������������������  기능이나����������� ������������������  안정성이����������� ������������������  상당히����������� ������������������  미흡했다.����������� ������������������  

����������� ������������������  WebStorm은����������� ������������������   Auto-complete����������� ������������������  Code����������� ������������������  trace,����������� ������������������  lint,����������� ������������������  Test-runner����������� ������������������  그리고����������� ������������������  ����������� ������������������  Debugger����������� ������������������  등을����������� ������������������  지원하며����������� ������������������  무엇보다����������� ������������������  ����������� ������������������  신뢰할����������� ������������������   수����������� ������������������   있는����������� ������������������   리팩토링����������� ������������������   기능을����������� ������������������  ����������� ������������������  지원하면서����������� ������������������  프런트엔드����������� ������������������  개발����������� ������������������  환경은����������� ������������������  ����������� ������������������  한층����������� ������������������  진보했다.����������� ������������������  

����������� ������������������  우리는����������� ������������������  여기에서����������� ������������������  얻을����������� ������������������  수����������� ������������������  있는����������� ������������������  수����������� ������������������  많은����������� ������������������  장점을����������� ������������������  취하고자����������� ������������������  채택하여����������� ������������������  사용하고����������� ������������������  ����������� ������������������  있다.����������� ������������������  

Web����������� ������������������  Storm����������� ������������������  

Page 13: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

문서화를����������� ������������������  위한����������� ������������������  

JSDoc3����������� ������������������  03����������� ������������������  

background����������� ������������������  :����������� ������������������  http://goo.gl/uxWq1E����������� ������������������  

Page 14: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

JSDoc3����������� ������������������  JAVADoc과����������� ������������������   비슷한����������� ������������������   형식의����������� ������������������  ����������� ������������������  구문을����������� ������������������  사용하는����������� ������������������  자바스크립트����������� ������������������  ����������� ������������������  문서화����������� ������������������  도구����������� ������������������  

Page 15: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

변수나����������� ������������������  전달인자의����������� ������������������  타입을����������� ������������������  나타낸다.����������� ������������������  

@type(@param)����������� ������������������  

/**  * @param {Object} obj  * @param {string|number} key */var findBy = function(obj, key){ // do something... };   

/**  * @type {string} */var any = ‘name’;   

Page 16: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

함수나����������� ������������������  메서드의����������� ������������������  반환����������� ������������������  타입을����������� ������������������  나타낸다.����������� ������������������  

@returns����������� ������������������  

/** * @returns {boolean} */function isString(){ return false;}

Page 17: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

원시타입,����������� ������������������  객체타입,����������� ������������������  배열타입����������� ������������������  등����������� ������������������  다양한����������� ������������������  타입을����������� ������������������  나타낼����������� ������������������  수����������� ������������������  있다.����������� ������������������  

Type����������� ������������������  names����������� ������������������  

/**  * @type {number|string} * @type {Object} * @type {ClassName} * @type {Array.<string>} */  

Page 18: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

WebStorm의����������� ������������������  

정적����������� ������������������  분석����������� ������������������  능력����������� ������������������  04����������� ������������������  

background����������� ������������������  :����������� ������������������  http://goo.gl/SzRHgs����������� ������������������  

Page 19: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

전달인자����������� ������������������  타입����������� ������������������  힌팅����������� ������������������  ����������� ������������������  전달인자가����������� ������������������   기대하는����������� ������������������   형을����������� ������������������  ����������� ������������������  분석하여����������� ������������������   사용자에게����������� ������������������   힌팅����������� ������������������  해주는����������� ������������������  기능����������� ������������������  

Page 20: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

CODE����������� ������������������  

/**  * @param {Array} arr  * @param {string|number} key */var findBy = function(arr, key){ // do something... };   

Page 21: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

Page 22: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

작성된����������� ������������������  함수를����������� ������������������  찾아����������� ������������������  자동����������� ������������������  완성����������� ������������������  한다.����������� ������������������  JSDoc3����������� ������������������  주석을����������� ������������������  분석하여����������� ������������������  전달인자의����������� ������������������  ����������� ������������������  타입����������� ������������������  정보도����������� ������������������  제공한다.����������� ������������������  

Page 23: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

전달인자를����������� ������������������  입력하게����������� ������������������  되면����������� ������������������  툴팁으로����������� ������������������  ����������� ������������������  함수가����������� ������������������  기대하는����������� ������������������  전달인자����������� ������������������  갯수와����������� ������������������  이름����������� ������������������  그리고����������� ������������������  타입����������� ������������������  정보를����������� ������������������  제공한다.����������� ������������������  ����������� ������������������  사용자는,����������� ������������������  함수����������� ������������������  코드를����������� ������������������  알����������� ������������������  필요����������� ������������������  없이����������� ������������������  적절한����������� ������������������  값을����������� ������������������  전달하여����������� ������������������  함수를����������� ������������������  사용할����������� ������������������  수����������� ������������������  있다.����������� ������������������  

Page 24: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

전달인자를����������� ������������������  입력하는����������� ������������������  위치를����������� ������������������  하일라이팅����������� ������������������  하여����������� ������������������  알려준다.����������� ������������������  

Page 25: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

타입����������� ������������������  오류����������� ������������������  경고����������� ������������������  ����������� ������������������  형을����������� ������������������  추론하여����������� ������������������  변수����������� ������������������  대입이나����������� ������������������  ����������� ������������������  사용에����������� ������������������  문제가����������� ������������������  있다고����������� ������������������  판단되면����������� ������������������  경고����������� ������������������  메시지를����������� ������������������  출력하는����������� ������������������  기능����������� ������������������  

Page 26: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO/1����������� ������������������  

정수형이나����������� ������������������  문자열����������� ������������������  타입을����������� ������������������  가지는����������� ������������������  some이라는����������� ������������������  변수를����������� ������������������  ����������� ������������������  선언했다.����������� ������������������  

Page 27: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO/1����������� ������������������  

정수를����������� ������������������  대입하면����������� ������������������  문제����������� ������������������  없다.����������� ������������������  

문자열을����������� ������������������  대입해도����������� ������������������  문제����������� ������������������  없다.����������� ������������������  

리터럴����������� ������������������  객체를����������� ������������������  대입하니����������� ������������������  잘못된����������� ������������������  타입을����������� ������������������  대입했다고����������� ������������������  경고한다.����������� ������������������  

Page 28: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

변수����������� ������������������  뿐만����������� ������������������  아니라����������� ������������������  전달인자의����������� ������������������  타입도����������� ������������������  검증한다.����������� ������������������  

DEMO/2����������� ������������������  

Page 29: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

복잡한����������� ������������������  관계도����������� ������������������  분석하여����������� ������������������  검증한다.����������� ������������������  이����������� ������������������  예제는����������� ������������������  number����������� ������������������  타입을����������� ������������������  반환하는����������� ������������������  ����������� ������������������  location����������� ������������������  함수의����������� ������������������  결과����������� ������������������  값을����������� ������������������  boolean����������� ������������������  ����������� ������������������  타입의����������� ������������������  result����������� ������������������  변수에����������� ������������������  대입했기����������� ������������������  때문에����������� ������������������  경고창을����������� ������������������  출력한다.����������� ������������������  

DEMO/3����������� ������������������  

Page 30: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

객체와����������� ������������������  배열의����������� ������������������  멤버����������� ������������������  자동����������� ������������������  완성����������� ������������������  객체의����������� ������������������   키나����������� ������������������   배열의����������� ������������������   원소����������� ������������������  ����������� ������������������  ����������� ������������������  타입을����������� ������������������   추론하여����������� ������������������   자동����������� ������������������   완성����������� ������������������  ����������� ������������������  해주는����������� ������������������  기능����������� ������������������  

Page 31: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

CODE/1 var Phone = function(){this.init.apply(this, arguments);}; Phone.prototype = { id : 0, type : '', model : '', name : '', /**      * @constructs      */ init : function(id, type, model, name){ this.id = id; this.type = type; this.model = model; this.name = name; } };  

Page 32: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

CODE/2 var Phones = function(){this.init.apply(this, arguments);}; Phones.prototype = { /**      * @type {Array.<Phone>}      */ _phones : null, /**      * @constructs      */ init : function(){ this._phones = []; }, /**      * @returns {Array.<Phone>}      */ getPhones : function(){ return this._phones; } };  

Page 33: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

Phone����������� ������������������  객체가����������� ������������������  있다.����������� ������������������  이����������� ������������������  객체는����������� ������������������  핸드폰의����������� ������������������  ����������� ������������������  id,����������� ������������������  type,����������� ������������������  model,����������� ������������������  name����������� ������������������  같은����������� ������������������  정보를����������� ������������������  갖는다.����������� ������������������  

Page 34: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

Phone����������� ������������������  객체를����������� ������������������  배열로����������� ������������������  가지고����������� ������������������  있는����������� ������������������  컬렉션����������� ������������������  객체다.����������� ������������������  ����������� ������������������  getPhones����������� ������������������  메서드는����������� ������������������  Phone����������� ������������������  객체를����������� ������������������  원소로����������� ������������������  갖는����������� ������������������  배열을����������� ������������������  반환한다.����������� ������������������  

Page 35: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

이제����������� ������������������  각����������� ������������������  엘리먼트에����������� ������������������  첫����������� ������������������  번째����������� ������������������  핸드폰의����������� ������������������  정보를����������� ������������������  대입해야����������� ������������������  한다고����������� ������������������  하자.����������� ������������������  

Page 36: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

먼저����������� ������������������  Phones����������� ������������������  객체의����������� ������������������  인스턴스를����������� ������������������  생성한다.����������� ������������������  

Page 37: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

이제����������� ������������������  값을����������� ������������������  대입해보자.����������� ������������������  Phones����������� ������������������  객체가����������� ������������������  가진����������� ������������������  메서드를����������� ������������������  자동����������� ������������������  완성����������� ������������������  해준다.����������� ������������������  phones����������� ������������������  객체에����������� ������������������  getPhones����������� ������������������  메서드가����������� ������������������  ����������� ������������������  있다는걸����������� ������������������  알����������� ������������������  수����������� ������������������  있다.����������� ������������������  

Page 38: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

getPhones()����������� ������������������  메서드의����������� ������������������  리턴����������� ������������������  값에����������� ������������������  접근하니����������� ������������������  배열����������� ������������������  메서드들이����������� ������������������  자동����������� ������������������  완성����������� ������������������  된다.����������� ������������������  사용자는����������� ������������������  getPhones����������� ������������������  메서드가����������� ������������������  배열을����������� ������������������  ����������� ������������������  반환����������� ������������������  한다는����������� ������������������  것을����������� ������������������  알����������� ������������������  수����������� ������������������  있다.����������� ������������������  

Page 39: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

반환되는����������� ������������������  배열의����������� ������������������  원소는����������� ������������������  Phone����������� ������������������  객체����������� ������������������  이므로����������� ������������������  Phone����������� ������������������  객체가����������� ������������������  가지고����������� ������������������  있는����������� ������������������  프로퍼티가����������� ������������������  ����������� ������������������  자동����������� ������������������  완성����������� ������������������  된다.����������� ������������������  

Page 40: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

이����������� ������������������  기능을����������� ������������������  이용해면����������� ������������������  빠르고����������� ������������������  오타율이����������� ������������������  적은����������� ������������������  타이핑을����������� ������������������  할����������� ������������������  수����������� ������������������  있게����������� ������������������  된다.����������� ������������������  

Page 41: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

WebStorm과����������� ������������������  

Refactoring����������� ������������������  05����������� ������������������  

background����������� ������������������  :����������� ������������������  http://goo.gl/xBkwRe����������� ������������������  

Page 42: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

Refactoring����������� ������������������  코드����������� ������������������  수정으로����������� ������������������  발생할����������� ������������������  수����������� ������������������  ����������� ������������������  있는����������� ������������������  오류를����������� ������������������   최대한����������� ������������������   낮추면서����������� ������������������  ����������� ������������������  코드를����������� ������������������  정리하는����������� ������������������  기법����������� ������������������  

Page 43: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

Rename����������� ������������������  

메서드의����������� ������������������  이름이����������� ������������������  그����������� ������������������  목적을����������� ������������������  드러내지����������� ������������������  못하고����������� ������������������  있다면����������� ������������������  메서드의����������� ������������������  이름을����������� ������������������  ����������� ������������������  바꿔라.����������� ������������������  

����������� ������������������  마틴����������� ������������������  파울러����������� ������������������  

Refactoring����������� ������������������  

Page 44: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO/1����������� ������������������  

translateX����������� ������������������  함수가����������� ������������������  있다.����������� ������������������  이����������� ������������������  함수의����������� ������������������  지역����������� ������������������  변수인����������� ������������������  velocity의����������� ������������������  이름을����������� ������������������  speed로����������� ������������������  rename����������� ������������������  하고����������� ������������������  싶다고����������� ������������������  하자.����������� ������������������  

Page 45: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO/1����������� ������������������  

변경하고자����������� ������������������  하는����������� ������������������  지역����������� ������������������  변수를����������� ������������������  오른쪽����������� ������������������  마우스����������� ������������������  클릭하고����������� ������������������  Refactor����������� ������������������  ->����������� ������������������  rename����������� ������������������  순으로����������� ������������������  메뉴를����������� ������������������  선택한다.����������� ������������������  

Page 46: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO/1����������� ������������������  

지역����������� ������������������  변수를����������� ������������������  rename할����������� ������������������  수����������� ������������������  있는����������� ������������������  모드로����������� ������������������  변환����������� ������������������  됐다.����������� ������������������  ����������� ������������������  ����������� ������������������  이제����������� ������������������  이름을����������� ������������������  변경한다.����������� ������������������  

Page 47: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO/1����������� ������������������  

Page 48: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO/1����������� ������������������  

Page 49: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO/1����������� ������������������  

Page 50: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO/1����������� ������������������  

Page 51: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO/1����������� ������������������  

이처럼����������� ������������������  함수나����������� ������������������  메서드����������� ������������������  몸체����������� ������������������  내의����������� ������������������  지역����������� ������������������  변수를����������� ������������������  한꺼번에����������� ������������������  변경할����������� ������������������  수����������� ������������������  있다.����������� ������������������  ����������� ������������������  직접����������� ������������������  지역����������� ������������������  변수를����������� ������������������  rename����������� ������������������  하는����������� ������������������  것은����������� ������������������  실수����������� ������������������  할����������� ������������������  수����������� ������������������  있지만����������� ������������������  이����������� ������������������  기능을����������� ������������������  사용하면����������� ������������������  미연에����������� ������������������  방지할����������� ������������������  수����������� ������������������  있다.����������� ������������������  

Page 52: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO/2����������� ������������������  

Greeter.js의����������� ������������������  Greeter����������� ������������������  객체는����������� ������������������  sayHello����������� ������������������  메서드를����������� ������������������  가지고����������� ������������������  있다.����������� ������������������  

Page 53: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO/2����������� ������������������  

그리고����������� ������������������  playground.js에서����������� ������������������  Greeter����������� ������������������  객체의����������� ������������������  sayHello����������� ������������������  메서드를����������� ������������������  사용����������� ������������������  중����������� ������������������  이다.����������� ������������������  ����������� ������������������  

Page 54: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO/2����������� ������������������  

그럼����������� ������������������  sayHello를����������� ������������������  rename����������� ������������������  해보자.����������� ������������������  sayHello����������� ������������������  메서드에서����������� ������������������  마우스����������� ������������������  오른쪽����������� ������������������  버튼을����������� ������������������  클릭하여����������� ������������������  Refactor����������� ������������������  ->����������� ������������������  rename����������� ������������������  순으로����������� ������������������  ����������� ������������������  메뉴를����������� ������������������  클릭한다.����������� ������������������  

Page 55: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO/2����������� ������������������  

Rename����������� ������������������  팝업����������� ������������������  창이����������� ������������������  열리면����������� ������������������  변경����������� ������������������  하고자����������� ������������������  하는����������� ������������������  메서드����������� ������������������  명을����������� ������������������  입력한����������� ������������������  후����������� ������������������  Refactor����������� ������������������  버튼을����������� ������������������  클릭한다.����������� ������������������  

Page 56: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO/2����������� ������������������  

sayHello����������� ������������������  메서드를����������� ������������������  greet����������� ������������������  메서드로����������� ������������������  Rename����������� ������������������  했다.����������� ������������������  그럼����������� ������������������  이����������� ������������������  메서드를����������� ������������������  ����������� ������������������  사용하는����������� ������������������  측은����������� ������������������  어떻게����������� ������������������  되었을까?����������� ������������������  

Page 57: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO/2����������� ������������������  

playground.js의����������� ������������������  소스����������� ������������������  코드����������� ������������������  역시����������� ������������������  Rename이����������� ������������������  반영����������� ������������������  됐다.����������� ������������������  ����������� ������������������  ����������� ������������������  이처럼����������� ������������������  의존하고����������� ������������������  있는����������� ������������������  코드를����������� ������������������  분석하고����������� ������������������  반영하여����������� ������������������  안전성이����������� ������������������  보장되도록����������� ������������������  rename을����������� ������������������  지원한다.����������� ������������������  

Page 58: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

Safe����������� ������������������  Delete����������� ������������������  

삭제하려고����������� ������������������  하는����������� ������������������  변수나����������� ������������������  객체의����������� ������������������  ����������� ������������������  의존����������� ������������������   관계를����������� ������������������  파악하여����������� ������������������  안전성을����������� ������������������  ����������� ������������������  검사해����������� ������������������  알려준다.����������� ������������������  

Refactoring����������� ������������������  

Page 59: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

greet����������� ������������������  메서드를����������� ������������������  삭제하려고����������� ������������������  한다.����������� ������������������  이����������� ������������������  메서드는����������� ������������������  public����������� ������������������  메서드이므로����������� ������������������  다른����������� ������������������  곳에서����������� ������������������  사용하고����������� ������������������  있을����������� ������������������  가능성이����������� ������������������  많다.����������� ������������������  

Page 60: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

Greet����������� ������������������  메서드를����������� ������������������  playground.js에서����������� ������������������  사용하고����������� ������������������  있다.����������� ������������������  유지보수����������� ������������������  개발자가����������� ������������������  이����������� ������������������  사실을����������� ������������������  모른체����������� ������������������  삭제한다면����������� ������������������  오류가����������� ������������������  날����������� ������������������  것이다.����������� ������������������  ����������� ������������������  그렇다고����������� ������������������  여러개의����������� ������������������  파일을����������� ������������������  전부����������� ������������������  검색해서����������� ������������������  의존����������� ������������������  코드를����������� ������������������  찾을����������� ������������������  수도����������� ������������������  없다.����������� ������������������  

DEMO����������� ������������������  

Page 61: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

Greet����������� ������������������  메서드에서����������� ������������������  마우스����������� ������������������  오른쪽����������� ������������������  버튼을����������� ������������������  클릭하여����������� ������������������  Refactor����������� ������������������  ->����������� ������������������  safe����������� ������������������  Delete����������� ������������������  순으로����������� ������������������  메뉴를����������� ������������������  선택한다.����������� ������������������  

DEMO����������� ������������������  

Page 62: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

Safe����������� ������������������  Delete����������� ������������������  팝업창이����������� ������������������  열리면����������� ������������������  OK����������� ������������������  버튼을����������� ������������������  클릭하여����������� ������������������  진행한다.����������� ������������������  

DEMO����������� ������������������  

Page 63: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

그러면����������� ������������������  어디선가����������� ������������������  사용되고����������� ������������������  있어����������� ������������������  위험하다고����������� ������������������  경고한다.����������� ������������������  ����������� ������������������  View����������� ������������������  usages����������� ������������������  버튼을����������� ������������������  클릭한다.����������� ������������������  

DEMO����������� ������������������  

Page 64: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

하단����������� ������������������  패널에����������� ������������������  어느����������� ������������������  파일의����������� ������������������  몇번째����������� ������������������  라인에서����������� ������������������  의존하고����������� ������������������  있는지����������� ������������������  읽기����������� ������������������  쉽게����������� ������������������  출력한다.����������� ������������������  

DEMO����������� ������������������  

Page 65: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

해당하는����������� ������������������  코드에서����������� ������������������  오른쪽����������� ������������������  마우스����������� ������������������  버튼을����������� ������������������  클릭하여����������� ������������������  Jump����������� ������������������  to����������� ������������������  Source����������� ������������������  메뉴를����������� ������������������  선택하면����������� ������������������  

Page 66: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

의존하는����������� ������������������  코드로����������� ������������������  Trace����������� ������������������  된다.����������� ������������������  

Page 67: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

Inline����������� ������������������  Method����������� ������������������  

메서드의����������� ������������������  몸체가����������� ������������������  메서드의����������� ������������������  이름만큼����������� ������������������  이나����������� ������������������  명확할����������� ������������������  때는����������� ������������������  호출하는����������� ������������������  곳에����������� ������������������  메서드����������� ������������������  몸체를����������� ������������������  넣고,����������� ������������������  메서드를����������� ������������������  삭제����������� ������������������  하라.����������� ������������������  

����������� ������������������  마틴����������� ������������������  파울러����������� ������������������  

Refactoring����������� ������������������  

Page 68: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

_createMessage����������� ������������������  메서드는����������� ������������������  로직이����������� ������������������  단순하고����������� ������������������  코드����������� ������������������  자체로����������� ������������������  의미를����������� ������������������  잘����������� ������������������  나타내����������� ������������������  주고����������� ������������������  있기����������� ������������������  때문에����������� ������������������  별도의����������� ������������������  메서드를����������� ������������������  만들����������� ������������������  필요가����������� ������������������  없다.����������� ������������������  

Page 69: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

마우스����������� ������������������  오른쪽����������� ������������������  버튼을����������� ������������������  클릭하여����������� ������������������  Refactor����������� ������������������  ->����������� ������������������  Inline����������� ������������������  순으로����������� ������������������  메뉴를����������� ������������������  선택한다.����������� ������������������  

Page 70: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

상단의����������� ������������������  라디오����������� ������������������  버튼을����������� ������������������  선택한����������� ������������������  후����������� ������������������  Refactor����������� ������������������  버튼을����������� ������������������  클릭한다.����������� ������������������  

Page 71: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

_createMessage����������� ������������������  메서드는����������� ������������������  삭제되고����������� ������������������  메서드를����������� ������������������  사용하고����������� ������������������  있던����������� ������������������  greet����������� ������������������  메서드에����������� ������������������  inline����������� ������������������  되었다.����������� ������������������  

Page 72: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

Extract����������� ������������������  Parameter����������� ������������������  

함수나����������� ������������������  메서드����������� ������������������  몸체에����������� ������������������  하드코딩����������� ������������������  ����������� ������������������  되어있는����������� ������������������  값을����������� ������������������  전달인자로����������� ������������������  대체한다.����������� ������������������  

Refactoring����������� ������������������  

Page 73: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

엘리먼트의����������� ������������������  ID값과,����������� ������������������  메시지����������� ������������������  값이����������� ������������������  하드����������� ������������������  코딩����������� ������������������  되어있다.����������� ������������������  처음엔����������� ������������������  문제����������� ������������������  없었지만����������� ������������������  요구사항의����������� ������������������  변동으로����������� ������������������  이����������� ������������������  값이����������� ������������������  동적으로����������� ������������������  바뀌어야����������� ������������������  한다.����������� ������������������  

Page 74: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

하드����������� ������������������  코딩된����������� ������������������  값을����������� ������������������  드래그����������� ������������������  하여����������� ������������������  마우스����������� ������������������  오른쪽����������� ������������������  버튼을����������� ������������������  클릭한����������� ������������������  후����������� ������������������  Refactor����������� ������������������  ->����������� ������������������  Extract����������� ������������������  ->����������� ������������������  Parameter����������� ������������������  순으로����������� ������������������  메뉴를����������� ������������������  선택한다.����������� ������������������  

Page 75: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

그러면����������� ������������������  전달인자로����������� ������������������  ID����������� ������������������  값을����������� ������������������  받을����������� ������������������  수����������� ������������������  있고,����������� ������������������  만약����������� ������������������  생략되면����������� ������������������  값이����������� ������������������  초기화����������� ������������������  되도록����������� ������������������  리팩토링����������� ������������������  된다.����������� ������������������  

Page 76: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

2번째����������� ������������������  값도����������� ������������������  같은����������� ������������������  방법으로����������� ������������������  리팩토링����������� ������������������  한다.����������� ������������������  

Page 77: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

Extract����������� ������������������  Method����������� ������������������  

그룹으로����������� ������������������  함께����������� ������������������  묶을����������� ������������������  수����������� ������������������  있는����������� ������������������  코드����������� ������������������  조각이����������� ������������������  있으면,����������� ������������������  코드의����������� ������������������  목적이����������� ������������������  잘����������� ������������������  드러나도록����������� ������������������  메소드의����������� ������������������  이름을����������� ������������������  지어����������� ������������������  별도의����������� ������������������  메서드로����������� ������������������  뽑아낸다.����������� ������������������  

����������� ������������������  마틴����������� ������������������  파울러����������� ������������������  

Refactoring����������� ������������������  

Page 78: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

배너를����������� ������������������  출력하는����������� ������������������  로직은����������� ������������������  메서드로����������� ������������������  작성되어����������� ������������������  있지만����������� ������������������  이����������� ������������������  코드는����������� ������������������  무엇을����������� ������������������  하는����������� ������������������  코드인지����������� ������������������  쉽게����������� ������������������  읽기����������� ������������������  어렵다.����������� ������������������  

Page 79: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

Extract����������� ������������������  할����������� ������������������  코드를����������� ������������������  선택한����������� ������������������  후����������� ������������������  마우스����������� ������������������  오른쪽����������� ������������������  버튼을����������� ������������������  클릭하고����������� ������������������  Refactor����������� ������������������  ->����������� ������������������  Extract����������� ������������������  ->����������� ������������������  Method����������� ������������������  순으로����������� ������������������  메뉴를����������� ������������������  선택한다.����������� ������������������  

Page 80: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

그러면����������� ������������������  자바스크립트����������� ������������������  친화적으로����������� ������������������  어느����������� ������������������  공간에����������� ������������������  Extract����������� ������������������  할����������� ������������������  것이지����������� ������������������  묻는다.����������� ������������������  Global은����������� ������������������  전역����������� ������������������  공간,����������� ������������������  Object����������� ������������������  assigned는����������� ������������������  객체����������� ������������������  내부에,����������� ������������������  function����������� ������������������  은����������� ������������������  현재����������� ������������������  함수����������� ������������������  안을����������� ������������������  뜻한다.����������� ������������������  ����������� ������������������  Object����������� ������������������  assigned����������� ������������������  to����������� ������������������  Greeter3.prototype을����������� ������������������  선택한다.����������� ������������������  

Page 81: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

메서드����������� ������������������  명을����������� ������������������  지정하고����������� ������������������  OK����������� ������������������  버튼을����������� ������������������  클릭한다.����������� ������������������  

Page 82: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO����������� ������������������  

코드가����������� ������������������  리팩토링되어����������� ������������������  한결����������� ������������������  읽기����������� ������������������  쉬워졌다.����������� ������������������  

Page 83: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

WebStorm과����������� ������������������  

코드����������� ������������������  품질����������� ������������������  검증����������� ������������������  03����������� ������������������  

background����������� ������������������  :����������� ������������������  http://goo.gl/33IXCG����������� ������������������  

Page 84: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

JSLint����������� ������������������  

자바스크립트����������� ������������������  코드의����������� ������������������  구문을����������� ������������������  검사할����������� ������������������  목적으로����������� ������������������  만들어진����������� ������������������  품질����������� ������������������  검증����������� ������������������  도구����������� ������������������  

Page 85: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

Setting����������� ������������������  

Page 86: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

Setting����������� ������������������  

Page 87: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO/1����������� ������������������  

변수����������� ������������������  i����������� ������������������  에����������� ������������������  빨간색����������� ������������������  밑����������� ������������������  줄이����������� ������������������  보인다.����������� ������������������  ����������� ������������������  var����������� ������������������  키워드는����������� ������������������  스코프를����������� ������������������  나타내는����������� ������������������  ����������� ������������������  키워드로써,����������� ������������������  애써����������� ������������������  여러번����������� ������������������  선언하지����������� ������������������  않아도����������� ������������������  된다.����������� ������������������  ����������� ������������������  이����������� ������������������  같은����������� ������������������  사항을����������� ������������������  JSLint가����������� ������������������  실시간����������� ������������������  ����������� ������������������  검증����������� ������������������  하여����������� ������������������  에러임을����������� ������������������  나타내고����������� ������������������  ����������� ������������������  있다.����������� ������������������  

Page 88: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO/1����������� ������������������  

또한,����������� ������������������  우측����������� ������������������  상단에서����������� ������������������  코드����������� ������������������  품질����������� ������������������  상태를����������� ������������������  바로����������� ������������������  알����������� ������������������  수����������� ������������������  있다.����������� ������������������  빨간색에����������� ������������������  가까울수록����������� ������������������  코드에����������� ������������������  오류나����������� ������������������  경고가����������� ������������������  많다는����������� ������������������  뜻이다.����������� ������������������  

Page 89: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

DEMO/1����������� ������������������  

변수를����������� ������������������  var����������� ������������������  키워드����������� ������������������  하나로����������� ������������������  ����������� ������������������  선언하여����������� ������������������  오류를����������� ������������������  수정한다.����������� ������������������  코드����������� ������������������  품질����������� ������������������  상태도����������� ������������������  그린으로����������� ������������������  바뀐다.����������� ������������������  

Page 90: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

선언 되지 않은 변수를 사용하면 JSLint에서 오류 메시지를 출력한다.

DEMO/2����������� ������������������  

Page 91: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

상단에 변수를 선언하여 오류를 수정한다.

DEMO/2����������� ������������������  

Page 92: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

Test-runner����������� ������������������  

Karma����������� ������������������  작성된����������� ������������������  테스트����������� ������������������  코드를����������� ������������������  자동으로����������� ������������������  실행해����������� ������������������  주는����������� ������������������  Test-runner����������� ������������������  

����������� ������������������  

Page 93: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

http://youtu.be/IsvLKNqwgV0����������� ������������������  

Page 94: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

WebStorm과����������� ������������������  

Node����������� ������������������  디버깅����������� ������������������  07����������� ������������������  

background����������� ������������������  :����������� ������������������  http://goo.gl/gksF1W����������� ������������������  

Page 95: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

http://youtu.be/nPQPzAIiQyI����������� ������������������  

Page 96: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

WebStorm과����������� ������������������  

테스크����������� ������������������  자동화����������� ������������������  08����������� ������������������  

background����������� ������������������  :����������� ������������������  http://goo.gl/Jr9Dhr����������� ������������������  

Page 97: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

Task-runner����������� ������������������  

Grunt����������� ������������������  프런트엔드����������� ������������������  세상에서����������� ������������������  가장����������� ������������������  ����������� ������������������  ����������� ������������������  잘����������� ������������������  알려진����������� ������������������  테스크����������� ������������������  자동화����������� ������������������  도구����������� ������������������  

Page 98: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

http://youtu.be/Y8TxUCPaFZ0����������� ������������������  

Page 99: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

좋은����������� ������������������  IDE와����������� ������������������  지속적인����������� ������������������  코드����������� ������������������  검증과����������� ������������������  자동화된����������� ������������������  테스크는����������� ������������������  ����������� ������������������  품질����������� ������������������  좋은����������� ������������������  코드를����������� ������������������  생산할����������� ������������������  수����������� ������������������  있도록����������� ������������������  도와줍니다.����������� ������������������  

background����������� ������������������  :����������� ������������������  http://goo.gl/vBf87z����������� ������������������  

Page 100: 진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)

감사합니다.����������� ������������������  

background����������� ������������������  :����������� ������������������  http://goo.gl/vBf87z����������� ������������������