• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)
 

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

on

  • 1,560 views

Karma 시연 영상 : http://youtu.be/IsvLKNqwgV0

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

Statistics

Views

Total Views
1,560
Views on SlideShare
1,524
Embed Views
36

Actions

Likes
30
Downloads
35
Comments
0

4 Embeds 36

http://mangastorytelling.tistory.com 22
http://www.slideee.com 11
http://www.hanrss.com 2
http://feedly.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 진보한
    •   개발
    •   환경에서
    •    품질
    •   좋은
    •   코드
    •   생산
    •   !
    •    background
    •   :
    •   http://goo.gl/OFXKv0
    •   
    • NHN
    •   Technology
    •   services
    •    Front-End
    •   Development
    •   Team
    •    이름
    •    이메일
    •    TECH@NAVER
    •   프런트엔드
    •   개발의
    •   모든
    •   것(가제)
    •   집필
    •   중
    •    방법론,
    •   패턴,
    •   설계
    •   등
    •   공학적인
    •   것
    •    힙합과
    •   사케를
    •   좋아하는
    •   프런트엔드개발팀의
    •   코드소총수
    •    주우영(코드소총수)
    •    uyeong21c@gmail.com
    •    짧은소개
    •    관심분야
    •    특이사항
    •   
    • 
    •   
    •   
    •   
    •    진보한
    •   개발
    •   환경
    •    품질
    •   좋은
    •   코드
    •   생산
    •    성숙한
    •   방법론
    •    연구된
    •   설계와
    •   패턴
    •    고수준
    •   라이브러리
    •    통합된
    •   개발
    •   환경
    •   도구
    •    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
    •