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

  • 2,154 views
Uploaded on

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

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

More in: Software
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,154
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
53
Comments
0
Likes
38

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 진보한
  • 2.   개발
  • 3.   환경에서
  • 4.    품질
  • 5.   좋은
  • 6.   코드
  • 7.   생산
  • 8.   !
  • 9.    background
  • 10.   :
  • 11.   http://goo.gl/OFXKv0
  • 12.   
  • 13. NHN
  • 14.   Technology
  • 15.   services
  • 16.    Front-End
  • 17.   Development
  • 18.   Team
  • 19.    이름
  • 20.    이메일
  • 21.    TECH@NAVER
  • 22.   프런트엔드
  • 23.   개발의
  • 24.   모든
  • 25.   것(가제)
  • 26.   집필
  • 27.   중
  • 28.    방법론,
  • 29.   패턴,
  • 30.   설계
  • 31.   등
  • 32.   공학적인
  • 33.   것
  • 34.    힙합과
  • 35.   사케를
  • 36.   좋아하는
  • 37.   프런트엔드개발팀의
  • 38.   코드소총수
  • 39.    주우영(코드소총수)
  • 40.    uyeong21c@gmail.com
  • 41.    짧은소개
  • 42.    관심분야
  • 43.    특이사항
  • 44.   
  • 45. 
  • 46.   
  • 47.   
  • 48.   
  • 49.    진보한
  • 50.   개발
  • 51.   환경
  • 52.    품질
  • 53.   좋은
  • 54.   코드
  • 55.   생산
  • 56.    성숙한
  • 57.   방법론
  • 58.    연구된
  • 59.   설계와
  • 60.   패턴
  • 61.    고수준
  • 62.   라이브러리
  • 63.    통합된
  • 64.   개발
  • 65.   환경
  • 66.   도구
  • 67.    Unit
  • 68.   Test
  • 69.    Code
  • 70.   Lint
  • 71.    Task
  • 72.   Automation
  • 73.    Test-runner&Coverage
  • 74.    background
  • 75.   :
  • 76.   http://goo.gl/9C6UOQ
  • 77.   
  • 78. 
  • 79.   
  • 80.   
  • 81.   
  • 82.    성숙한
  • 83.   방법론
  • 84.    연구된
  • 85.   설계와
  • 86.   패턴
  • 87.    고수준
  • 88.   라이브러리
  • 89.    통합된
  • 90.   개발
  • 91.   환경
  • 92.   도구
  • 93.    Unit
  • 94.   Test
  • 95.    Code
  • 96.   Lint
  • 97.    Task
  • 98.   Automation
  • 99.    Test-runner&Coverage
  • 100.    WebStorm
  • 101.    Karma
  • 102.    JSLint
  • 103.    Grunt
  • 104.    background
  • 105.   :
  • 106.   http://goo.gl/9C6UOQ
  • 107.   
  • 108. 
  • 109.   
  • 110.   
  • 111.   
  • 112.    WebStorm
  • 113.    Karma
  • 114.   JSLint
  • 115.   Grunt
  • 116.   Debugger
  • 117.    background
  • 118.   :
  • 119.   http://goo.gl/9C6UOQ
  • 120.   
  • 121. 좋은
  • 122.   IDE란
  • 123.    무엇인가?
  • 124.   01
  • 125.    background
  • 126.   :
  • 127.   http://goo.gl/aNOKJ6
  • 128.   
  • 129. 오류없는
  • 130.   코드를
  • 131.   빠르게
  • 132.   생산할
  • 133.   수
  • 134.   
  • 135.    있도록
  • 136.   하는
  • 137.   쾌적한
  • 138.   개발
  • 139.   도구
  • 140.    Code
  • 141.   lint
  • 142.    Refactor
  • 143.    Test-runner
  • 144.    Debugger
  • 145.   
  • 146.    Auto-complete
  • 147.    Hinting
  • 148.    Code
  • 149.   Trace
  • 150.    Highlighter
  • 151.    Reliability
  • 152.    Scalability
  • 153.    오류없는
  • 154.   코드를
  • 155.    빠르고
  • 156.    쾌적하게
  • 157.    Integrated
  • 158.   
  • 159.    Development
  • 160.   
  • 161.    Environment
  • 162.   
  • 163. 좋은
  • 164.   IDE를
  • 165.    소개합니다.
  • 166.   02
  • 167.    background
  • 168.   :
  • 169.   http://goo.gl/eHqY5O
  • 170.   
  • 171. Sublime
  • 172.    Text
  • 173.   
  • 174. 구글의
  • 175.   엔지니어였던
  • 176.   Jon
  • 177.   Skimmer는
  • 178.   
  • 179.    2005년
  • 180.    12월
  • 181.    부터
  • 182.    3D
  • 183.    가속
  • 184.    기능을
  • 185.   
  • 186.    갖춘
  • 187.   텍스트
  • 188.   편집기를
  • 189.   상상해
  • 190.   왔다가
  • 191.   
  • 192.    2007년
  • 193.    11월에
  • 194.    첫
  • 195.    프로토타입을
  • 196.   
  • 197.    개발했다.
  • 198.    
  • 199.    이후
  • 200.    편집기를
  • 201.    완성하고자
  • 202.    구글
  • 203.   
  • 204.    엔지니어를
  • 205.    그만두고
  • 206.    개발에
  • 207.    몰두
  • 208.    하여
  • 209.    SublimeText1을
  • 210.    2008년에
  • 211.   
  • 212.    발표했다.
  • 213.    
  • 214.    가볍고
  • 215.    편리하여
  • 216.    많은
  • 217.    프런트엔드
  • 218.    개발자들이
  • 219.   주
  • 220.   에디터로
  • 221.   사용하고
  • 222.   있 다 .
  • 223.    Sublime
  • 224.    Text
  • 225.   
  • 226. Web
  • 227.    WebStorm은
  • 228.    IntelliJ로
  • 229.    유명한
  • 230.    JetBrains사
  • 231.    에서
  • 232.    개발한
  • 233.    크로스
  • 234.   
  • 235.    플랫폼
  • 236.   프런트엔드
  • 237.   전용
  • 238.   IDE다.
  • 239.   
  • 240.    
  • 241.    2009년
  • 242.   부터
  • 243.   개발하여
  • 244.   2010년에
  • 245.   1.0
  • 246.   
  • 247.    베타를
  • 248.   발표했으며
  • 249.   지금은
  • 250.   버전
  • 251.   8이다.
  • 252.    
  • 253.    프런트엔드
  • 254.   개발
  • 255.   도구에는
  • 256.   없던
  • 257.   많은
  • 258.    기능을
  • 259.   갖추고
  • 260.   있어
  • 261.   매니아
  • 262.   사용층이
  • 263.   
  • 264.    생기기
  • 265.   시작했다.
  • 266.    
  • 267.    Storm
  • 268.   
  • 269. Why
  • 270.   did
  • 271.   we
  • 272.   choose
  • 273.   
  • 274.    이전까지의
  • 275.    프런트엔드
  • 276.    개발
  • 277.    도구는
  • 278.    기능이나
  • 279.   안정성이
  • 280.   상당히
  • 281.   미흡했다.
  • 282.    
  • 283.    WebStorm은
  • 284.    Auto-complete
  • 285.    Code
  • 286.   trace,
  • 287.   lint,
  • 288.   Test-runner
  • 289.   그리고
  • 290.   
  • 291.    Debugger
  • 292.   등을
  • 293.   지원하며
  • 294.   무엇보다
  • 295.   
  • 296.    신뢰할
  • 297.    수
  • 298.    있는
  • 299.    리팩토링
  • 300.    기능을
  • 301.   
  • 302.    지원하면서
  • 303.   프런트엔드
  • 304.   개발
  • 305.   환경은
  • 306.   
  • 307.    한층
  • 308.   진보했다.
  • 309.    
  • 310.    우리는
  • 311.   여기에서
  • 312.   얻을
  • 313.   수
  • 314.   있는
  • 315.   수
  • 316.   많은
  • 317.    장점을
  • 318.    취하고자
  • 319.    채택하여
  • 320.    사용하고
  • 321.   
  • 322.    있다.
  • 323.    Web
  • 324.    Storm
  • 325.   
  • 326. 문서화를
  • 327.   위한
  • 328.    JSDoc3
  • 329.   03
  • 330.    background
  • 331.   :
  • 332.   http://goo.gl/uxWq1E
  • 333.   
  • 334. JSDoc3
  • 335.    JAVADoc과
  • 336.    비슷한
  • 337.    형식의
  • 338.   
  • 339.    구문을
  • 340.   사용하는
  • 341.   자바스크립트
  • 342.   
  • 343.    문서화
  • 344.   도구
  • 345.   
  • 346. 변수나
  • 347.   전달인자의
  • 348.   타입을
  • 349.   나타낸다.
  • 350.    @type(@param)
  • 351.    /**  * @param {Object} obj  * @param {string|number} key */ var findBy = function(obj, key){ // do something... };    /**  * @type {string} */ var any = ‘name’;   
  • 352. 함수나
  • 353.   메서드의
  • 354.   반환
  • 355.   타입을
  • 356.   나타낸다.
  • 357.    @returns
  • 358.    /**  * @returns {boolean}  */ function isString(){ return false; }
  • 359. 원시타입,
  • 360.   객체타입,
  • 361.   배열타입
  • 362.   등
  • 363.   다양한
  • 364.   타입을
  • 365.   나타낼
  • 366.   수
  • 367.   있다.
  • 368.    Type
  • 369.   names
  • 370.    /**  * @type {number|string} * @type {Object} * @type {ClassName} * @type {Array.<string>} */  
  • 371. WebStorm의
  • 372.    정적
  • 373.   분석
  • 374.   능력
  • 375.   04
  • 376.    background
  • 377.   :
  • 378.   http://goo.gl/SzRHgs
  • 379.   
  • 380. 전달인자
  • 381.   타입
  • 382.   힌팅
  • 383.   
  • 384.    전달인자가
  • 385.    기대하는
  • 386.    형을
  • 387.   
  • 388.    분석하여
  • 389.    사용자에게
  • 390.    힌팅
  • 391.    해주는
  • 392.   기능
  • 393.   
  • 394. CODE
  • 395.    /**  * @param {Array} arr  * @param {string|number} key */ var findBy = function(arr, key){ // do something... };   
  • 396. DEMO
  • 397.   
  • 398. DEMO
  • 399.    작성된
  • 400.   함수를
  • 401.   찾아
  • 402.   자동
  • 403.   완성
  • 404.   한다.
  • 405.    JSDoc3
  • 406.   주석을
  • 407.   분석하여
  • 408.   전달인자의
  • 409.   
  • 410.    타입
  • 411.   정보도
  • 412.   제공한다.
  • 413.   
  • 414. DEMO
  • 415.    전달인자를
  • 416.   입력하게
  • 417.   되면
  • 418.   툴팁으로
  • 419.   
  • 420.    함수가
  • 421.   기대하는
  • 422.   전달인자
  • 423.   갯수와
  • 424.    이름
  • 425.   그리고
  • 426.   타입
  • 427.   정보를
  • 428.   제공한다.
  • 429.    
  • 430.    사용자는,
  • 431.   함수
  • 432.   코드를
  • 433.   알
  • 434.   필요
  • 435.   없이
  • 436.    적절한
  • 437.   값을
  • 438.   전달하여
  • 439.   함수를
  • 440.   사용할
  • 441.   수
  • 442.    있다.
  • 443.   
  • 444. DEMO
  • 445.    전달인자를
  • 446.   입력하는
  • 447.   위치를
  • 448.    하일라이팅
  • 449.   하여
  • 450.   알려준다.
  • 451.   
  • 452. 타입
  • 453.   오류
  • 454.   경고
  • 455.   
  • 456.    형을
  • 457.   추론하여
  • 458.   변수
  • 459.   대입이나
  • 460.   
  • 461.    사용에
  • 462.   문제가
  • 463.   있다고
  • 464.   판단되면
  • 465.    경고
  • 466.   메시지를
  • 467.   출력하는
  • 468.   기능
  • 469.   
  • 470. DEMO/1
  • 471.    정수형이나
  • 472.   문자열
  • 473.   타입을
  • 474.    가지는
  • 475.   some이라는
  • 476.   변수를
  • 477.   
  • 478.    선언했다.
  • 479.   
  • 480. DEMO/1
  • 481.    정수를
  • 482.   대입하면
  • 483.   문제
  • 484.   없다.
  • 485.    문자열을
  • 486.   대입해도
  • 487.   문제
  • 488.   없다.
  • 489.    리터럴
  • 490.   객체를
  • 491.   대입하니
  • 492.    잘못된
  • 493.   타입을
  • 494.   대입했다고
  • 495.    경고한다.
  • 496.   
  • 497. 변수
  • 498.   뿐만
  • 499.   아니라
  • 500.   전달인자의
  • 501.    타입도
  • 502.   검증한다.
  • 503.    DEMO/2
  • 504.   
  • 505. 복잡한
  • 506.   관계도
  • 507.   분석하여
  • 508.   검증한다.
  • 509.    이
  • 510.   예제는
  • 511.   number
  • 512.   타입을
  • 513.   반환하는
  • 514.   
  • 515.    location
  • 516.   함수의
  • 517.   결과
  • 518.   값을
  • 519.   boolean
  • 520.   
  • 521.    타입의
  • 522.   result
  • 523.   변수에
  • 524.   대입했기
  • 525.    때문에
  • 526.   경고창을
  • 527.   출력한다.
  • 528.    DEMO/3
  • 529.   
  • 530. 객체와
  • 531.   배열의
  • 532.   멤버
  • 533.    자동
  • 534.   완성
  • 535.    객체의
  • 536.    키나
  • 537.    배열의
  • 538.    원소
  • 539.   
  • 540.   
  • 541.    타입을
  • 542.    추론하여
  • 543.    자동
  • 544.    완성
  • 545.   
  • 546.    해주는
  • 547.   기능
  • 548.   
  • 549. 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; } };  
  • 550. 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; } };  
  • 551. DEMO
  • 552.    Phone
  • 553.   객체가
  • 554.   있다.
  • 555.   이
  • 556.   객체는
  • 557.   핸드폰의
  • 558.   
  • 559.    id,
  • 560.   type,
  • 561.   model,
  • 562.   name
  • 563.   같은
  • 564.   정보를
  • 565.   갖는다.
  • 566.   
  • 567. DEMO
  • 568.    Phone
  • 569.   객체를
  • 570.   배열로
  • 571.   가지고
  • 572.   있는
  • 573.   컬렉션
  • 574.   객체다.
  • 575.   
  • 576.    getPhones
  • 577.   메서드는
  • 578.   Phone
  • 579.   객체를
  • 580.   원소로
  • 581.   갖는
  • 582.    배열을
  • 583.   반환한다.
  • 584.   
  • 585. DEMO
  • 586.    이제
  • 587.   각
  • 588.   엘리먼트에
  • 589.   첫
  • 590.   번째
  • 591.   핸드폰의
  • 592.   정보를
  • 593.    대입해야
  • 594.   한다고
  • 595.   하자.
  • 596.   
  • 597. DEMO
  • 598.    먼저
  • 599.   Phones
  • 600.   객체의
  • 601.   인스턴스를
  • 602.   생성한다.
  • 603.   
  • 604. DEMO
  • 605.    이제
  • 606.   값을
  • 607.   대입해보자.
  • 608.   Phones
  • 609.   객체가
  • 610.    가진
  • 611.   메서드를
  • 612.   자동
  • 613.   완성
  • 614.   해준다.
  • 615.    phones
  • 616.   객체에
  • 617.   getPhones
  • 618.   메서드가
  • 619.   
  • 620.    있다는걸
  • 621.   알
  • 622.   수
  • 623.   있다.
  • 624.   
  • 625. DEMO
  • 626.    getPhones()
  • 627.   메서드의
  • 628.   리턴
  • 629.   값에
  • 630.    접근하니
  • 631.   배열
  • 632.   메서드들이
  • 633.   자동
  • 634.   완성
  • 635.   된다.
  • 636.    사용자는
  • 637.   getPhones
  • 638.   메서드가
  • 639.   배열을
  • 640.   
  • 641.    반환
  • 642.   한다는
  • 643.   것을
  • 644.   알
  • 645.   수
  • 646.   있다.
  • 647.   
  • 648. DEMO
  • 649.    반환되는
  • 650.   배열의
  • 651.   원소는
  • 652.   Phone
  • 653.   객체
  • 654.   이므로
  • 655.    Phone
  • 656.   객체가
  • 657.   가지고
  • 658.   있는
  • 659.   프로퍼티가
  • 660.   
  • 661.    자동
  • 662.   완성
  • 663.   된다.
  • 664.   
  • 665. DEMO
  • 666.    이
  • 667.   기능을
  • 668.   이용해면
  • 669.   빠르고
  • 670.   오타율이
  • 671.   적은
  • 672.    타이핑을
  • 673.   할
  • 674.   수
  • 675.   있게
  • 676.   된다.
  • 677.   
  • 678. WebStorm과
  • 679.    Refactoring
  • 680.   05
  • 681.    background
  • 682.   :
  • 683.   http://goo.gl/xBkwRe
  • 684.   
  • 685. Refactoring
  • 686.    코드
  • 687.   수정으로
  • 688.   발생할
  • 689.   수
  • 690.   
  • 691.   있는
  • 692.    오류를
  • 693.    최대한
  • 694.    낮추면서
  • 695.   
  • 696.    코드를
  • 697.   정리하는
  • 698.   기법
  • 699.   
  • 700. Rename
  • 701.    메서드의
  • 702.   이름이
  • 703.   그
  • 704.   목적을
  • 705.   드러내지
  • 706.    못하고
  • 707.    있다면
  • 708.    메서드의
  • 709.    이름을
  • 710.   
  • 711.    바꿔라.
  • 712.    
  • 713.    마틴
  • 714.   파울러
  • 715.    Refactoring
  • 716.   
  • 717. DEMO/1
  • 718.    translateX
  • 719.   함수가
  • 720.   있다.
  • 721.    이
  • 722.   함수의
  • 723.   지역
  • 724.   변수인
  • 725.    velocity의
  • 726.   이름을
  • 727.   speed로
  • 728.    rename
  • 729.   하고
  • 730.   싶다고
  • 731.   하자.
  • 732.   
  • 733. DEMO/1
  • 734.    변경하고자
  • 735.   하는
  • 736.   지역
  • 737.   변수를
  • 738.    오른쪽
  • 739.   마우스
  • 740.   클릭하고
  • 741.    Refactor
  • 742.   ->
  • 743.   rename
  • 744.   순으로
  • 745.    메뉴를
  • 746.   선택한다.
  • 747.   
  • 748. DEMO/1
  • 749.    지역
  • 750.   변수를
  • 751.   rename할
  • 752.   수
  • 753.   있는
  • 754.    모드로
  • 755.   변환
  • 756.   됐다.
  • 757.   
  • 758.    
  • 759.    이제
  • 760.   이름을
  • 761.   변경한다.
  • 762.   
  • 763. DEMO/1
  • 764.   
  • 765. DEMO/1
  • 766.   
  • 767. DEMO/1
  • 768.   
  • 769. DEMO/1
  • 770.   
  • 771. DEMO/1
  • 772.    이처럼
  • 773.   함수나
  • 774.   메서드
  • 775.   몸체
  • 776.   내의
  • 777.    지역
  • 778.   변수를
  • 779.   한꺼번에
  • 780.   변경할
  • 781.   수
  • 782.   있다.
  • 783.    
  • 784.    직접
  • 785.   지역
  • 786.   변수를
  • 787.   rename
  • 788.   하는
  • 789.   것은
  • 790.    실수
  • 791.   할
  • 792.   수
  • 793.   있지만
  • 794.   이
  • 795.   기능을
  • 796.   사용하면
  • 797.    미연에
  • 798.   방지할
  • 799.   수
  • 800.   있다.
  • 801.   
  • 802. DEMO/2
  • 803.    Greeter.js의
  • 804.   Greeter
  • 805.   객체는
  • 806.    sayHello
  • 807.   메서드를
  • 808.   가지고
  • 809.   있다.
  • 810.   
  • 811. DEMO/2
  • 812.    그리고
  • 813.   playground.js에서
  • 814.    Greeter
  • 815.   객체의
  • 816.   sayHello
  • 817.   메서드를
  • 818.    사용
  • 819.   중
  • 820.   이다.
  • 821.   
  • 822.   
  • 823. DEMO/2
  • 824.    그럼
  • 825.   sayHello를
  • 826.   rename
  • 827.   해보자.
  • 828.    sayHello
  • 829.   메서드에서
  • 830.   마우스
  • 831.   오른쪽
  • 832.   버튼을
  • 833.    클릭하여
  • 834.   Refactor
  • 835.   ->
  • 836.   rename
  • 837.   순으로
  • 838.   
  • 839.    메뉴를
  • 840.   클릭한다.
  • 841.   
  • 842. DEMO/2
  • 843.    Rename
  • 844.   팝업
  • 845.   창이
  • 846.   열리면
  • 847.   변경
  • 848.   하고자
  • 849.    하는
  • 850.   메서드
  • 851.   명을
  • 852.   입력한
  • 853.   후
  • 854.   Refactor
  • 855.   버튼을
  • 856.    클릭한다.
  • 857.   
  • 858. DEMO/2
  • 859.    sayHello
  • 860.   메서드를
  • 861.   greet
  • 862.   메서드로
  • 863.    Rename
  • 864.   했다.
  • 865.   그럼
  • 866.   이
  • 867.   메서드를
  • 868.   
  • 869.    사용하는
  • 870.   측은
  • 871.   어떻게
  • 872.   되었을까?
  • 873.   
  • 874. DEMO/2
  • 875.    playground.js의
  • 876.   소스
  • 877.   코드
  • 878.   역시
  • 879.    Rename이
  • 880.   반영
  • 881.   됐다.
  • 882.   
  • 883.    
  • 884.    이처럼
  • 885.   의존하고
  • 886.   있는
  • 887.   코드를
  • 888.   분석하고
  • 889.    반영하여
  • 890.   안전성이
  • 891.   보장되도록
  • 892.   rename을
  • 893.    지원한다.
  • 894.   
  • 895. Safe
  • 896.   Delete
  • 897.    삭제하려고
  • 898.    하는
  • 899.    변수나
  • 900.    객체의
  • 901.   
  • 902.    의존
  • 903.    관계를
  • 904.    파악하여
  • 905.    안전성을
  • 906.   
  • 907.    검사해
  • 908.   알려준다.
  • 909.    Refactoring
  • 910.   
  • 911. DEMO
  • 912.    greet
  • 913.   메서드를
  • 914.   삭제하려고
  • 915.   한다.
  • 916.    이
  • 917.   메서드는
  • 918.   public
  • 919.   메서드이므로
  • 920.    다른
  • 921.   곳에서
  • 922.   사용하고
  • 923.   있을
  • 924.   가능성이
  • 925.    많다.
  • 926.   
  • 927. Greet
  • 928.   메서드를
  • 929.   playground.js에서
  • 930.    사용하고
  • 931.   있다.
  • 932.   유지보수
  • 933.   개발자가
  • 934.   이
  • 935.   사실을
  • 936.    모른체
  • 937.   삭제한다면
  • 938.   오류가
  • 939.   날
  • 940.   것이다.
  • 941.    
  • 942.    그렇다고
  • 943.   여러개의
  • 944.   파일을
  • 945.   전부
  • 946.   검색해서
  • 947.    의존
  • 948.   코드를
  • 949.   찾을
  • 950.   수도
  • 951.   없다.
  • 952.    DEMO
  • 953.   
  • 954. Greet
  • 955.   메서드에서
  • 956.   마우스
  • 957.   오른쪽
  • 958.   버튼을
  • 959.    클릭하여
  • 960.   Refactor
  • 961.   ->
  • 962.   safe
  • 963.   Delete
  • 964.   순으로
  • 965.    메뉴를
  • 966.   선택한다.
  • 967.    DEMO
  • 968.   
  • 969. Safe
  • 970.   Delete
  • 971.   팝업창이
  • 972.   열리면
  • 973.    OK
  • 974.   버튼을
  • 975.   클릭하여
  • 976.   진행한다.
  • 977.    DEMO
  • 978.   
  • 979. 그러면
  • 980.   어디선가
  • 981.   사용되고
  • 982.   있어
  • 983.    위험하다고
  • 984.   경고한다.
  • 985.    
  • 986.    View
  • 987.   usages
  • 988.   버튼을
  • 989.   클릭한다.
  • 990.    DEMO
  • 991.   
  • 992. 하단
  • 993.   패널에
  • 994.   어느
  • 995.   파일의
  • 996.   몇번째
  • 997.   라인에서
  • 998.    의존하고
  • 999.   있는지
  • 1000.   읽기
  • 1001.   쉽게
  • 1002.   출력한다.
  • 1003.    DEMO
  • 1004.   
  • 1005. DEMO
  • 1006.    해당하는
  • 1007.   코드에서
  • 1008.   오른쪽
  • 1009.   마우스
  • 1010.   버튼을
  • 1011.    클릭하여
  • 1012.   Jump
  • 1013.   to
  • 1014.   Source
  • 1015.   메뉴를
  • 1016.   선택하면
  • 1017.   
  • 1018. DEMO
  • 1019.    의존하는
  • 1020.   코드로
  • 1021.   Trace
  • 1022.   된다.
  • 1023.   
  • 1024. Inline
  • 1025.   Method
  • 1026.    메서드의
  • 1027.   몸체가
  • 1028.   메서드의
  • 1029.   이름만큼
  • 1030.    이나
  • 1031.   명확할
  • 1032.   때는
  • 1033.   호출하는
  • 1034.   곳에
  • 1035.    메서드
  • 1036.   몸체를
  • 1037.   넣고,
  • 1038.   메서드를
  • 1039.   삭제
  • 1040.    하라.
  • 1041.    
  • 1042.    마틴
  • 1043.   파울러
  • 1044.    Refactoring
  • 1045.   
  • 1046. DEMO
  • 1047.    _createMessage
  • 1048.   메서드는
  • 1049.   로직이
  • 1050.    단순하고
  • 1051.   코드
  • 1052.   자체로
  • 1053.   의미를
  • 1054.   잘
  • 1055.   나타내
  • 1056.    주고
  • 1057.   있기
  • 1058.   때문에
  • 1059.   별도의
  • 1060.   메서드를
  • 1061.   만들
  • 1062.    필요가
  • 1063.   없다.
  • 1064.   
  • 1065. DEMO
  • 1066.    마우스
  • 1067.   오른쪽
  • 1068.   버튼을
  • 1069.   클릭하여
  • 1070.    Refactor
  • 1071.   ->
  • 1072.   Inline
  • 1073.   순으로
  • 1074.   메뉴를
  • 1075.    선택한다.
  • 1076.   
  • 1077. DEMO
  • 1078.    상단의
  • 1079.   라디오
  • 1080.   버튼을
  • 1081.   선택한
  • 1082.   후
  • 1083.    Refactor
  • 1084.   버튼을
  • 1085.   클릭한다.
  • 1086.   
  • 1087. DEMO
  • 1088.    _createMessage
  • 1089.   메서드는
  • 1090.   삭제되고
  • 1091.   메서드를
  • 1092.    사용하고
  • 1093.   있던
  • 1094.   greet
  • 1095.   메서드에
  • 1096.   inline
  • 1097.   되었다.
  • 1098.   
  • 1099. Extract
  • 1100.   Parameter
  • 1101.    함수나
  • 1102.    메서드
  • 1103.    몸체에
  • 1104.    하드코딩
  • 1105.   
  • 1106.    되어있는
  • 1107.   값을
  • 1108.   전달인자로
  • 1109.   대체한다.
  • 1110.    Refactoring
  • 1111.   
  • 1112. DEMO
  • 1113.    엘리먼트의
  • 1114.   ID값과,
  • 1115.   메시지
  • 1116.   값이
  • 1117.    하드
  • 1118.   코딩
  • 1119.   되어있다.
  • 1120.   처음엔
  • 1121.   문제
  • 1122.   없었지만
  • 1123.    요구사항의
  • 1124.   변동으로
  • 1125.   이
  • 1126.   값이
  • 1127.   동적으로
  • 1128.    바뀌어야
  • 1129.   한다.
  • 1130.   
  • 1131. DEMO
  • 1132.    하드
  • 1133.   코딩된
  • 1134.   값을
  • 1135.   드래그
  • 1136.   하여
  • 1137.   마우스
  • 1138.    오른쪽
  • 1139.   버튼을
  • 1140.   클릭한
  • 1141.   후
  • 1142.   Refactor
  • 1143.   ->
  • 1144.    Extract
  • 1145.   ->
  • 1146.   Parameter
  • 1147.   순으로
  • 1148.   메뉴를
  • 1149.    선택한다.
  • 1150.   
  • 1151. DEMO
  • 1152.    그러면
  • 1153.   전달인자로
  • 1154.   ID
  • 1155.   값을
  • 1156.   받을
  • 1157.   수
  • 1158.   있고,
  • 1159.    만약
  • 1160.   생략되면
  • 1161.   값이
  • 1162.   초기화
  • 1163.   되도록
  • 1164.   리팩토링
  • 1165.   된다.
  • 1166.   
  • 1167. DEMO
  • 1168.    2번째
  • 1169.   값도
  • 1170.   같은
  • 1171.   방법으로
  • 1172.   리팩토링
  • 1173.   한다.
  • 1174.   
  • 1175. Extract
  • 1176.   Method
  • 1177.    그룹으로
  • 1178.   함께
  • 1179.   묶을
  • 1180.   수
  • 1181.   있는
  • 1182.   코드
  • 1183.    조각이
  • 1184.   있으면,
  • 1185.   코드의
  • 1186.   목적이
  • 1187.   잘
  • 1188.    드러나도록
  • 1189.   메소드의
  • 1190.   이름을
  • 1191.   지어
  • 1192.    별도의
  • 1193.   메서드로
  • 1194.   뽑아낸다.
  • 1195.    
  • 1196.    마틴
  • 1197.   파울러
  • 1198.    Refactoring
  • 1199.   
  • 1200. DEMO
  • 1201.    배너를
  • 1202.   출력하는
  • 1203.   로직은
  • 1204.   메서드로
  • 1205.   작성되어
  • 1206.   있지만
  • 1207.    이
  • 1208.   코드는
  • 1209.   무엇을
  • 1210.   하는
  • 1211.   코드인지
  • 1212.   쉽게
  • 1213.   읽기
  • 1214.   어렵다.
  • 1215.   
  • 1216. DEMO
  • 1217.    Extract
  • 1218.   할
  • 1219.   코드를
  • 1220.   선택한
  • 1221.   후
  • 1222.   마우스
  • 1223.   오른쪽
  • 1224.   버튼을
  • 1225.    클릭하고
  • 1226.   Refactor
  • 1227.   ->
  • 1228.   Extract
  • 1229.   ->
  • 1230.   Method
  • 1231.   순으로
  • 1232.    메뉴를
  • 1233.   선택한다.
  • 1234.   
  • 1235. DEMO
  • 1236.    그러면
  • 1237.   자바스크립트
  • 1238.   친화적으로
  • 1239.   어느
  • 1240.    공간에
  • 1241.   Extract
  • 1242.   할
  • 1243.   것이지
  • 1244.   묻는다.
  • 1245.    Global은
  • 1246.   전역
  • 1247.   공간,
  • 1248.   Object
  • 1249.   assigned는
  • 1250.    객체
  • 1251.   내부에,
  • 1252.   function
  • 1253.   은
  • 1254.   현재
  • 1255.   함수
  • 1256.   안을
  • 1257.    뜻한다.
  • 1258.    
  • 1259.    Object
  • 1260.   assigned
  • 1261.   to
  • 1262.   Greeter3.prototype을
  • 1263.    선택한다.
  • 1264.   
  • 1265. DEMO
  • 1266.    메서드
  • 1267.   명을
  • 1268.   지정하고
  • 1269.   OK
  • 1270.   버튼을
  • 1271.   클릭한다.
  • 1272.   
  • 1273. DEMO
  • 1274.    코드가
  • 1275.   리팩토링되어
  • 1276.   한결
  • 1277.   읽기
  • 1278.   쉬워졌다.
  • 1279.   
  • 1280. WebStorm과
  • 1281.    코드
  • 1282.   품질
  • 1283.   검증
  • 1284.   03
  • 1285.    background
  • 1286.   :
  • 1287.   http://goo.gl/33IXCG
  • 1288.   
  • 1289. JSLint
  • 1290.    자바스크립트
  • 1291.    코드의
  • 1292.    구문 을
  • 1293.   검사할
  • 1294.   목적으로
  • 1295.   만들어진
  • 1296.    품질
  • 1297.   검증
  • 1298.   도구
  • 1299.   
  • 1300. Setting
  • 1301.   
  • 1302. Setting
  • 1303.   
  • 1304. DEMO/1
  • 1305.    변수
  • 1306.   i
  • 1307.   에
  • 1308.   빨간색
  • 1309.   밑
  • 1310.   줄이
  • 1311.   보인다.
  • 1312.   
  • 1313.    var
  • 1314.   키워드는
  • 1315.   스코프를
  • 1316.   나타내는
  • 1317.   
  • 1318.    키워드로써,
  • 1319.   애써
  • 1320.   여러번
  • 1321.   선언하지
  • 1322.    않아도
  • 1323.   된다.
  • 1324.    
  • 1325.    이
  • 1326.   같은
  • 1327.   사항을
  • 1328.   JSLint가
  • 1329.   실시간
  • 1330.   
  • 1331.    검증
  • 1332.   하여
  • 1333.   에러임을
  • 1334.   나타내고
  • 1335.   
  • 1336.    있다.
  • 1337.   
  • 1338. DEMO/1
  • 1339.    또한,
  • 1340.   우측
  • 1341.   상단에서
  • 1342.   코드
  • 1343.   품질
  • 1344.   상태를
  • 1345.    바로
  • 1346.   알
  • 1347.   수
  • 1348.   있다.
  • 1349.   빨간색에
  • 1350.   가까울수록
  • 1351.    코드에
  • 1352.   오류나
  • 1353.   경고가
  • 1354.   많다는
  • 1355.   뜻이다.
  • 1356.   
  • 1357. DEMO/1
  • 1358.    변수를
  • 1359.   var
  • 1360.   키워드
  • 1361.   하나로
  • 1362.   
  • 1363.    선언하여
  • 1364.   오류를
  • 1365.   수정한다.
  • 1366.    코드
  • 1367.   품질
  • 1368.   상태도
  • 1369.   그린으로
  • 1370.   바뀐다.
  • 1371.   
  • 1372. 선언 되지 않은 변수를 사용하면 JSLint에서 오류 메시지를 출력한다. DEMO/2
  • 1373.   
  • 1374. 상단에 변수를 선언하여 오류를 수정한다. DEMO/2
  • 1375.   
  • 1376. Test-runner
  • 1377.    Karma
  • 1378.    작성된
  • 1379.   테스트
  • 1380.   코드를
  • 1381.   자동 으로
  • 1382.   실행해
  • 1383.   주는
  • 1384.   Test-runner
  • 1385.    
  • 1386.   
  • 1387. http://youtu.be/IsvLKNqwgV0
  • 1388.   
  • 1389. WebStorm과
  • 1390.    Node
  • 1391.   디버깅
  • 1392.   07
  • 1393.    background
  • 1394.   :
  • 1395.   http://goo.gl/gksF1W
  • 1396.   
  • 1397. http://youtu.be/nPQPzAIiQyI
  • 1398.   
  • 1399. WebStorm과
  • 1400.    테스크
  • 1401.   자동화
  • 1402.   08
  • 1403.    background
  • 1404.   :
  • 1405.   http://goo.gl/Jr9Dhr
  • 1406.   
  • 1407. Task-runner
  • 1408.    Grunt
  • 1409.    프런트엔드
  • 1410.    세상에서
  • 1411.    가장
  • 1412.   
  • 1413.   
  • 1414.    잘
  • 1415.   알려진
  • 1416.   테스크
  • 1417.   자동화
  • 1418.   도구
  • 1419.   
  • 1420. http://youtu.be/Y8TxUCPaFZ0
  • 1421.   
  • 1422. 좋은
  • 1423.   IDE와
  • 1424.    지속적인
  • 1425.   코드
  • 1426.   검증과
  • 1427.    자동화된
  • 1428.   테스크는
  • 1429.    
  • 1430.    품질
  • 1431.   좋은
  • 1432.   코드를
  • 1433.    생산할
  • 1434.   수
  • 1435.   있도록
  • 1436.    도와줍니다.
  • 1437.    background
  • 1438.   :
  • 1439.   http://goo.gl/vBf87z
  • 1440.   
  • 1441. 감사합니다.
  • 1442.    background
  • 1443.   :
  • 1444.   http://goo.gl/vBf87z
  • 1445.