SlideShare une entreprise Scribd logo
1  sur  14
Télécharger pour lire hors ligne
Cooking jQuery 
NHN Technology Services 
이진권
What is js Libaries?
‘수레를 만들기 위해 바퀴를 다시 발명하 
지 말라’ 
‘널리 개발자들을 이롭게 하라.’ 
–Someone Who called Developer
Union
 of
 Function
 or
 Class 
자바스크립트의 문법을 이용하여 만든 
함수(혹은 클래스)의 집합 
처음부터 끝까지 모든 기능을 구현하기는 
너무 어렵고 너무 오래 걸린다. 
크로스브라우징을 지원하는 고성능의 DOM Selector를 어 
떻게 구현할 것인가?
There are 
good Javascript 
third party libraries, 
BUT!
Too Too much 
Libraries 
Javascript repositories 
264,131 
(Github 2013) 
무얼 쓸 것인가는 본인 선택의 몫
jQuery 
2006 John Resig 
최소한의 기능으로 기본적인 기능을 쉽고 간편하게 
2.x버전대는 예전 브라우저 지원을 줄이며 다이어트 
1.x버전대는 예전 브라우저 지원을 포함하며 
크로스 브라우징을 선택
What do you want for jQuery? 
DOM Selection 
DOM Manipulation 
Cross Browsing Ajax 
Easy Event Handling 
And more..
Real jQuery 
$(‘#_DOM’).method(); 
선택하고 실행한다
More jQuery, Chaining 
$(‘#_DOM’).method().method2();

Contenu connexe

Tendances

빠른 프로토타이핑을 위한 웹앱 자동화 툴 - YEOMAN
빠른 프로토타이핑을 위한 웹앱 자동화 툴 - YEOMAN빠른 프로토타이핑을 위한 웹앱 자동화 툴 - YEOMAN
빠른 프로토타이핑을 위한 웹앱 자동화 툴 - YEOMAN정호 전
 
[JCO 컨퍼런스] 웹사이트 Front-End 성능 최적화
[JCO 컨퍼런스] 웹사이트 Front-End 성능 최적화[JCO 컨퍼런스] 웹사이트 Front-End 성능 최적화
[JCO 컨퍼런스] 웹사이트 Front-End 성능 최적화흥래 김
 
오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5Taegon Kim
 
응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angular응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angularredribbon1307
 
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강 [토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강 우영 주
 
우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구Jae Sung Park
 
JavaScript로 오픈소스를 해보자. bsJS
JavaScript로 오픈소스를 해보자. bsJSJavaScript로 오픈소스를 해보자. bsJS
JavaScript로 오픈소스를 해보자. bsJSNAVER D2
 
Next Javascript ES2015 시작하기
Next Javascript ES2015 시작하기Next Javascript ES2015 시작하기
Next Javascript ES2015 시작하기JinKwon Lee
 
크롬 개발자 도구 소개 및 사용법
크롬 개발자 도구 소개 및 사용법크롬 개발자 도구 소개 및 사용법
크롬 개발자 도구 소개 및 사용법Gihyo Joshua Jang
 
컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기우영 주
 
[D2 오픈세미나]5.html5 api 테트리스게임_이진권
[D2 오픈세미나]5.html5 api 테트리스게임_이진권[D2 오픈세미나]5.html5 api 테트리스게임_이진권
[D2 오픈세미나]5.html5 api 테트리스게임_이진권NAVER D2
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔NAVER D2
 
프론트엔드 개발자의 자바스크립트
프론트엔드 개발자의 자바스크립트 프론트엔드 개발자의 자바스크립트
프론트엔드 개발자의 자바스크립트 jeong seok yang
 
vuetiful korea 발표자료
vuetiful korea 발표자료vuetiful korea 발표자료
vuetiful korea 발표자료치웅 이
 
프론트엔드 개발자
프론트엔드 개발자프론트엔드 개발자
프론트엔드 개발자jung kyunghwan
 
[D2 CAMPUS] tech meet up(Back-end) - 교내 웹서비스 개발 일지 (박은찬님)
[D2 CAMPUS] tech meet up(Back-end) - 교내 웹서비스 개발 일지 (박은찬님)[D2 CAMPUS] tech meet up(Back-end) - 교내 웹서비스 개발 일지 (박은찬님)
[D2 CAMPUS] tech meet up(Back-end) - 교내 웹서비스 개발 일지 (박은찬님)NAVER D2
 
[145]5년간의네이버웹엔진개발삽질기그리고 김효
[145]5년간의네이버웹엔진개발삽질기그리고 김효[145]5년간의네이버웹엔진개발삽질기그리고 김효
[145]5년간의네이버웹엔진개발삽질기그리고 김효NAVER D2
 
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신Sungwoo Choo
 
Front-end Development with Ruby on Rails
Front-end Development with Ruby on RailsFront-end Development with Ruby on Rails
Front-end Development with Ruby on Rails추근 문
 

Tendances (20)

빠른 프로토타이핑을 위한 웹앱 자동화 툴 - YEOMAN
빠른 프로토타이핑을 위한 웹앱 자동화 툴 - YEOMAN빠른 프로토타이핑을 위한 웹앱 자동화 툴 - YEOMAN
빠른 프로토타이핑을 위한 웹앱 자동화 툴 - YEOMAN
 
[JCO 컨퍼런스] 웹사이트 Front-End 성능 최적화
[JCO 컨퍼런스] 웹사이트 Front-End 성능 최적화[JCO 컨퍼런스] 웹사이트 Front-End 성능 최적화
[JCO 컨퍼런스] 웹사이트 Front-End 성능 최적화
 
오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5
 
응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angular응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angular
 
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강 [토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
 
우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구
 
JavaScript로 오픈소스를 해보자. bsJS
JavaScript로 오픈소스를 해보자. bsJSJavaScript로 오픈소스를 해보자. bsJS
JavaScript로 오픈소스를 해보자. bsJS
 
Next Javascript ES2015 시작하기
Next Javascript ES2015 시작하기Next Javascript ES2015 시작하기
Next Javascript ES2015 시작하기
 
크롬 개발자 도구 소개 및 사용법
크롬 개발자 도구 소개 및 사용법크롬 개발자 도구 소개 및 사용법
크롬 개발자 도구 소개 및 사용법
 
컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기
 
[D2 오픈세미나]5.html5 api 테트리스게임_이진권
[D2 오픈세미나]5.html5 api 테트리스게임_이진권[D2 오픈세미나]5.html5 api 테트리스게임_이진권
[D2 오픈세미나]5.html5 api 테트리스게임_이진권
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔
 
프론트엔드 개발자의 자바스크립트
프론트엔드 개발자의 자바스크립트 프론트엔드 개발자의 자바스크립트
프론트엔드 개발자의 자바스크립트
 
vuetiful korea 발표자료
vuetiful korea 발표자료vuetiful korea 발표자료
vuetiful korea 발표자료
 
프론트엔드 개발자
프론트엔드 개발자프론트엔드 개발자
프론트엔드 개발자
 
iOS9 소개
iOS9 소개iOS9 소개
iOS9 소개
 
[D2 CAMPUS] tech meet up(Back-end) - 교내 웹서비스 개발 일지 (박은찬님)
[D2 CAMPUS] tech meet up(Back-end) - 교내 웹서비스 개발 일지 (박은찬님)[D2 CAMPUS] tech meet up(Back-end) - 교내 웹서비스 개발 일지 (박은찬님)
[D2 CAMPUS] tech meet up(Back-end) - 교내 웹서비스 개발 일지 (박은찬님)
 
[145]5년간의네이버웹엔진개발삽질기그리고 김효
[145]5년간의네이버웹엔진개발삽질기그리고 김효[145]5년간의네이버웹엔진개발삽질기그리고 김효
[145]5년간의네이버웹엔진개발삽질기그리고 김효
 
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
 
Front-end Development with Ruby on Rails
Front-end Development with Ruby on RailsFront-end Development with Ruby on Rails
Front-end Development with Ruby on Rails
 

En vedette

프론트엔드로 시작하는 웹 개발 방법과 지식들
프론트엔드로 시작하는 웹 개발 방법과 지식들프론트엔드로 시작하는 웹 개발 방법과 지식들
프론트엔드로 시작하는 웹 개발 방법과 지식들Eun Cho
 
Template method Pattern 살펴보기
Template method Pattern 살펴보기Template method Pattern 살펴보기
Template method Pattern 살펴보기JinKwon Lee
 
[NAVER D2] html5 api를 활용한 실시간 대전 테트리스 게임 개발
[NAVER D2] html5 api를 활용한 실시간 대전 테트리스 게임 개발[NAVER D2] html5 api를 활용한 실시간 대전 테트리스 게임 개발
[NAVER D2] html5 api를 활용한 실시간 대전 테트리스 게임 개발JinKwon Lee
 
자바스크립트의 또다른 발전, Backbone.js
자바스크립트의 또다른 발전, Backbone.js자바스크립트의 또다른 발전, Backbone.js
자바스크립트의 또다른 발전, Backbone.jsJinKwon Lee
 
[152] 웹브라우저 감옥에서 살아남기
[152] 웹브라우저 감옥에서 살아남기[152] 웹브라우저 감옥에서 살아남기
[152] 웹브라우저 감옥에서 살아남기NAVER D2
 
[154] 데이터 센터의 오픈 소스 open compute project (ocp)
[154] 데이터 센터의 오픈 소스 open compute project (ocp)[154] 데이터 센터의 오픈 소스 open compute project (ocp)
[154] 데이터 센터의 오픈 소스 open compute project (ocp)NAVER D2
 
프론트엔드개발 버전 표기 방법 가이드 라인
프론트엔드개발 버전 표기 방법 가이드 라인프론트엔드개발 버전 표기 방법 가이드 라인
프론트엔드개발 버전 표기 방법 가이드 라인Ji-Tae Kim
 
Front-End 개발의 괜찮은 선택 ES6 & React
Front-End 개발의 괜찮은 선택  ES6 & ReactFront-End 개발의 괜찮은 선택  ES6 & React
Front-End 개발의 괜찮은 선택 ES6 & React지수 윤
 
1.openseminar
1.openseminar1.openseminar
1.openseminarNAVER D2
 
네이버 오픈세미나 백엔드_아키텍쳐
네이버 오픈세미나 백엔드_아키텍쳐네이버 오픈세미나 백엔드_아키텍쳐
네이버 오픈세미나 백엔드_아키텍쳐NAVER D2
 
2.네이버 프론트엔드 김지태
2.네이버 프론트엔드 김지태2.네이버 프론트엔드 김지태
2.네이버 프론트엔드 김지태NAVER D2
 

En vedette (11)

프론트엔드로 시작하는 웹 개발 방법과 지식들
프론트엔드로 시작하는 웹 개발 방법과 지식들프론트엔드로 시작하는 웹 개발 방법과 지식들
프론트엔드로 시작하는 웹 개발 방법과 지식들
 
Template method Pattern 살펴보기
Template method Pattern 살펴보기Template method Pattern 살펴보기
Template method Pattern 살펴보기
 
[NAVER D2] html5 api를 활용한 실시간 대전 테트리스 게임 개발
[NAVER D2] html5 api를 활용한 실시간 대전 테트리스 게임 개발[NAVER D2] html5 api를 활용한 실시간 대전 테트리스 게임 개발
[NAVER D2] html5 api를 활용한 실시간 대전 테트리스 게임 개발
 
자바스크립트의 또다른 발전, Backbone.js
자바스크립트의 또다른 발전, Backbone.js자바스크립트의 또다른 발전, Backbone.js
자바스크립트의 또다른 발전, Backbone.js
 
[152] 웹브라우저 감옥에서 살아남기
[152] 웹브라우저 감옥에서 살아남기[152] 웹브라우저 감옥에서 살아남기
[152] 웹브라우저 감옥에서 살아남기
 
[154] 데이터 센터의 오픈 소스 open compute project (ocp)
[154] 데이터 센터의 오픈 소스 open compute project (ocp)[154] 데이터 센터의 오픈 소스 open compute project (ocp)
[154] 데이터 센터의 오픈 소스 open compute project (ocp)
 
프론트엔드개발 버전 표기 방법 가이드 라인
프론트엔드개발 버전 표기 방법 가이드 라인프론트엔드개발 버전 표기 방법 가이드 라인
프론트엔드개발 버전 표기 방법 가이드 라인
 
Front-End 개발의 괜찮은 선택 ES6 & React
Front-End 개발의 괜찮은 선택  ES6 & ReactFront-End 개발의 괜찮은 선택  ES6 & React
Front-End 개발의 괜찮은 선택 ES6 & React
 
1.openseminar
1.openseminar1.openseminar
1.openseminar
 
네이버 오픈세미나 백엔드_아키텍쳐
네이버 오픈세미나 백엔드_아키텍쳐네이버 오픈세미나 백엔드_아키텍쳐
네이버 오픈세미나 백엔드_아키텍쳐
 
2.네이버 프론트엔드 김지태
2.네이버 프론트엔드 김지태2.네이버 프론트엔드 김지태
2.네이버 프론트엔드 김지태
 

Similaire à Cooking jquery

Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyondJae Sung Park
 
[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기NAVER D2
 
드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서draghome
 
Soscon2017 오픈소스를 활용한 마이크로 서비스의 캐시 전략
Soscon2017 오픈소스를 활용한 마이크로 서비스의 캐시 전략Soscon2017 오픈소스를 활용한 마이크로 서비스의 캐시 전략
Soscon2017 오픈소스를 활용한 마이크로 서비스의 캐시 전략Kris Jeong
 
Big Data platform을 위한 Sencha Ext JS 사례.
Big Data platform을 위한 Sencha Ext JS 사례.Big Data platform을 위한 Sencha Ext JS 사례.
Big Data platform을 위한 Sencha Ext JS 사례.효근 박
 
Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012Daum DNA
 
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기현철 조
 
나의 jQuery 실력 향상기
나의 jQuery 실력 향상기나의 jQuery 실력 향상기
나의 jQuery 실력 향상기정석 양
 
2017년 javascript의 현재주소
2017년 javascript의 현재주소2017년 javascript의 현재주소
2017년 javascript의 현재주소윤학 권
 
Node.js 시작하기
Node.js 시작하기Node.js 시작하기
Node.js 시작하기Huey Park
 
practical perf testing - d2startup
practical perf testing - d2startuppractical perf testing - d2startup
practical perf testing - d2startupJunHo Yoon
 
AngularJS 2, version 1 and ReactJS
AngularJS 2, version 1 and ReactJSAngularJS 2, version 1 and ReactJS
AngularJS 2, version 1 and ReactJSKenneth Ceyer
 
Unionweb프로젝트
Unionweb프로젝트Unionweb프로젝트
Unionweb프로젝트Dong-Jin Park
 
01.개발환경 교육교재
01.개발환경 교육교재01.개발환경 교육교재
01.개발환경 교육교재Hankyo
 
이동현 - 오픈소스 DBMS 큐브리드 (2009Y05M30D)
이동현 - 오픈소스 DBMS 큐브리드 (2009Y05M30D)이동현 - 오픈소스 DBMS 큐브리드 (2009Y05M30D)
이동현 - 오픈소스 DBMS 큐브리드 (2009Y05M30D)Ubuntu Korea Community
 
최근 Javascript framework 조사
최근 Javascript framework 조사최근 Javascript framework 조사
최근 Javascript framework 조사Kichul Jung
 

Similaire à Cooking jquery (20)

Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond
 
[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기
 
hexa core
hexa corehexa core
hexa core
 
드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서
 
Soscon2017 오픈소스를 활용한 마이크로 서비스의 캐시 전략
Soscon2017 오픈소스를 활용한 마이크로 서비스의 캐시 전략Soscon2017 오픈소스를 활용한 마이크로 서비스의 캐시 전략
Soscon2017 오픈소스를 활용한 마이크로 서비스의 캐시 전략
 
Big Data platform을 위한 Sencha Ext JS 사례.
Big Data platform을 위한 Sencha Ext JS 사례.Big Data platform을 위한 Sencha Ext JS 사례.
Big Data platform을 위한 Sencha Ext JS 사례.
 
4-3. jquery
4-3. jquery4-3. jquery
4-3. jquery
 
Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012
 
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
 
나의 jQuery 실력 향상기
나의 jQuery 실력 향상기나의 jQuery 실력 향상기
나의 jQuery 실력 향상기
 
2017년 javascript의 현재주소
2017년 javascript의 현재주소2017년 javascript의 현재주소
2017년 javascript의 현재주소
 
2015 oce specification
2015 oce specification2015 oce specification
2015 oce specification
 
Node.js 시작하기
Node.js 시작하기Node.js 시작하기
Node.js 시작하기
 
practical perf testing - d2startup
practical perf testing - d2startuppractical perf testing - d2startup
practical perf testing - d2startup
 
ecdevday4
ecdevday4ecdevday4
ecdevday4
 
AngularJS 2, version 1 and ReactJS
AngularJS 2, version 1 and ReactJSAngularJS 2, version 1 and ReactJS
AngularJS 2, version 1 and ReactJS
 
Unionweb프로젝트
Unionweb프로젝트Unionweb프로젝트
Unionweb프로젝트
 
01.개발환경 교육교재
01.개발환경 교육교재01.개발환경 교육교재
01.개발환경 교육교재
 
이동현 - 오픈소스 DBMS 큐브리드 (2009Y05M30D)
이동현 - 오픈소스 DBMS 큐브리드 (2009Y05M30D)이동현 - 오픈소스 DBMS 큐브리드 (2009Y05M30D)
이동현 - 오픈소스 DBMS 큐브리드 (2009Y05M30D)
 
최근 Javascript framework 조사
최근 Javascript framework 조사최근 Javascript framework 조사
최근 Javascript framework 조사
 

Cooking jquery