진보한 개발 환경에서 품질 좋은 코드 생산 (webstorm)
DESCRIPTION
Karma 시연 영상 : http://youtu.be/IsvLKNqwgV0 Node.js 디버깅 시연 영상 : http://youtu.be/nPQPzAIiQyI Grunt 시연 영상 : http://youtu.be/Y8TxUCPaFZ0TRANSCRIPT
진보한����������� ������������������ 개발����������� ������������������ 환경에서����������� ������������������
품질����������� ������������������ 좋은����������� ������������������ 코드����������� ������������������ 생산����������� ������������������ !����������� ������������������
background����������� ������������������ :����������� ������������������ http://goo.gl/OFXKv0����������� ������������������
NHN����������� ������������������ Technology����������� ������������������ services����������� ������������������ Front-End����������� ������������������ Development����������� ������������������ Team����������� ������������������
이름����������� ������������������
이메일����������� ������������������
TECH@NAVER����������� ������������������ 프런트엔드����������� ������������������ 개발의����������� ������������������ 모든����������� ������������������ 것(가제)����������� ������������������ 집필����������� ������������������ 중����������� ������������������
방법론,����������� ������������������ 패턴,����������� ������������������ 설계����������� ������������������ 등����������� ������������������ 공학적인����������� ������������������ 것����������� ������������������
힙합과����������� ������������������ 사케를����������� ������������������ 좋아하는����������� ������������������ 프런트엔드개발팀의����������� ������������������ 코드소총수����������� ������������������
주우영(코드소총수)����������� ������������������
[email protected]����������� ������������������
짧은소개����������� ������������������
관심분야����������� ������������������
특이사항����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������
진보한����������� ������������������ 개발����������� ������������������ 환경����������� ������������������
품질����������� ������������������ 좋은����������� ������������������ 코드����������� ������������������ 생산����������� ������������������
성숙한����������� ������������������ 방법론����������� ������������������
연구된����������� ������������������ 설계와����������� ������������������ 패턴����������� ������������������
고수준����������� ������������������ 라이브러리����������� ������������������
통합된����������� ������������������ 개발����������� ������������������ 환경����������� ������������������ 도구����������� ������������������
Unit����������� ������������������ Test����������� ������������������
Code����������� ������������������ Lint����������� ������������������
Task����������� ������������������ Automation����������� ������������������
Test-runner&Coverage����������� ������������������
background����������� ������������������ :����������� ������������������ http://goo.gl/9C6UOQ����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������
성숙한����������� ������������������ 방법론����������� ������������������
연구된����������� ������������������ 설계와����������� ������������������ 패턴����������� ������������������
고수준����������� ������������������ 라이브러리����������� ������������������
통합된����������� ������������������ 개발����������� ������������������ 환경����������� ������������������ 도구����������� ������������������
Unit����������� ������������������ Test����������� ������������������
Code����������� ������������������ Lint����������� ������������������
Task����������� ������������������ Automation����������� ������������������
Test-runner&Coverage����������� ������������������
WebStorm����������� ������������������
Karma����������� ������������������
JSLint����������� ������������������
Grunt����������� ������������������
background����������� ������������������ :����������� ������������������ http://goo.gl/9C6UOQ����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������
WebStorm����������� ������������������
Karma����������� ������������������ JSLint����������� ������������������ Grunt����������� ������������������ Debugger����������� ������������������
background����������� ������������������ :����������� ������������������ http://goo.gl/9C6UOQ����������� ������������������
좋은����������� ������������������ IDE란����������� ������������������
무엇인가?����������� ������������������ 01����������� ������������������
background����������� ������������������ :����������� ������������������ http://goo.gl/aNOKJ6����������� ������������������
오류없는����������� ������������������ 코드를����������� ������������������ 빠르게����������� ������������������ 생산할����������� ������������������ 수����������� ������������������ ����������� ������������������ 있도록����������� ������������������ 하는����������� ������������������ 쾌적한����������� ������������������ 개발����������� ������������������ 도구����������� ������������������
Code����������� ������������������ lint����������� ������������������ Refactor����������� ������������������
Test-runner����������� ������������������ Debugger����������� ������������������ ����������� ������������������
Auto-complete����������� ������������������ Hinting����������� ������������������
Code����������� ������������������ Trace����������� ������������������
Highlighter����������� ������������������ Reliability����������� ������������������ Scalability����������� ������������������
오류없는����������� ������������������ 코드를����������� ������������������
빠르고����������� ������������������
쾌적하게����������� ������������������
Integrated����������� ������������������ ����������� ������������������ Development����������� ������������������ ����������� ������������������ Environment����������� ������������������
좋은����������� ������������������ IDE를����������� ������������������
소개합니다.����������� ������������������ 02����������� ������������������
background����������� ������������������ :����������� ������������������ http://goo.gl/eHqY5O����������� ������������������
Sublime����������� ������������������ Text����������� ������������������
구글의����������� ������������������ 엔지니어였던����������� ������������������ Jon����������� ������������������ Skimmer는����������� ������������������ ����������� ������������������ 2005년����������� ������������������ 12월����������� ������������������ 부터����������� ������������������ 3D����������� ������������������ 가속����������� ������������������ 기능을����������� ������������������ ����������� ������������������ 갖춘����������� ������������������ 텍스트����������� ������������������ 편집기를����������� ������������������ 상상해����������� ������������������ 왔다가����������� ������������������ ����������� ������������������ 2007년����������� ������������������ 11월에����������� ������������������ 첫����������� ������������������ 프로토타입을����������� ������������������ ����������� ������������������ 개발했다.����������� ������������������ ����������� ������������������ 이후����������� ������������������ 편집기를����������� ������������������ 완성하고자����������� ������������������ 구글����������� ������������������ ����������� ������������������ 엔지니어를����������� ������������������ 그만두고����������� ������������������ 개발에����������� ������������������ 몰두����������� ������������������ 하여����������� ������������������ SublimeText1을����������� ������������������ 2008년에����������� ������������������ ����������� ������������������ 발표했다.����������� ������������������
����������� ������������������ 가볍고����������� ������������������ 편리하여����������� ������������������ 많은����������� ������������������ 프런트엔드����������� ������������������ 개발자들이����������� ������������������ 주����������� ������������������ 에디터로����������� ������������������ 사용하고����������� ������������������ 있다 .����������� ������������������
Sublime����������� ������������������ Text����������� ������������������
Web����������� ������������������ WebStorm은����������� ������������������ IntelliJ로����������� ������������������ 유명한����������� ������������������ JetBrains사����������� ������������������ 에서����������� ������������������ 개발한����������� ������������������ 크로스����������� ������������������ ����������� ������������������ 플랫폼����������� ������������������ 프런트엔드����������� ������������������ 전용����������� ������������������ IDE다.����������� ������������������ ����������� ������������������
����������� ������������������ 2009년����������� ������������������ 부터����������� ������������������ 개발하여����������� ������������������ 2010년에����������� ������������������ 1.0����������� ������������������ ����������� ������������������ 베타를����������� ������������������ 발표했으며����������� ������������������ 지금은����������� ������������������ 버전����������� ������������������ 8이다.����������� ������������������
����������� ������������������ 프런트엔드����������� ������������������ 개발����������� ������������������ 도구에는����������� ������������������ 없던����������� ������������������ 많은����������� ������������������ 기능을����������� ������������������ 갖추고����������� ������������������ 있어����������� ������������������ 매니아����������� ������������������ 사용층이����������� ������������������ ����������� ������������������ 생기기����������� ������������������ 시작했다.����������� ������������������
����������� ������������������
Storm����������� ������������������
Why����������� ������������������ did����������� ������������������ we����������� ������������������ choose����������� ������������������ ����������� ������������������
이전까지의����������� ������������������ 프런트엔드����������� ������������������ 개발����������� ������������������ 도구는����������� ������������������ 기능이나����������� ������������������ 안정성이����������� ������������������ 상당히����������� ������������������ 미흡했다.����������� ������������������
����������� ������������������ WebStorm은����������� ������������������ Auto-complete����������� ������������������ Code����������� ������������������ trace,����������� ������������������ lint,����������� ������������������ Test-runner����������� ������������������ 그리고����������� ������������������ ����������� ������������������ Debugger����������� ������������������ 등을����������� ������������������ 지원하며����������� ������������������ 무엇보다����������� ������������������ ����������� ������������������ 신뢰할����������� ������������������ 수����������� ������������������ 있는����������� ������������������ 리팩토링����������� ������������������ 기능을����������� ������������������ ����������� ������������������ 지원하면서����������� ������������������ 프런트엔드����������� ������������������ 개발����������� ������������������ 환경은����������� ������������������ ����������� ������������������ 한층����������� ������������������ 진보했다.����������� ������������������
����������� ������������������ 우리는����������� ������������������ 여기에서����������� ������������������ 얻을����������� ������������������ 수����������� ������������������ 있는����������� ������������������ 수����������� ������������������ 많은����������� ������������������ 장점을����������� ������������������ 취하고자����������� ������������������ 채택하여����������� ������������������ 사용하고����������� ������������������ ����������� ������������������ 있다.����������� ������������������
Web����������� ������������������ Storm����������� ������������������
문서화를����������� ������������������ 위한����������� ������������������
JSDoc3����������� ������������������ 03����������� ������������������
background����������� ������������������ :����������� ������������������ http://goo.gl/uxWq1E����������� ������������������
JSDoc3����������� ������������������ JAVADoc과����������� ������������������ 비슷한����������� ������������������ 형식의����������� ������������������ ����������� ������������������ 구문을����������� ������������������ 사용하는����������� ������������������ 자바스크립트����������� ������������������ ����������� ������������������ 문서화����������� ������������������ 도구����������� ������������������
변수나����������� ������������������ 전달인자의����������� ������������������ 타입을����������� ������������������ 나타낸다.����������� ������������������
@type(@param)����������� ������������������
/** * @param {Object} obj * @param {string|number} key */var findBy = function(obj, key){ // do something... };
/** * @type {string} */var any = ‘name’;
함수나����������� ������������������ 메서드의����������� ������������������ 반환����������� ������������������ 타입을����������� ������������������ 나타낸다.����������� ������������������
@returns����������� ������������������
/** * @returns {boolean} */function isString(){ return false;}
원시타입,����������� ������������������ 객체타입,����������� ������������������ 배열타입����������� ������������������ 등����������� ������������������ 다양한����������� ������������������ 타입을����������� ������������������ 나타낼����������� ������������������ 수����������� ������������������ 있다.����������� ������������������
Type����������� ������������������ names����������� ������������������
/** * @type {number|string} * @type {Object} * @type {ClassName} * @type {Array.<string>} */
WebStorm의����������� ������������������
정적����������� ������������������ 분석����������� ������������������ 능력����������� ������������������ 04����������� ������������������
background����������� ������������������ :����������� ������������������ http://goo.gl/SzRHgs����������� ������������������
전달인자����������� ������������������ 타입����������� ������������������ 힌팅����������� ������������������ ����������� ������������������ 전달인자가����������� ������������������ 기대하는����������� ������������������ 형을����������� ������������������ ����������� ������������������ 분석하여����������� ������������������ 사용자에게����������� ������������������ 힌팅����������� ������������������ 해주는����������� ������������������ 기능����������� ������������������
CODE����������� ������������������
/** * @param {Array} arr * @param {string|number} key */var findBy = function(arr, key){ // do something... };
DEMO����������� ������������������
DEMO����������� ������������������
작성된����������� ������������������ 함수를����������� ������������������ 찾아����������� ������������������ 자동����������� ������������������ 완성����������� ������������������ 한다.����������� ������������������ JSDoc3����������� ������������������ 주석을����������� ������������������ 분석하여����������� ������������������ 전달인자의����������� ������������������ ����������� ������������������ 타입����������� ������������������ 정보도����������� ������������������ 제공한다.����������� ������������������
DEMO����������� ������������������
전달인자를����������� ������������������ 입력하게����������� ������������������ 되면����������� ������������������ 툴팁으로����������� ������������������ ����������� ������������������ 함수가����������� ������������������ 기대하는����������� ������������������ 전달인자����������� ������������������ 갯수와����������� ������������������ 이름����������� ������������������ 그리고����������� ������������������ 타입����������� ������������������ 정보를����������� ������������������ 제공한다.����������� ������������������ ����������� ������������������ 사용자는,����������� ������������������ 함수����������� ������������������ 코드를����������� ������������������ 알����������� ������������������ 필요����������� ������������������ 없이����������� ������������������ 적절한����������� ������������������ 값을����������� ������������������ 전달하여����������� ������������������ 함수를����������� ������������������ 사용할����������� ������������������ 수����������� ������������������ 있다.����������� ������������������
DEMO����������� ������������������
전달인자를����������� ������������������ 입력하는����������� ������������������ 위치를����������� ������������������ 하일라이팅����������� ������������������ 하여����������� ������������������ 알려준다.����������� ������������������
타입����������� ������������������ 오류����������� ������������������ 경고����������� ������������������ ����������� ������������������ 형을����������� ������������������ 추론하여����������� ������������������ 변수����������� ������������������ 대입이나����������� ������������������ ����������� ������������������ 사용에����������� ������������������ 문제가����������� ������������������ 있다고����������� ������������������ 판단되면����������� ������������������ 경고����������� ������������������ 메시지를����������� ������������������ 출력하는����������� ������������������ 기능����������� ������������������
DEMO/1����������� ������������������
정수형이나����������� ������������������ 문자열����������� ������������������ 타입을����������� ������������������ 가지는����������� ������������������ some이라는����������� ������������������ 변수를����������� ������������������ ����������� ������������������ 선언했다.����������� ������������������
DEMO/1����������� ������������������
정수를����������� ������������������ 대입하면����������� ������������������ 문제����������� ������������������ 없다.����������� ������������������
문자열을����������� ������������������ 대입해도����������� ������������������ 문제����������� ������������������ 없다.����������� ������������������
리터럴����������� ������������������ 객체를����������� ������������������ 대입하니����������� ������������������ 잘못된����������� ������������������ 타입을����������� ������������������ 대입했다고����������� ������������������ 경고한다.����������� ������������������
변수����������� ������������������ 뿐만����������� ������������������ 아니라����������� ������������������ 전달인자의����������� ������������������ 타입도����������� ������������������ 검증한다.����������� ������������������
DEMO/2����������� ������������������
복잡한����������� ������������������ 관계도����������� ������������������ 분석하여����������� ������������������ 검증한다.����������� ������������������ 이����������� ������������������ 예제는����������� ������������������ number����������� ������������������ 타입을����������� ������������������ 반환하는����������� ������������������ ����������� ������������������ location����������� ������������������ 함수의����������� ������������������ 결과����������� ������������������ 값을����������� ������������������ boolean����������� ������������������ ����������� ������������������ 타입의����������� ������������������ result����������� ������������������ 변수에����������� ������������������ 대입했기����������� ������������������ 때문에����������� ������������������ 경고창을����������� ������������������ 출력한다.����������� ������������������
DEMO/3����������� ������������������
객체와����������� ������������������ 배열의����������� ������������������ 멤버����������� ������������������ 자동����������� ������������������ 완성����������� ������������������ 객체의����������� ������������������ 키나����������� ������������������ 배열의����������� ������������������ 원소����������� ������������������ ����������� ������������������ ����������� ������������������ 타입을����������� ������������������ 추론하여����������� ������������������ 자동����������� ������������������ 완성����������� ������������������ ����������� ������������������ 해주는����������� ������������������ 기능����������� ������������������
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; } };
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; } };
DEMO����������� ������������������
Phone����������� ������������������ 객체가����������� ������������������ 있다.����������� ������������������ 이����������� ������������������ 객체는����������� ������������������ 핸드폰의����������� ������������������ ����������� ������������������ id,����������� ������������������ type,����������� ������������������ model,����������� ������������������ name����������� ������������������ 같은����������� ������������������ 정보를����������� ������������������ 갖는다.����������� ������������������
DEMO����������� ������������������
Phone����������� ������������������ 객체를����������� ������������������ 배열로����������� ������������������ 가지고����������� ������������������ 있는����������� ������������������ 컬렉션����������� ������������������ 객체다.����������� ������������������ ����������� ������������������ getPhones����������� ������������������ 메서드는����������� ������������������ Phone����������� ������������������ 객체를����������� ������������������ 원소로����������� ������������������ 갖는����������� ������������������ 배열을����������� ������������������ 반환한다.����������� ������������������
DEMO����������� ������������������
이제����������� ������������������ 각����������� ������������������ 엘리먼트에����������� ������������������ 첫����������� ������������������ 번째����������� ������������������ 핸드폰의����������� ������������������ 정보를����������� ������������������ 대입해야����������� ������������������ 한다고����������� ������������������ 하자.����������� ������������������
DEMO����������� ������������������
먼저����������� ������������������ Phones����������� ������������������ 객체의����������� ������������������ 인스턴스를����������� ������������������ 생성한다.����������� ������������������
DEMO����������� ������������������
이제����������� ������������������ 값을����������� ������������������ 대입해보자.����������� ������������������ Phones����������� ������������������ 객체가����������� ������������������ 가진����������� ������������������ 메서드를����������� ������������������ 자동����������� ������������������ 완성����������� ������������������ 해준다.����������� ������������������ phones����������� ������������������ 객체에����������� ������������������ getPhones����������� ������������������ 메서드가����������� ������������������ ����������� ������������������ 있다는걸����������� ������������������ 알����������� ������������������ 수����������� ������������������ 있다.����������� ������������������
DEMO����������� ������������������
getPhones()����������� ������������������ 메서드의����������� ������������������ 리턴����������� ������������������ 값에����������� ������������������ 접근하니����������� ������������������ 배열����������� ������������������ 메서드들이����������� ������������������ 자동����������� ������������������ 완성����������� ������������������ 된다.����������� ������������������ 사용자는����������� ������������������ getPhones����������� ������������������ 메서드가����������� ������������������ 배열을����������� ������������������ ����������� ������������������ 반환����������� ������������������ 한다는����������� ������������������ 것을����������� ������������������ 알����������� ������������������ 수����������� ������������������ 있다.����������� ������������������
DEMO����������� ������������������
반환되는����������� ������������������ 배열의����������� ������������������ 원소는����������� ������������������ Phone����������� ������������������ 객체����������� ������������������ 이므로����������� ������������������ Phone����������� ������������������ 객체가����������� ������������������ 가지고����������� ������������������ 있는����������� ������������������ 프로퍼티가����������� ������������������ ����������� ������������������ 자동����������� ������������������ 완성����������� ������������������ 된다.����������� ������������������
DEMO����������� ������������������
이����������� ������������������ 기능을����������� ������������������ 이용해면����������� ������������������ 빠르고����������� ������������������ 오타율이����������� ������������������ 적은����������� ������������������ 타이핑을����������� ������������������ 할����������� ������������������ 수����������� ������������������ 있게����������� ������������������ 된다.����������� ������������������
WebStorm과����������� ������������������
Refactoring����������� ������������������ 05����������� ������������������
background����������� ������������������ :����������� ������������������ http://goo.gl/xBkwRe����������� ������������������
Refactoring����������� ������������������ 코드����������� ������������������ 수정으로����������� ������������������ 발생할����������� ������������������ 수����������� ������������������ ����������� ������������������ 있는����������� ������������������ 오류를����������� ������������������ 최대한����������� ������������������ 낮추면서����������� ������������������ ����������� ������������������ 코드를����������� ������������������ 정리하는����������� ������������������ 기법����������� ������������������
Rename����������� ������������������
메서드의����������� ������������������ 이름이����������� ������������������ 그����������� ������������������ 목적을����������� ������������������ 드러내지����������� ������������������ 못하고����������� ������������������ 있다면����������� ������������������ 메서드의����������� ������������������ 이름을����������� ������������������ ����������� ������������������ 바꿔라.����������� ������������������
����������� ������������������ 마틴����������� ������������������ 파울러����������� ������������������
Refactoring����������� ������������������
DEMO/1����������� ������������������
translateX����������� ������������������ 함수가����������� ������������������ 있다.����������� ������������������ 이����������� ������������������ 함수의����������� ������������������ 지역����������� ������������������ 변수인����������� ������������������ velocity의����������� ������������������ 이름을����������� ������������������ speed로����������� ������������������ rename����������� ������������������ 하고����������� ������������������ 싶다고����������� ������������������ 하자.����������� ������������������
DEMO/1����������� ������������������
변경하고자����������� ������������������ 하는����������� ������������������ 지역����������� ������������������ 변수를����������� ������������������ 오른쪽����������� ������������������ 마우스����������� ������������������ 클릭하고����������� ������������������ Refactor����������� ������������������ ->����������� ������������������ rename����������� ������������������ 순으로����������� ������������������ 메뉴를����������� ������������������ 선택한다.����������� ������������������
DEMO/1����������� ������������������
지역����������� ������������������ 변수를����������� ������������������ rename할����������� ������������������ 수����������� ������������������ 있는����������� ������������������ 모드로����������� ������������������ 변환����������� ������������������ 됐다.����������� ������������������ ����������� ������������������ ����������� ������������������ 이제����������� ������������������ 이름을����������� ������������������ 변경한다.����������� ������������������
DEMO/1����������� ������������������
DEMO/1����������� ������������������
DEMO/1����������� ������������������
DEMO/1����������� ������������������
DEMO/1����������� ������������������
이처럼����������� ������������������ 함수나����������� ������������������ 메서드����������� ������������������ 몸체����������� ������������������ 내의����������� ������������������ 지역����������� ������������������ 변수를����������� ������������������ 한꺼번에����������� ������������������ 변경할����������� ������������������ 수����������� ������������������ 있다.����������� ������������������ ����������� ������������������ 직접����������� ������������������ 지역����������� ������������������ 변수를����������� ������������������ rename����������� ������������������ 하는����������� ������������������ 것은����������� ������������������ 실수����������� ������������������ 할����������� ������������������ 수����������� ������������������ 있지만����������� ������������������ 이����������� ������������������ 기능을����������� ������������������ 사용하면����������� ������������������ 미연에����������� ������������������ 방지할����������� ������������������ 수����������� ������������������ 있다.����������� ������������������
DEMO/2����������� ������������������
Greeter.js의����������� ������������������ Greeter����������� ������������������ 객체는����������� ������������������ sayHello����������� ������������������ 메서드를����������� ������������������ 가지고����������� ������������������ 있다.����������� ������������������
DEMO/2����������� ������������������
그리고����������� ������������������ playground.js에서����������� ������������������ Greeter����������� ������������������ 객체의����������� ������������������ sayHello����������� ������������������ 메서드를����������� ������������������ 사용����������� ������������������ 중����������� ������������������ 이다.����������� ������������������ ����������� ������������������
DEMO/2����������� ������������������
그럼����������� ������������������ sayHello를����������� ������������������ rename����������� ������������������ 해보자.����������� ������������������ sayHello����������� ������������������ 메서드에서����������� ������������������ 마우스����������� ������������������ 오른쪽����������� ������������������ 버튼을����������� ������������������ 클릭하여����������� ������������������ Refactor����������� ������������������ ->����������� ������������������ rename����������� ������������������ 순으로����������� ������������������ ����������� ������������������ 메뉴를����������� ������������������ 클릭한다.����������� ������������������
DEMO/2����������� ������������������
Rename����������� ������������������ 팝업����������� ������������������ 창이����������� ������������������ 열리면����������� ������������������ 변경����������� ������������������ 하고자����������� ������������������ 하는����������� ������������������ 메서드����������� ������������������ 명을����������� ������������������ 입력한����������� ������������������ 후����������� ������������������ Refactor����������� ������������������ 버튼을����������� ������������������ 클릭한다.����������� ������������������
DEMO/2����������� ������������������
sayHello����������� ������������������ 메서드를����������� ������������������ greet����������� ������������������ 메서드로����������� ������������������ Rename����������� ������������������ 했다.����������� ������������������ 그럼����������� ������������������ 이����������� ������������������ 메서드를����������� ������������������ ����������� ������������������ 사용하는����������� ������������������ 측은����������� ������������������ 어떻게����������� ������������������ 되었을까?����������� ������������������
DEMO/2����������� ������������������
playground.js의����������� ������������������ 소스����������� ������������������ 코드����������� ������������������ 역시����������� ������������������ Rename이����������� ������������������ 반영����������� ������������������ 됐다.����������� ������������������ ����������� ������������������ ����������� ������������������ 이처럼����������� ������������������ 의존하고����������� ������������������ 있는����������� ������������������ 코드를����������� ������������������ 분석하고����������� ������������������ 반영하여����������� ������������������ 안전성이����������� ������������������ 보장되도록����������� ������������������ rename을����������� ������������������ 지원한다.����������� ������������������
Safe����������� ������������������ Delete����������� ������������������
삭제하려고����������� ������������������ 하는����������� ������������������ 변수나����������� ������������������ 객체의����������� ������������������ ����������� ������������������ 의존����������� ������������������ 관계를����������� ������������������ 파악하여����������� ������������������ 안전성을����������� ������������������ ����������� ������������������ 검사해����������� ������������������ 알려준다.����������� ������������������
Refactoring����������� ������������������
DEMO����������� ������������������
greet����������� ������������������ 메서드를����������� ������������������ 삭제하려고����������� ������������������ 한다.����������� ������������������ 이����������� ������������������ 메서드는����������� ������������������ public����������� ������������������ 메서드이므로����������� ������������������ 다른����������� ������������������ 곳에서����������� ������������������ 사용하고����������� ������������������ 있을����������� ������������������ 가능성이����������� ������������������ 많다.����������� ������������������
Greet����������� ������������������ 메서드를����������� ������������������ playground.js에서����������� ������������������ 사용하고����������� ������������������ 있다.����������� ������������������ 유지보수����������� ������������������ 개발자가����������� ������������������ 이����������� ������������������ 사실을����������� ������������������ 모른체����������� ������������������ 삭제한다면����������� ������������������ 오류가����������� ������������������ 날����������� ������������������ 것이다.����������� ������������������ ����������� ������������������ 그렇다고����������� ������������������ 여러개의����������� ������������������ 파일을����������� ������������������ 전부����������� ������������������ 검색해서����������� ������������������ 의존����������� ������������������ 코드를����������� ������������������ 찾을����������� ������������������ 수도����������� ������������������ 없다.����������� ������������������
DEMO����������� ������������������
Greet����������� ������������������ 메서드에서����������� ������������������ 마우스����������� ������������������ 오른쪽����������� ������������������ 버튼을����������� ������������������ 클릭하여����������� ������������������ Refactor����������� ������������������ ->����������� ������������������ safe����������� ������������������ Delete����������� ������������������ 순으로����������� ������������������ 메뉴를����������� ������������������ 선택한다.����������� ������������������
DEMO����������� ������������������
Safe����������� ������������������ Delete����������� ������������������ 팝업창이����������� ������������������ 열리면����������� ������������������ OK����������� ������������������ 버튼을����������� ������������������ 클릭하여����������� ������������������ 진행한다.����������� ������������������
DEMO����������� ������������������
그러면����������� ������������������ 어디선가����������� ������������������ 사용되고����������� ������������������ 있어����������� ������������������ 위험하다고����������� ������������������ 경고한다.����������� ������������������ ����������� ������������������ View����������� ������������������ usages����������� ������������������ 버튼을����������� ������������������ 클릭한다.����������� ������������������
DEMO����������� ������������������
하단����������� ������������������ 패널에����������� ������������������ 어느����������� ������������������ 파일의����������� ������������������ 몇번째����������� ������������������ 라인에서����������� ������������������ 의존하고����������� ������������������ 있는지����������� ������������������ 읽기����������� ������������������ 쉽게����������� ������������������ 출력한다.����������� ������������������
DEMO����������� ������������������
DEMO����������� ������������������
해당하는����������� ������������������ 코드에서����������� ������������������ 오른쪽����������� ������������������ 마우스����������� ������������������ 버튼을����������� ������������������ 클릭하여����������� ������������������ Jump����������� ������������������ to����������� ������������������ Source����������� ������������������ 메뉴를����������� ������������������ 선택하면����������� ������������������
DEMO����������� ������������������
의존하는����������� ������������������ 코드로����������� ������������������ Trace����������� ������������������ 된다.����������� ������������������
Inline����������� ������������������ Method����������� ������������������
메서드의����������� ������������������ 몸체가����������� ������������������ 메서드의����������� ������������������ 이름만큼����������� ������������������ 이나����������� ������������������ 명확할����������� ������������������ 때는����������� ������������������ 호출하는����������� ������������������ 곳에����������� ������������������ 메서드����������� ������������������ 몸체를����������� ������������������ 넣고,����������� ������������������ 메서드를����������� ������������������ 삭제����������� ������������������ 하라.����������� ������������������
����������� ������������������ 마틴����������� ������������������ 파울러����������� ������������������
Refactoring����������� ������������������
DEMO����������� ������������������
_createMessage����������� ������������������ 메서드는����������� ������������������ 로직이����������� ������������������ 단순하고����������� ������������������ 코드����������� ������������������ 자체로����������� ������������������ 의미를����������� ������������������ 잘����������� ������������������ 나타내����������� ������������������ 주고����������� ������������������ 있기����������� ������������������ 때문에����������� ������������������ 별도의����������� ������������������ 메서드를����������� ������������������ 만들����������� ������������������ 필요가����������� ������������������ 없다.����������� ������������������
DEMO����������� ������������������
마우스����������� ������������������ 오른쪽����������� ������������������ 버튼을����������� ������������������ 클릭하여����������� ������������������ Refactor����������� ������������������ ->����������� ������������������ Inline����������� ������������������ 순으로����������� ������������������ 메뉴를����������� ������������������ 선택한다.����������� ������������������
DEMO����������� ������������������
상단의����������� ������������������ 라디오����������� ������������������ 버튼을����������� ������������������ 선택한����������� ������������������ 후����������� ������������������ Refactor����������� ������������������ 버튼을����������� ������������������ 클릭한다.����������� ������������������
DEMO����������� ������������������
_createMessage����������� ������������������ 메서드는����������� ������������������ 삭제되고����������� ������������������ 메서드를����������� ������������������ 사용하고����������� ������������������ 있던����������� ������������������ greet����������� ������������������ 메서드에����������� ������������������ inline����������� ������������������ 되었다.����������� ������������������
Extract����������� ������������������ Parameter����������� ������������������
함수나����������� ������������������ 메서드����������� ������������������ 몸체에����������� ������������������ 하드코딩����������� ������������������ ����������� ������������������ 되어있는����������� ������������������ 값을����������� ������������������ 전달인자로����������� ������������������ 대체한다.����������� ������������������
Refactoring����������� ������������������
DEMO����������� ������������������
엘리먼트의����������� ������������������ ID값과,����������� ������������������ 메시지����������� ������������������ 값이����������� ������������������ 하드����������� ������������������ 코딩����������� ������������������ 되어있다.����������� ������������������ 처음엔����������� ������������������ 문제����������� ������������������ 없었지만����������� ������������������ 요구사항의����������� ������������������ 변동으로����������� ������������������ 이����������� ������������������ 값이����������� ������������������ 동적으로����������� ������������������ 바뀌어야����������� ������������������ 한다.����������� ������������������
DEMO����������� ������������������
하드����������� ������������������ 코딩된����������� ������������������ 값을����������� ������������������ 드래그����������� ������������������ 하여����������� ������������������ 마우스����������� ������������������ 오른쪽����������� ������������������ 버튼을����������� ������������������ 클릭한����������� ������������������ 후����������� ������������������ Refactor����������� ������������������ ->����������� ������������������ Extract����������� ������������������ ->����������� ������������������ Parameter����������� ������������������ 순으로����������� ������������������ 메뉴를����������� ������������������ 선택한다.����������� ������������������
DEMO����������� ������������������
그러면����������� ������������������ 전달인자로����������� ������������������ ID����������� ������������������ 값을����������� ������������������ 받을����������� ������������������ 수����������� ������������������ 있고,����������� ������������������ 만약����������� ������������������ 생략되면����������� ������������������ 값이����������� ������������������ 초기화����������� ������������������ 되도록����������� ������������������ 리팩토링����������� ������������������ 된다.����������� ������������������
DEMO����������� ������������������
2번째����������� ������������������ 값도����������� ������������������ 같은����������� ������������������ 방법으로����������� ������������������ 리팩토링����������� ������������������ 한다.����������� ������������������
Extract����������� ������������������ Method����������� ������������������
그룹으로����������� ������������������ 함께����������� ������������������ 묶을����������� ������������������ 수����������� ������������������ 있는����������� ������������������ 코드����������� ������������������ 조각이����������� ������������������ 있으면,����������� ������������������ 코드의����������� ������������������ 목적이����������� ������������������ 잘����������� ������������������ 드러나도록����������� ������������������ 메소드의����������� ������������������ 이름을����������� ������������������ 지어����������� ������������������ 별도의����������� ������������������ 메서드로����������� ������������������ 뽑아낸다.����������� ������������������
����������� ������������������ 마틴����������� ������������������ 파울러����������� ������������������
Refactoring����������� ������������������
DEMO����������� ������������������
배너를����������� ������������������ 출력하는����������� ������������������ 로직은����������� ������������������ 메서드로����������� ������������������ 작성되어����������� ������������������ 있지만����������� ������������������ 이����������� ������������������ 코드는����������� ������������������ 무엇을����������� ������������������ 하는����������� ������������������ 코드인지����������� ������������������ 쉽게����������� ������������������ 읽기����������� ������������������ 어렵다.����������� ������������������
DEMO����������� ������������������
Extract����������� ������������������ 할����������� ������������������ 코드를����������� ������������������ 선택한����������� ������������������ 후����������� ������������������ 마우스����������� ������������������ 오른쪽����������� ������������������ 버튼을����������� ������������������ 클릭하고����������� ������������������ Refactor����������� ������������������ ->����������� ������������������ Extract����������� ������������������ ->����������� ������������������ Method����������� ������������������ 순으로����������� ������������������ 메뉴를����������� ������������������ 선택한다.����������� ������������������
DEMO����������� ������������������
그러면����������� ������������������ 자바스크립트����������� ������������������ 친화적으로����������� ������������������ 어느����������� ������������������ 공간에����������� ������������������ Extract����������� ������������������ 할����������� ������������������ 것이지����������� ������������������ 묻는다.����������� ������������������ Global은����������� ������������������ 전역����������� ������������������ 공간,����������� ������������������ Object����������� ������������������ assigned는����������� ������������������ 객체����������� ������������������ 내부에,����������� ������������������ function����������� ������������������ 은����������� ������������������ 현재����������� ������������������ 함수����������� ������������������ 안을����������� ������������������ 뜻한다.����������� ������������������ ����������� ������������������ Object����������� ������������������ assigned����������� ������������������ to����������� ������������������ Greeter3.prototype을����������� ������������������ 선택한다.����������� ������������������
DEMO����������� ������������������
메서드����������� ������������������ 명을����������� ������������������ 지정하고����������� ������������������ OK����������� ������������������ 버튼을����������� ������������������ 클릭한다.����������� ������������������
DEMO����������� ������������������
코드가����������� ������������������ 리팩토링되어����������� ������������������ 한결����������� ������������������ 읽기����������� ������������������ 쉬워졌다.����������� ������������������
WebStorm과����������� ������������������
코드����������� ������������������ 품질����������� ������������������ 검증����������� ������������������ 03����������� ������������������
background����������� ������������������ :����������� ������������������ http://goo.gl/33IXCG����������� ������������������
JSLint����������� ������������������
자바스크립트����������� ������������������ 코드의����������� ������������������ 구문을����������� ������������������ 검사할����������� ������������������ 목적으로����������� ������������������ 만들어진����������� ������������������ 품질����������� ������������������ 검증����������� ������������������ 도구����������� ������������������
Setting����������� ������������������
Setting����������� ������������������
DEMO/1����������� ������������������
변수����������� ������������������ i����������� ������������������ 에����������� ������������������ 빨간색����������� ������������������ 밑����������� ������������������ 줄이����������� ������������������ 보인다.����������� ������������������ ����������� ������������������ var����������� ������������������ 키워드는����������� ������������������ 스코프를����������� ������������������ 나타내는����������� ������������������ ����������� ������������������ 키워드로써,����������� ������������������ 애써����������� ������������������ 여러번����������� ������������������ 선언하지����������� ������������������ 않아도����������� ������������������ 된다.����������� ������������������ ����������� ������������������ 이����������� ������������������ 같은����������� ������������������ 사항을����������� ������������������ JSLint가����������� ������������������ 실시간����������� ������������������ ����������� ������������������ 검증����������� ������������������ 하여����������� ������������������ 에러임을����������� ������������������ 나타내고����������� ������������������ ����������� ������������������ 있다.����������� ������������������
DEMO/1����������� ������������������
또한,����������� ������������������ 우측����������� ������������������ 상단에서����������� ������������������ 코드����������� ������������������ 품질����������� ������������������ 상태를����������� ������������������ 바로����������� ������������������ 알����������� ������������������ 수����������� ������������������ 있다.����������� ������������������ 빨간색에����������� ������������������ 가까울수록����������� ������������������ 코드에����������� ������������������ 오류나����������� ������������������ 경고가����������� ������������������ 많다는����������� ������������������ 뜻이다.����������� ������������������
DEMO/1����������� ������������������
변수를����������� ������������������ var����������� ������������������ 키워드����������� ������������������ 하나로����������� ������������������ ����������� ������������������ 선언하여����������� ������������������ 오류를����������� ������������������ 수정한다.����������� ������������������ 코드����������� ������������������ 품질����������� ������������������ 상태도����������� ������������������ 그린으로����������� ������������������ 바뀐다.����������� ������������������
선언 되지 않은 변수를 사용하면 JSLint에서 오류 메시지를 출력한다.
DEMO/2����������� ������������������
상단에 변수를 선언하여 오류를 수정한다.
DEMO/2����������� ������������������
Test-runner����������� ������������������
Karma����������� ������������������ 작성된����������� ������������������ 테스트����������� ������������������ 코드를����������� ������������������ 자동으로����������� ������������������ 실행해����������� ������������������ 주는����������� ������������������ Test-runner����������� ������������������
����������� ������������������
http://youtu.be/IsvLKNqwgV0����������� ������������������
WebStorm과����������� ������������������
Node����������� ������������������ 디버깅����������� ������������������ 07����������� ������������������
background����������� ������������������ :����������� ������������������ http://goo.gl/gksF1W����������� ������������������
http://youtu.be/nPQPzAIiQyI����������� ������������������
WebStorm과����������� ������������������
테스크����������� ������������������ 자동화����������� ������������������ 08����������� ������������������
background����������� ������������������ :����������� ������������������ http://goo.gl/Jr9Dhr����������� ������������������
Task-runner����������� ������������������
Grunt����������� ������������������ 프런트엔드����������� ������������������ 세상에서����������� ������������������ 가장����������� ������������������ ����������� ������������������ ����������� ������������������ 잘����������� ������������������ 알려진����������� ������������������ 테스크����������� ������������������ 자동화����������� ������������������ 도구����������� ������������������
http://youtu.be/Y8TxUCPaFZ0����������� ������������������
좋은����������� ������������������ IDE와����������� ������������������ 지속적인����������� ������������������ 코드����������� ������������������ 검증과����������� ������������������ 자동화된����������� ������������������ 테스크는����������� ������������������ ����������� ������������������ 품질����������� ������������������ 좋은����������� ������������������ 코드를����������� ������������������ 생산할����������� ������������������ 수����������� ������������������ 있도록����������� ������������������ 도와줍니다.����������� ������������������
background����������� ������������������ :����������� ������������������ http://goo.gl/vBf87z����������� ������������������
감사합니다.����������� ������������������
background����������� ������������������ :����������� ������������������ http://goo.gl/vBf87z����������� ������������������