• Like
[D2대학생세미나] frontend개발자가 들려주는 개발 이야기
Upcoming SlideShare
Loading in...5
×

[D2대학생세미나] frontend개발자가 들려주는 개발 이야기

  • 3,785 views
Uploaded on

[D2대학생세미나] frontend개발자가 들려주는 개발 이야기

[D2대학생세미나] frontend개발자가 들려주는 개발 이야기

More in: Technology
  • 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
3,785
On Slideshare
0
From Embeds
0
Number of Embeds
12

Actions

Shares
Downloads
38
Comments
0
Likes
14

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. Front-End
  • 2.   개발자가
  • 3.   들려주는
  • 4.    개발
  • 5.   이야기
  • 6.    작성자:
  • 7.   손찬욱
  • 8.   과장
  • 9.    공통플랫폼개발랩
  • 10.    ⓒ
  • 11.   NAVER
  • 12.   Corp.
  • 13.   
  • 14. 손찬욱
  • 15.   
  • 16.    
  • 17.    
  • 18.   
  • 19.   
  • 20.   
  • 21.   
  • 22.   
  • 23.   
  • 24.   
  • 25.   
  • 26.   
  • 27.   
  • 28.   
  • 29.   
  • 30.   
  • 31.   공통플랫폼개발랩
  • 32.    
  • 33.   
  • 34.   
  • 35.   
  • 36.   
  • 37.   
  • 38.   
  • 39.   
  • 40.   
  • 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.   공공S/W
  • 66.   아키텍처팀
  • 67.    
  • 68.    
  • 69.   Jindo
  • 70.   Mobile
  • 71.   Component
  • 72.   개발
  • 73.    
  • 74.   네이버
  • 75.   모바일웹
  • 76.   기술지원
  • 77.    
  • 78.    “쉽고
  • 79.   빠른
  • 80.   모바일
  • 81.   웹
  • 82.   UI
  • 83.   개발”
  • 84.   
  • 85. Front
  • 86.   End
  • 87.   진화의
  • 88.   시작
  • 89.   
  • 90. 4
  • 91.   /
  • 92.   Front
  • 93.   End
  • 94.   개발자가
  • 95.   들려주는
  • 96.   개발
  • 97.   이야기
  • 98.    1.
  • 99.   Web이
  • 100.   나오기
  • 101.   까지
  • 102.    network
  • 103.    App
  • 104.    Res
  • 105.    Server
  • 106.    Res
  • 107.    S/W
  • 108.    Res
  • 109.   App
  • 110.    Res
  • 111.    자원(Resource)이
  • 112.   중복?
  • 113.   공유하고
  • 114.   싶은데…⋯
  • 115.    소프트웨어(App)변경
  • 116.   시마다
  • 117.   PC에
  • 118.   다시
  • 119.   설치해야
  • 120.   하나?
  • 121.   
  • 122.    App
  • 123.    HTTP
  • 124.   
  • 125. 5
  • 126.   /
  • 127.   Front
  • 128.   End
  • 129.   개발자가
  • 130.   들려주는
  • 131.   개발
  • 132.   이야기
  • 133.    2.
  • 134.   Server
  • 135.   중심의
  • 136.   Web
  • 137.   Architecture
  • 138.   (Thin
  • 139.   client)
  • 140.    network
  • 141.    S/W
  • 142.    Res
  • 143.    Server
  • 144.    Res
  • 145.    S/W
  • 146.    Res
  • 147.   S/W
  • 148.    Res
  • 149.    App
  • 150.    HTTP
  • 151.    HTML
  • 152.    CSS
  • 153.    Javascript
  • 154.    Java,
  • 155.   Servlet,
  • 156.   JSP
  • 157.    C#,
  • 158.   ASP.NET
  • 159.    C,
  • 160.   C++
  • 161.   …⋯
  • 162.    View
  • 163.   영역
  • 164.    Programming
  • 165.   영역
  • 166.   
  • 167. 6
  • 168.   /
  • 169.   Front
  • 170.   End
  • 171.   개발자가
  • 172.   들려주는
  • 173.   개발
  • 174.   이야기
  • 175.    3.
  • 176.   Web
  • 177.   기술의
  • 178.   발전
  • 179.    Ajax
  • 180.   (Asynchronous
  • 181.   Javascript
  • 182.   And
  • 183.   XML)
  • 184.   
  • 185. 7
  • 186.   /
  • 187.   Front
  • 188.   End
  • 189.   개발자가
  • 190.   들려주는
  • 191.   개발
  • 192.   이야기
  • 193.    3.
  • 194.   Web
  • 195.   기술의
  • 196.   발전
  • 197.    HTTP
  • 198.   request
  • 199.    HTTP
  • 200.   response
  • 201.    action
  • 202.    BLOCK
  • 203.    action
  • 204.    HTTP
  • 205.   request
  • 206.    HTTP
  • 207.   response
  • 208.    None-Ajax
  • 209.    Ajax
  • 210.    전체
  • 211.   페이지
  • 212.   전환
  • 213.   없이…⋯
  • 214.    Block
  • 215.   없이…⋯
  • 216.    서버당
  • 217.   처리
  • 218.   User수
  • 219.   증가로
  • 220.    비용감소
  • 221.    Request
  • 222.   용량
  • 223.   감소로
  • 224.    비용감소
  • 225.    Application
  • 226.   
  • 227. 8
  • 228.   /
  • 229.   Front
  • 230.   End
  • 231.   개발자가
  • 232.   들려주는
  • 233.   개발
  • 234.   이야기
  • 235.    4.
  • 236.   Web
  • 237.   Application의
  • 238.   확산
  • 239.   
  • 240. 9
  • 241.   /
  • 242.   Front
  • 243.   End
  • 244.   개발자가
  • 245.   들려주는
  • 246.   개발
  • 247.   이야기
  • 248.    5.
  • 249.   Front
  • 250.   End
  • 251.   영역
  • 252.   (Rich
  • 253.   client)
  • 254.    HTML
  • 255.    CSS
  • 256.    Javascript
  • 257.    Java,
  • 258.   Servlet,
  • 259.   JSP
  • 260.    C#,
  • 261.   ASP.NET
  • 262.    C,
  • 263.   C++
  • 264.   …⋯
  • 265.    network
  • 266.    S/W
  • 267.    Res
  • 268.    Server
  • 269.    Res
  • 270.    S/W
  • 271.    Res
  • 272.   S/W
  • 273.    Res
  • 274.    HTTP
  • 275.    View
  • 276.   영역
  • 277.    Programming
  • 278.   영역
  • 279.    App
  • 280.    App
  • 281.   App
  • 282.    Programming
  • 283.   영역
  • 284.    Back-End
  • 285.    Front-End
  • 286.    Javascript
  • 287.    Res
  • 288.    HTML5
  • 289.    CSS3
  • 290.    Res
  • 291.   
  • 292. 10
  • 293.   /
  • 294.   Front
  • 295.   End
  • 296.   개발자가
  • 297.   들려주는
  • 298.   개발
  • 299.   이야기
  • 300.    6.
  • 301.   Front
  • 302.   End
  • 303.   영역
  • 304.   수요의
  • 305.   증가
  • 306.    
  • 307.    Google
  • 308.   Trend
  • 309.   
  • 310. 11
  • 311.   /
  • 312.   Front
  • 313.   End
  • 314.   개발자가
  • 315.   들려주는
  • 316.   개발
  • 317.   이야기
  • 318.    6.
  • 319.   Front
  • 320.   End
  • 321.   영역
  • 322.   수요의
  • 323.   증가
  • 324.    
  • 325.    Indeed
  • 326.   
  • 327. 12
  • 328.   /
  • 329.   Front
  • 330.   End
  • 331.   개발자가
  • 332.   들려주는
  • 333.   개발
  • 334.   이야기
  • 335.    6.
  • 336.   Front
  • 337.   End
  • 338.   영역
  • 339.   수요의
  • 340.   증가
  • 341.    
  • 342.    Forbes
  • 343.    포브지가
  • 344.   예측한
  • 345.   미래의
  • 346.   고액
  • 347.   연봉
  • 348.   직업
  • 349.   
  • 350. 13
  • 351.   /
  • 352.   Front
  • 353.   End
  • 354.   개발자가
  • 355.   들려주는
  • 356.   개발
  • 357.   이야기
  • 358.    What
  • 359. 14
  • 360.   /
  • 361.   Front
  • 362.   End
  • 363.   개발자가
  • 364.   들려주는
  • 365.   개발
  • 366.   이야기
  • 367.    1.
  • 368.   Language
  • 369.    HTML
  • 370.    CSS
  • 371.    Javascript
  • 372.   
  • 373. 15
  • 374.   /
  • 375.   Front
  • 376.   End
  • 377.   개발자가
  • 378.   들려주는
  • 379.   개발
  • 380.   이야기
  • 381.    network
  • 382.    HTTP
  • 383.    S/W
  • 384.    Res
  • 385.    Front-End
  • 386.    Back-End
  • 387.   DNS,
  • 388.   CDN,
  • 389.    Cache,
  • 390.   TCP/IP,
  • 391.    Socket,
  • 392.   Proxy,
  • 393.   …⋯
  • 394.    Cross-Browsing,
  • 395.   Web
  • 396.   Accessibility,
  • 397.    Responsive
  • 398.   Web,
  • 399.    Image
  • 400.   format,
  • 401.   Resource
  • 402.   Optimization,
  • 403.    Performance(Cache,
  • 404.   Prefetching,
  • 405.   lazy
  • 406.   loadi ng,
  • 407.   H/W
  • 408.   Acc,
  • 409.   CSS
  • 410.   splite,
  • 411.   …⋯),
  • 412.    Security
  • 413.   (Cross
  • 414.   origin
  • 415.   resource
  • 416.   sharing,
  • 417.   XSS ,
  • 418.   …⋯),
  • 419.    Internal
  • 420.   browser
  • 421.   (Rendering,
  • 422.   Memory
  • 423.   man agement,
  • 424.   single
  • 425.   thread,
  • 426.   gc,
  • 427.   …⋯),
  • 428.   …⋯
  • 429.    Front-End
  • 430.    2.
  • 431.   Technical
  • 432.   
  • 433. 16
  • 434.   /
  • 435.   Front
  • 436.   End
  • 437.   개발자가
  • 438.   들려주는
  • 439.   개발
  • 440.   이야기
  • 441.    MVC
  • 442.    3.
  • 443.   Library
  • 444.   &
  • 445.   Framework
  • 446.   &
  • 447.   Tools
  • 448.    DOM
  • 449.    UI
  • 450.    Graphic/Chart
  • 451.    Test
  • 452.    Lazy/
  • 453.    Template
  • 454.    
  • 455.   
  • 456.   a.
  • 457.   Library
  • 458.   &
  • 459.   Framework
  • 460.   
  • 461. 17
  • 462.   /
  • 463.   Front
  • 464.   End
  • 465.   개발자가
  • 466.   들려주는
  • 467.   개발
  • 468.   이야기
  • 469.    3.
  • 470.   Library
  • 471.   &
  • 472.   Framework
  • 473.   &
  • 474.   Tools
  • 475.    Browser
  • 476.    개발자
  • 477.   도구
  • 478.    Network
  • 479.    형상관리
  • 480.    Task/Build
  • 481.    Package
  • 482.    Test
  • 483.    
  • 484.   
  • 485.   b.
  • 486.   Tools
  • 487.   
  • 488. 18
  • 489.   /
  • 490.   Front
  • 491.   End
  • 492.   개발자가
  • 493.   들려주는
  • 494.   개발
  • 495.   이야기
  • 496.    중요한
  • 497.   것은
  • 498.   
  • 499.    선택을
  • 500.   할
  • 501.   수
  • 502.   있는
  • 503.   능력
  • 504.    필수가 아닌 선택 •  서비스의
  • 505.   특징
  • 506.   파악
  • 507.    •  회사
  • 508.   규모
  • 509.   및
  • 510.   인력
  • 511.   상황
  • 512.    •  Library,
  • 513.   framework의
  • 514.   장단점
  • 515.    •  라이선스
  • 516.   비용
  • 517.    •  …⋯
  • 518.    Tool, Library, Framework은 생산성 향상을 위한 도구일 뿐 3.
  • 519.   Library
  • 520.   &
  • 521.   Framework
  • 522.   &
  • 523.   Tools
  • 524.   
  • 525. 19
  • 526.   /
  • 527.   Front
  • 528.   End
  • 529.   개발자가
  • 530.   들려주는
  • 531.   개발
  • 532.   이야기
  • 533.    4.
  • 534.   
  • 535.   네이버
  • 536.   개발
  • 537.   (예)
  • 538.    요구사항
  • 539.   분석
  • 540.    Framework,
  • 541.   Library
  • 542.   선정
  • 543.    개발
  • 544.   환경
  • 545.   준비
  • 546.    설계
  • 547.    개발
  • 548.   /
  • 549.   테스트
  • 550.    배포
  • 551.   환경
  • 552.   준비
  • 553.    
  • 554.    
  • 555.    
  • 556.    
  • 557.    
  • 558.    
  • 559.    
  • 560.    
  • 561.    
  • 562.    
  • 563.    
  • 564.    
  • 565.    
  • 566.    
  • 567.    
  • 568.    
  • 569.    무한
  • 570.   컨텐츠
  • 571.    
  • 572.    
  • 573.    좌,우
  • 574.   플리킹
  • 575.    자동완성
  • 576.    기술이슈
  • 577.   여부
  • 578.   점검
  • 579.   
  • 580. 20
  • 581.   /
  • 582.   Front
  • 583.   End
  • 584.   개발자가
  • 585.   들려주는
  • 586.   개발
  • 587.   이야기
  • 588.    4.
  • 589.   
  • 590.   네이버
  • 591.   개발
  • 592.   (예)
  • 593.    서비스
  • 594.   특징
  • 595.   
  • 596.    •  네이버
  • 597.   메인은
  • 598.   국내
  • 599.   80%
  • 600.   검색
  • 601.   점유율을
  • 602.   가지고
  • 603.   있을
  • 604.    정도로
  • 605.   많은
  • 606.   사용자와
  • 607.   다양한
  • 608.   환경의
  • 609.   사용자가
  • 610.   접속
  • 611.    •  identity를
  • 612.   확보하기
  • 613.   위해
  • 614.   네이버
  • 615.   Look&Feel
  • 616.    •  검색의
  • 617.   시작이
  • 618.   되는
  • 619.   페이지
  • 620.    네이버
  • 621.   개발
  • 622.   인력
  • 623.   
  • 624.    •  Jindo,
  • 625.   jQuery에
  • 626.   익숙한
  • 627.   개발
  • 628.   인력이
  • 629.   있음
  • 630.    구분
  • 631.    JindoJs
  • 632.    JQuery
  • 633.   Mobile
  • 634.    용량
  • 635.    하
  • 636.    중
  • 637.    Cross-browsing
  • 638.    상
  • 639.    (국내
  • 640.   단말기에
  • 641.   완벽호환)
  • 642.    하
  • 643.    개발생산성
  • 644.    중
  • 645.    상
  • 646.    플리킹
  • 647.    컴포넌트
  • 648.    O
  • 649.    O
  • 650.    무한스크롤
  • 651.    컴포넌트
  • 652.    O
  • 653.    3’rd
  • 654.   파티에
  • 655.   있음
  • 656.    기술
  • 657.   지원
  • 658.    지원조직
  • 659.   존재
  • 660.    없음
  • 661.    디자인변경
  • 662.    쉬움
  • 663.    어려움
  • 664.    초기
  • 665.   로딩속도
  • 666.    상
  • 667.    중
  • 668.    요구사항
  • 669.   분석
  • 670.    Framework,
  • 671.   Library
  • 672.   선정
  • 673.    개발
  • 674.   환경
  • 675.   준비
  • 676.    설계
  • 677.    개발
  • 678.   /
  • 679.   테스트
  • 680.    배포
  • 681.   환경
  • 682.   준비
  • 683.   
  • 684. 21
  • 685.   /
  • 686.   Front
  • 687.   End
  • 688.   개발자가
  • 689.   들려주는
  • 690.   개발
  • 691.   이야기
  • 692.    4.
  • 693.   
  • 694.   네이버
  • 695.   개발
  • 696.   (예)
  • 697.    형상관리
  • 698.   환경
  • 699.   
  • 700.    •  Git
  • 701.   기반의
  • 702.   gitlab
  • 703.   시스템에
  • 704.   환경
  • 705.   구성
  • 706.    Framework
  • 707.   설치
  • 708.    •  Bower를
  • 709.   이용하여
  • 710.   jindo
  • 711.   환경
  • 712.   구성
  • 713.    CI
  • 714.   서버
  • 715.   설치
  • 716.    •  Jenkins를
  • 717.   이용하여
  • 718.   CI
  • 719.   환경
  • 720.   구성
  • 721.    요구사항
  • 722.   분석
  • 723.    Framework,
  • 724.   Library
  • 725.   선정
  • 726.    개발
  • 727.   환경
  • 728.   준비
  • 729.    설계
  • 730.    개발
  • 731.   /
  • 732.   테스트
  • 733.    배포
  • 734.   환경
  • 735.   준비
  • 736.   
  • 737. 22
  • 738.   /
  • 739.   Front
  • 740.   End
  • 741.   개발자가
  • 742.   들려주는
  • 743.   개발
  • 744.   이야기
  • 745.    4.
  • 746.   
  • 747.   네이버
  • 748.   개발
  • 749.   (예)
  • 750.    Front
  • 751.   End의
  • 752.   관심사는
  • 753.   “사용자의
  • 754.   인터렉션”
  • 755.    UI
  • 756.   영역을
  • 757.   기준으로
  • 758.   기능
  • 759.   영역
  • 760.   설계
  • 761.    
  • 762.    
  • 763.    
  • 764.    
  • 765.    
  • 766.    
  • 767.    
  • 768.    
  • 769.    
  • 770.    
  • 771.    
  • 772.    
  • 773.    
  • 774.    
  • 775.    
  • 776.    UI
  • 777.    
  • 778.    
  • 779.    
  • 780.    
  • 781.    
  • 782.    
  • 783.    
  • 784.    
  • 785.    
  • 786.    
  • 787.    
  • 788.    
  • 789.    
  • 790.    
  • 791.    
  • 792.    
  • 793.    UI
  • 794.    
  • 795.    
  • 796.    
  • 797.    
  • 798.    
  • 799.    
  • 800.    
  • 801.    
  • 802.    
  • 803.    
  • 804.    
  • 805.    
  • 806.    
  • 807.    
  • 808.    
  • 809.    
  • 810.    UI
  • 811.    
  • 812.    panel UI
  • 813.    Panel
  • 814.    Manager
  • 815.    panel UI
  • 816.   panel UI
  • 817.    PanelModel
  • 818.    요구사항
  • 819.   분석
  • 820.    Framework,
  • 821.   Library
  • 822.   선정
  • 823.    개발
  • 824.   환경
  • 825.   준비
  • 826.    설계
  • 827.    개발
  • 828.   /
  • 829.   테스트
  • 830.    배포
  • 831.   환경
  • 832.   준비
  • 833.   
  • 834. 23
  • 835.   /
  • 836.   Front
  • 837.   End
  • 838.   개발자가
  • 839.   들려주는
  • 840.   개발
  • 841.   이야기
  • 842.    4.
  • 843.   
  • 844.   네이버
  • 845.   개발
  • 846.   (예)
  • 847.    IDE
  • 848.   로
  • 849.   개발
  • 850.    •  SublimeText,
  • 851.   WebStorm,
  • 852.   Eclipse,
  • 853.   intelliJ
  • 854.    등을
  • 855.   활용
  • 856.   
  • 857.    Web
  • 858.   browser로
  • 859.   기능
  • 860.   테스트
  • 861.    •  Cross-browsing
  • 862.    요구사항
  • 863.   분석
  • 864.    Framework,
  • 865.   Library
  • 866.   선정
  • 867.    개발
  • 868.   환경
  • 869.   준비
  • 870.    설계
  • 871.    개발
  • 872.   /
  • 873.   테스트
  • 874.    배포
  • 875.   환경
  • 876.   준비
  • 877.    단위
  • 878.   테스트
  • 879.   작성
  • 880.    •  Qunit을
  • 881.   이용하여
  • 882.   모듈
  • 883.   단위
  • 884.   테스트
  • 885.   
  • 886. 24
  • 887.   /
  • 888.   Front
  • 889.   End
  • 890.   개발자가
  • 891.   들려주는
  • 892.   개발
  • 893.   이야기
  • 894.    3.
  • 895.   
  • 896.   네이버
  • 897.   개발
  • 898.   (예)
  • 899.    배포
  • 900.   작업
  • 901.   자동화
  • 902.    •  Grunt의
  • 903.   task를
  • 904.   이용
  • 905.    •  Js,css
  • 906.   머지
  • 907.   및
  • 908.   압축
  • 909.   
  • 910.    •  Image
  • 911.   최적화
  • 912.    •  단위
  • 913.   테스트
  • 914.   자동화
  • 915.    요구사항
  • 916.   분석
  • 917.    Framework,
  • 918.   Library
  • 919.   선정
  • 920.    개발
  • 921.   환경
  • 922.   준비
  • 923.    설계
  • 924.    개발
  • 925.   /
  • 926.   테스트
  • 927.    배포
  • 928.   환경
  • 929.   준비
  • 930.   
  • 931. 25
  • 932.   /
  • 933.   Front
  • 934.   End
  • 935.   개발자가
  • 936.   들려주는
  • 937.   개발
  • 938.   이야기
  • 939.   
  • 940. 26
  • 941.   /
  • 942.   Front
  • 943.   End
  • 944.   개발자가
  • 945.   들려주는
  • 946.   개발
  • 947.   이야기
  • 948.    어떻게
  • 949.   얻는가?
  • 950.    
  • 951.    Javascript
  • 952.   Weekly
  • 953.    HTML
  • 954.   Weekly
  • 955.    CSS
  • 956.   Weekly
  • 957.    Node
  • 958.   Weekly
  • 959.    Responsive
  • 960.   Design
  • 961.   Weekly
  • 962.    …⋯
  • 963.    HTML5Rocks.com
  • 964.    블로그
  • 965.    …⋯
  • 966.   
  • 967. Front
  • 968.   End
  • 969.   반격의
  • 970.   서막
  • 971.    감사합니다.
  • 972.