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

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

on

  • 1,497 views

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

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

Statistics

Views

Total Views
1,497
Views on SlideShare
693
Embed Views
804

Actions

Likes
9
Downloads
24
Comments
0

7 Embeds 804

http://helloworld.naver.com 783
http://feedly.com 9
https://twitter.com 7
http://annotary.com 2
http://www.google.co.kr 1
http://localhost 1
http://newsblur.com 1
More...

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

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

  • Front-End
  •   개발자가
  •   들려주는
  •    개발
  •   이야기
  •    작성자:
  •   손찬욱
  •   과장
  •    공통플랫폼개발랩
  •    ⓒ
  •   NAVER
  •   Corp.
  •   
  • 손찬욱
  •   
  •    
  •    
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   공통플랫폼개발랩
  •    
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •    
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   공공S/W
  •   아키텍처팀
  •    
  •    
  •   Jindo
  •   Mobile
  •   Component
  •   개발
  •    
  •   네이버
  •   모바일웹
  •   기술지원
  •    
  •    “쉽고
  •   빠른
  •   모바일
  •   웹
  •   UI
  •   개발”
  •   
  • Front
  •   End
  •   진화의
  •   시작
  •   
  • 4
  •   /
  •   Front
  •   End
  •   개발자가
  •   들려주는
  •   개발
  •   이야기
  •    1.
  •   Web이
  •   나오기
  •   까지
  •    network
  •    App
  •    Res
  •    Server
  •    Res
  •    S/W
  •    Res
  •   App
  •    Res
  •    자원(Resource)이
  •   중복?
  •   공유하고
  •   싶은데…⋯
  •    소프트웨어(App)변경
  •   시마다
  •   PC에
  •   다시
  •   설치해야
  •   하나?
  •   
  •    App
  •    HTTP
  •   
  • 5
  •   /
  •   Front
  •   End
  •   개발자가
  •   들려주는
  •   개발
  •   이야기
  •    2.
  •   Server
  •   중심의
  •   Web
  •   Architecture
  •   (Thin
  •   client)
  •    network
  •    S/W
  •    Res
  •    Server
  •    Res
  •    S/W
  •    Res
  •   S/W
  •    Res
  •    App
  •    HTTP
  •    HTML
  •    CSS
  •    Javascript
  •    Java,
  •   Servlet,
  •   JSP
  •    C#,
  •   ASP.NET
  •    C,
  •   C++
  •   …⋯
  •    View
  •   영역
  •    Programming
  •   영역
  •   
  • 6
  •   /
  •   Front
  •   End
  •   개발자가
  •   들려주는
  •   개발
  •   이야기
  •    3.
  •   Web
  •   기술의
  •   발전
  •    Ajax
  •   (Asynchronous
  •   Javascript
  •   And
  •   XML)
  •   
  • 7
  •   /
  •   Front
  •   End
  •   개발자가
  •   들려주는
  •   개발
  •   이야기
  •    3.
  •   Web
  •   기술의
  •   발전
  •    HTTP
  •   request
  •    HTTP
  •   response
  •    action
  •    BLOCK
  •    action
  •    HTTP
  •   request
  •    HTTP
  •   response
  •    None-Ajax
  •    Ajax
  •    전체
  •   페이지
  •   전환
  •   없이…⋯
  •    Block
  •   없이…⋯
  •    서버당
  •   처리
  •   User수
  •   증가로
  •    비용감소
  •    Request
  •   용량
  •   감소로
  •    비용감소
  •    Application
  •   
  • 8
  •   /
  •   Front
  •   End
  •   개발자가
  •   들려주는
  •   개발
  •   이야기
  •    4.
  •   Web
  •   Application의
  •   확산
  •   
  • 9
  •   /
  •   Front
  •   End
  •   개발자가
  •   들려주는
  •   개발
  •   이야기
  •    5.
  •   Front
  •   End
  •   영역
  •   (Rich
  •   client)
  •    HTML
  •    CSS
  •    Javascript
  •    Java,
  •   Servlet,
  •   JSP
  •    C#,
  •   ASP.NET
  •    C,
  •   C++
  •   …⋯
  •    network
  •    S/W
  •    Res
  •    Server
  •    Res
  •    S/W
  •    Res
  •   S/W
  •    Res
  •    HTTP
  •    View
  •   영역
  •    Programming
  •   영역
  •    App
  •    App
  •   App
  •    Programming
  •   영역
  •    Back-End
  •    Front-End
  •    Javascript
  •    Res
  •    HTML5
  •    CSS3
  •    Res
  •   
  • 10
  •   /
  •   Front
  •   End
  •   개발자가
  •   들려주는
  •   개발
  •   이야기
  •    6.
  •   Front
  •   End
  •   영역
  •   수요의
  •   증가
  •    
  •    Google
  •   Trend
  •   
  • 11
  •   /
  •   Front
  •   End
  •   개발자가
  •   들려주는
  •   개발
  •   이야기
  •    6.
  •   Front
  •   End
  •   영역
  •   수요의
  •   증가
  •    
  •    Indeed
  •   
  • 12
  •   /
  •   Front
  •   End
  •   개발자가
  •   들려주는
  •   개발
  •   이야기
  •    6.
  •   Front
  •   End
  •   영역
  •   수요의
  •   증가
  •    
  •    Forbes
  •    포브지가
  •   예측한
  •   미래의
  •   고액
  •   연봉
  •   직업
  •   
  • 13
  •   /
  •   Front
  •   End
  •   개발자가
  •   들려주는
  •   개발
  •   이야기
  •    What
  • 14
  •   /
  •   Front
  •   End
  •   개발자가
  •   들려주는
  •   개발
  •   이야기
  •    1.
  •   Language
  •    HTML
  •    CSS
  •    Javascript
  •   
  • 15
  •   /
  •   Front
  •   End
  •   개발자가
  •   들려주는
  •   개발
  •   이야기
  •    network
  •    HTTP
  •    S/W
  •    Res
  •    Front-End
  •    Back-End
  •   DNS,
  •   CDN,
  •    Cache,
  •   TCP/IP,
  •    Socket,
  •   Proxy,
  •   …⋯
  •    Cross-Browsing,
  •   Web
  •   Accessibility,
  •    Responsive
  •   Web,
  •    Image
  •   format,
  •   Resource
  •   Optimization,
  •    Performance(Cache,
  •   Prefetching,
  •   lazy
  •   loadi ng,
  •   H/W
  •   Acc,
  •   CSS
  •   splite,
  •   …⋯),
  •    Security
  •   (Cross
  •   origin
  •   resource
  •   sharing,
  •   XSS ,
  •   …⋯),
  •    Internal
  •   browser
  •   (Rendering,
  •   Memory
  •   man agement,
  •   single
  •   thread,
  •   gc,
  •   …⋯),
  •   …⋯
  •    Front-End
  •    2.
  •   Technical
  •   
  • 16
  •   /
  •   Front
  •   End
  •   개발자가
  •   들려주는
  •   개발
  •   이야기
  •    MVC
  •    3.
  •   Library
  •   &
  •   Framework
  •   &
  •   Tools
  •    DOM
  •    UI
  •    Graphic/Chart
  •    Test
  •    Lazy/
  •    Template
  •    
  •   
  •   a.
  •   Library
  •   &
  •   Framework
  •   
  • 17
  •   /
  •   Front
  •   End
  •   개발자가
  •   들려주는
  •   개발
  •   이야기
  •    3.
  •   Library
  •   &
  •   Framework
  •   &
  •   Tools
  •    Browser
  •    개발자
  •   도구
  •    Network
  •    형상관리
  •    Task/Build
  •    Package
  •    Test
  •    
  •   
  •   b.
  •   Tools
  •   
  • 18
  •   /
  •   Front
  •   End
  •   개발자가
  •   들려주는
  •   개발
  •   이야기
  •    중요한
  •   것은
  •   
  •    선택을
  •   할
  •   수
  •   있는
  •   능력
  •    필수가 아닌 선택 •  서비스의
  •   특징
  •   파악
  •    •  회사
  •   규모
  •   및
  •   인력
  •   상황
  •    •  Library,
  •   framework의
  •   장단점
  •    •  라이선스
  •   비용
  •    •  …⋯
  •    Tool, Library, Framework은 생산성 향상을 위한 도구일 뿐 3.
  •   Library
  •   &
  •   Framework
  •   &
  •   Tools
  •   
  • 19
  •   /
  •   Front
  •   End
  •   개발자가
  •   들려주는
  •   개발
  •   이야기
  •    4.
  •   
  •   네이버
  •   개발
  •   (예)
  •    요구사항
  •   분석
  •    Framework,
  •   Library
  •   선정
  •    개발
  •   환경
  •   준비
  •    설계
  •    개발
  •   /
  •   테스트
  •    배포
  •   환경
  •   준비
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    무한
  •   컨텐츠
  •    
  •    
  •    좌,우
  •   플리킹
  •    자동완성
  •    기술이슈
  •   여부
  •   점검
  •   
  • 20
  •   /
  •   Front
  •   End
  •   개발자가
  •   들려주는
  •   개발
  •   이야기
  •    4.
  •   
  •   네이버
  •   개발
  •   (예)
  •    서비스
  •   특징
  •   
  •    •  네이버
  •   메인은
  •   국내
  •   80%
  •   검색
  •   점유율을
  •   가지고
  •   있을
  •    정도로
  •   많은
  •   사용자와
  •   다양한
  •   환경의
  •   사용자가
  •   접속
  •    •  identity를
  •   확보하기
  •   위해
  •   네이버
  •   Look&Feel
  •    •  검색의
  •   시작이
  •   되는
  •   페이지
  •    네이버
  •   개발
  •   인력
  •   
  •    •  Jindo,
  •   jQuery에
  •   익숙한
  •   개발
  •   인력이
  •   있음
  •    구분
  •    JindoJs
  •    JQuery
  •   Mobile
  •    용량
  •    하
  •    중
  •    Cross-browsing
  •    상
  •    (국내
  •   단말기에
  •   완벽호환)
  •    하
  •    개발생산성
  •    중
  •    상
  •    플리킹
  •    컴포넌트
  •    O
  •    O
  •    무한스크롤
  •    컴포넌트
  •    O
  •    3’rd
  •   파티에
  •   있음
  •    기술
  •   지원
  •    지원조직
  •   존재
  •    없음
  •    디자인변경
  •    쉬움
  •    어려움
  •    초기
  •   로딩속도
  •    상
  •    중
  •    요구사항
  •   분석
  •    Framework,
  •   Library
  •   선정
  •    개발
  •   환경
  •   준비
  •    설계
  •    개발
  •   /
  •   테스트
  •    배포
  •   환경
  •   준비
  •   
  • 21
  •   /
  •   Front
  •   End
  •   개발자가
  •   들려주는
  •   개발
  •   이야기
  •    4.
  •   
  •   네이버
  •   개발
  •   (예)
  •    형상관리
  •   환경
  •   
  •    •  Git
  •   기반의
  •   gitlab
  •   시스템에
  •   환경
  •   구성
  •    Framework
  •   설치
  •    •  Bower를
  •   이용하여
  •   jindo
  •   환경
  •   구성
  •    CI
  •   서버
  •   설치
  •    •  Jenkins를
  •   이용하여
  •   CI
  •   환경
  •   구성
  •    요구사항
  •   분석
  •    Framework,
  •   Library
  •   선정
  •    개발
  •   환경
  •   준비
  •    설계
  •    개발
  •   /
  •   테스트
  •    배포
  •   환경
  •   준비
  •   
  • 22
  •   /
  •   Front
  •   End
  •   개발자가
  •   들려주는
  •   개발
  •   이야기
  •    4.
  •   
  •   네이버
  •   개발
  •   (예)
  •    Front
  •   End의
  •   관심사는
  •   “사용자의
  •   인터렉션”
  •    UI
  •   영역을
  •   기준으로
  •   기능
  •   영역
  •   설계
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    UI
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    UI
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    UI
  •    
  •    panel UI
  •    Panel
  •    Manager
  •    panel UI
  •   panel UI
  •    PanelModel
  •    요구사항
  •   분석
  •    Framework,
  •   Library
  •   선정
  •    개발
  •   환경
  •   준비
  •    설계
  •    개발
  •   /
  •   테스트
  •    배포
  •   환경
  •   준비
  •   
  • 23
  •   /
  •   Front
  •   End
  •   개발자가
  •   들려주는
  •   개발
  •   이야기
  •    4.
  •   
  •   네이버
  •   개발
  •   (예)
  •    IDE
  •   로
  •   개발
  •    •  SublimeText,
  •   WebStorm,
  •   Eclipse,
  •   intelliJ
  •    등을
  •   활용
  •   
  •    Web
  •   browser로
  •   기능
  •   테스트
  •    •  Cross-browsing
  •    요구사항
  •   분석
  •    Framework,
  •   Library
  •   선정
  •    개발
  •   환경
  •   준비
  •    설계
  •    개발
  •   /
  •   테스트
  •    배포
  •   환경
  •   준비
  •    단위
  •   테스트
  •   작성
  •    •  Qunit을
  •   이용하여
  •   모듈
  •   단위
  •   테스트
  •   
  • 24
  •   /
  •   Front
  •   End
  •   개발자가
  •   들려주는
  •   개발
  •   이야기
  •    3.
  •   
  •   네이버
  •   개발
  •   (예)
  •    배포
  •   작업
  •   자동화
  •    •  Grunt의
  •   task를
  •   이용
  •    •  Js,css
  •   머지
  •   및
  •   압축
  •   
  •    •  Image
  •   최적화
  •    •  단위
  •   테스트
  •   자동화
  •    요구사항
  •   분석
  •    Framework,
  •   Library
  •   선정
  •    개발
  •   환경
  •   준비
  •    설계
  •    개발
  •   /
  •   테스트
  •    배포
  •   환경
  •   준비
  •   
  • 25
  •   /
  •   Front
  •   End
  •   개발자가
  •   들려주는
  •   개발
  •   이야기
  •   
  • 26
  •   /
  •   Front
  •   End
  •   개발자가
  •   들려주는
  •   개발
  •   이야기
  •    어떻게
  •   얻는가?
  •    
  •    Javascript
  •   Weekly
  •    HTML
  •   Weekly
  •    CSS
  •   Weekly
  •    Node
  •   Weekly
  •    Responsive
  •   Design
  •   Weekly
  •    …⋯
  •    HTML5Rocks.com
  •    블로그
  •    …⋯
  •   
  • Front
  •   End
  •   반격의
  •   서막
  •    감사합니다.
  •