5. Who is
Front-End Developer?
• Markup(HTML, CSS), JavaScript 등을 이용해
사용자가 접하는 웹 사이트 영역을 개발하는 개발자
• 최근에는 웹 접근성, UX/UI, 웹 사이트 최적화
등의 업무를 같이 수행
6. Who is
Front-End Developer?
HTML코더
Markup
Developer
UI
Developer
Front-End
Developer
HTML ⊙ ⊙ ● ⊙
CSS ● ⊙ ● ⊙
웹 접근성 ⊙ ● ⊙
웹 표준 준수 ⊙ ● ⊙
Javascript ● ⊙ ⊙
프론트 성능 최적화 ● ⊙
UI/UX ● ⊙
7. 자바스크립트의 시작
모자이크(당시의 1위 브라우저)를 이길려면 뭔가
괜찮은 것이 필요해!
웹페이지에 넣을 간단한 프로그래밍 언어를
고안해보자.
Netscape Communications
Brendan Eich
1995.8.19
최초로 JS가 포함된 Netscape 브라우저 발표
8. 이름을 지어야 하는데,
인기있는 Java이름을 붙여서 지으면
같이 인기가 오르지 않을까?
빌조이! 제가 언어 하나 만들었는데
여기에 Java를 붙여 JavaScript
라고 해도 될까요?
응.
너 맘대로해~!!
Sun MicroSystems
Bill Joy
9. 그래서 자바와는 관계도 없이
이름만 JavaScript
훗날 Java이름을 허용한 Bill Joy는
“잘못된 결정” 이었다는 발언을 함
11. JS 발전 과정
2
글로벌 IT기업들이
본격적으로 JS를 사용 시작
3
다양한 UX를 가진
웹 어플리케이션 등장
혁신적인 Google Map
5
iOS Web Browser
Flash 미지원, 대안으로 JS
4
웹 2.0, HTML5와 더불어
JS도 발전
수많은 선수 입장
6
Android Web Browser
도 따라서 Flash 미지원
1
출시 후 오랜 시간동안
Toy Language 취급
12. JS
입장한 선수들로부터
쏟아져 나오는 Open Source
383,185
Github JavaScript repository
13. 입장한 선수들은 뭐든지 만들고,
. (dot) JS 를 붙여서 공개하기 시작
Whatever _____ . JS
14. JavaScript 원정대
Browser
Library
Desktop
Server-Side
JavaScript
Application
JS in Device,
IoT
Database with
JSON
여러가지 분야로 발전
15. Browser Library
Browser
Library
ServerSide
JavaScript
Desktop
Application
Database
with JSON
JS in
Device, IoT
간단한 Util 성격의 라이브러리부터,
jQuery, Underscore, Zepto
HTML5 고도화 라이브러리,
Three.js, Socket.io, Raphael
그리고, MVC 프레임워크를 넘어,
Backbone.js, Angular.js, Ember.js
Complie Javascript까지 다양한 발전
CoffeeScript, TypeScript, Dart, JSX
이제 Web도 어플리케이션이라는
수준에 이르렀음
16. Server Side Javascript
Browser
Library
ServerSide
JavaScript
Desktop
Application
Database
with JSON
JS in
Device, IoT
서버에서도 자바스크립트를
돌릴 수 있지 않을까?
구글 v8 JS 엔진을 포함하는
서버 사이드 JavaScript 플랫폼 탄생
서드파티 패키지 at NPM
Total : 104,651
17. 서버에서 JS를 돌려서 뭘하죠?
Spring
Framework
Node.js PHP on
기존 플랫폼및 언어와 같은 레벨에서
서비스를 개발할 수 있게 되었음
Browser
Library
ServerSide
JavaScript
Desktop
Application
Database
with JSON
JS in
Device, IoT
Linux
Apache
Java on
Tomcat
Lalavel
Framework
express.js
Framework
18. Desktop App
Browser
Library
ServerSide
JavaScript
Desktop
Application
Database
with JSON
JS in
Device, IoT
데스크탑 어플리케이션도 웹기술로 만들
수 있지 않을까?
웹은 브라우저를 벗어날 수 없기 때문에
밖으로 나갈 방법을 찾기 시작
Web App Desktop App
19. Desktop App
Browser
Library
ServerSide
JavaScript
Desktop
Application
Database
with JSON
JS in
Device, IoT
Node-Webkit
클라이언트인 기술인 웹킷에,
앞서 설명한 서버 기술인 Node.js를 포함
Node.js 가 할 수 있는 것들을 프론트에서
쓸 수 있게 됨
20. Database with JSON
Browser
Library
ServerSide
Javascript
Desktop
Application
Database
with JSON
JS in
Device, IoT
NoSQL 데이터베이스 mongoDB
도큐먼트 지향 데이터베이스 시스템
JSON 스타일의 문서를 저장
(JavaScript Object Notation)
21. JS in Device, IoT
Browser
Library
ServerSide
Javascript
Desktop
Application
Database
with JSON
JS in
Device, IoT
Raspberry Pi
Node.js 플랫폼
설치가능
Device 제어를
JS Code로 할 수 있음
with pi.js
33. 개발환경 구축
더이상 Notepad에서 개발하지 않아요
똑똑한 IDE, WebStorm 9
코드 정적 분석, 실시간 코드 유효성 체크, ETC.
34. Project Scaffolding
예전처럼 파일 복사해서 개발하지 않음
Scaffolding 유틸리티를 이용하여 개발 환경 세팅
YEOMAN, GRUNT-INIT
단일 커맨드 실행으로 프로젝트 폴더 설정
35. 커맨드로 라이브러리 복사
쉬운 라이브러리 관리
Bower 유틸리티를 활용해서 커맨드에서 쉽게
자바스크립트 라이브러리를 관리할 수 있음
bower install jquery
bower search underscore
< File result >
bower_components/jquery
bower_components/underscore
46. Client Architecture
뷰와 모델의 로직이 혼재되기 쉬운 JavaScript
JavaScript의 개발 규모가 커지면서,
다른 언어에서 사용된 개발 패턴들이 도입됨
(MVC, Facade, Singleton, ETC…)
각 클래스에도 각자 역할 분담 필요!
47. Client Architecture
이제 JavaScript에도 MVC 패턴이 이용됨
단일 페이지에서 서버와 API 통신을 하면서
화면 갱신
Client Side MV* Framework
58. Data Handling
클라이언트에서 생성한 JavaScript Object가
서버까지 변환없이 그대로 전달. (ORM 필요 없음)
Create Object
from Client (Browser)
Web
Server
NoSQL
Database
Pass-thru without converting!!
59. Cli/Server Network
Socket Communication
on과 emit의 마법
Client Code
socket.emit(‘sendMessage’, data);
socket.on(‘receive’, function(){
alert(‘Server received Message’);
});
socket.on(‘sendMessage’, function(data){
socket.broadcast.emit(‘receive’);
});
Server Code
61. JS Build Environment
with Grunt.js
자바스크립트 태스크 러너
여러가지 귀찮은 작업들을 커맨드 한번에 실행
> js 파일 압축, css 최적화 등
gruntfile.js 생성
(설정 파일)
GRUNT 실행
(with ONE Command)
최종 산출물 파일
생성 완료
62. JavaScript Deploy
Deploy 용 환경 구축후, git push가 발생하면
(git hook 이용) 개발 서버에 자동으로 Deploy
Deploy는? grunt.js 태스크 러너를 이용함
63. Packaging N Device
Web’s good parts, can run everywhere
MOBILE APP
DESKTOP APP
Web Product
HTML, CSS, JS
Tizen
64. Phonegap 환경
WebView를 포함하는
네이티브 앱 구조
네이티브 API도 JS레벨에서
사용할 수 있음 (Bridge)
WebView
Native App
OS
65. Node-Webkit 환경
데스크탑 어플리케이션 플랫폼.
윈도우, OSX, Ubuntu 지원
DESKTOP APP
Build
Build
Build
69. What do you want to do?
Front-End 부터 Back-End까지 하나의 언어
이전에 PHP가 쉬운 접근의 언어 역할을 했다면,
빠른 개발 퍼포먼스로 그 역할을 대체할만한
JavaScript Full Stack
It’s for StartUp!!!!