SlideShare une entreprise Scribd logo
1  sur  14
Télécharger pour lire hors ligne
Backbone.js
Backbone.js
척추.js
MVC? MV*? MVVM?
ViewModel
Collection Router
Backbone.js ?
Backbone.js
Code
Backbone.js ?
RouterView CollectionModel
“클라이언트 개발에 MVC패턴 적용을 가능하게 해주는 자바스크립트 프레임워크”
SPA(single-page web apps)을 만들거나 복잡한 user interface를 만들기 위해
간단한 jquery나 mootools로는 구현하기가 매우 어렵다.
View
Jquery
Model
backbone
View Router
Backbone.js ?
RESTful design에 특화된 Model/Collection Structure
View의 Event bind용이
Model-View 가 철저히 분리되며,
이렇게 구성된 각 애플리케이션은
이벤트기반 또는 상호참조 기반 연결 가능
View 표현이 자유로우며 높은 유연성과 확장성
Backbone.js ?
Model View Controller
Model View *
?
Server
Client
MVC? MV*? MVVM?
Router
ViewDOM Collection
DOM 이벤트 모델 이벤트
DOM 갱신 모델 갱신
HTTP요청
MV*
단일한 데이터 덩어리-객체
Conversion(전환)
Validation(유효성)
Computation(속성값 조작)
AccessControl(접근제어)
interactive data(상호작용을 하는데이터)
Model
View
View
DOM
Collection
DOM 이벤트
모델 이벤트
DOM 갱신
모델 갱신
Model이 db에서 레코드 하나와 비유된다면
Collection은 쿼리 결과로 받은 레코드들.
Model 데이터를 관리하기 위한 하나의 틀
Collection
Router
Hash tag(#)를 사용할 때
URL을 routing 하기 위하여 사용
www.example.com/#search/lkwis/7
URL을 관리하는 객체
Router
ViewDOM Collection
DOM 이벤트 모델 이벤트
DOM 갱신 모델 갱신
HTTP요청
MV*

Contenu connexe

Tendances

드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서draghome
 
프론트엔드 개발자를 위한 Layer Model
프론트엔드 개발자를 위한 Layer Model프론트엔드 개발자를 위한 Layer Model
프론트엔드 개발자를 위한 Layer ModelHan Lee
 
오픈소스 WAS를 위한 클러스터 솔루션 - OPENMARU Cluster
오픈소스 WAS를 위한 클러스터 솔루션 - OPENMARU Cluster오픈소스 WAS를 위한 클러스터 솔루션 - OPENMARU Cluster
오픈소스 WAS를 위한 클러스터 솔루션 - OPENMARU ClusterOpennaru, inc.
 
HTML5 & CSS 살펴보기
HTML5 & CSS  살펴보기HTML5 & CSS  살펴보기
HTML5 & CSS 살펴보기Suan Lee
 
웹-워크플로우 베스트프랙티스
웹-워크플로우 베스트프랙티스웹-워크플로우 베스트프랙티스
웹-워크플로우 베스트프랙티스Tai Hoon KIM
 
Single Page Web
Single Page WebSingle Page Web
Single Page Web종복 박
 
05. 마이크로서비스 아키텍처 환경에서의 SSO 구축방안
05. 마이크로서비스 아키텍처 환경에서의 SSO 구축방안05. 마이크로서비스 아키텍처 환경에서의 SSO 구축방안
05. 마이크로서비스 아키텍처 환경에서의 SSO 구축방안Opennaru, inc.
 
[2014널리세미나] 웹 서비스분석 MEAN Stack과 PhantomJS만 알면 끝!
[2014널리세미나] 웹 서비스분석 MEAN Stack과  PhantomJS만 알면 끝![2014널리세미나] 웹 서비스분석 MEAN Stack과  PhantomJS만 알면 끝!
[2014널리세미나] 웹 서비스분석 MEAN Stack과 PhantomJS만 알면 끝!Nts Nuli
 
Implementing android mvi pattern
Implementing android mvi patternImplementing android mvi pattern
Implementing android mvi pattern금 허
 
OSGI(Open Service Gateway initiative)
OSGI(Open Service Gateway initiative)OSGI(Open Service Gateway initiative)
OSGI(Open Service Gateway initiative)ymtech
 
복잡한 RecyclerView, 군더더기 없이 데이터로 표현하기
복잡한 RecyclerView, 군더더기 없이 데이터로 표현하기복잡한 RecyclerView, 군더더기 없이 데이터로 표현하기
복잡한 RecyclerView, 군더더기 없이 데이터로 표현하기Lake Kim
 
Javascript 생태계
Javascript 생태계Javascript 생태계
Javascript 생태계Herren
 
Reactjs 적용 사례
Reactjs 적용 사례Reactjs 적용 사례
Reactjs 적용 사례Hongchae Lee
 

Tendances (20)

드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서
 
프론트엔드 개발자를 위한 Layer Model
프론트엔드 개발자를 위한 Layer Model프론트엔드 개발자를 위한 Layer Model
프론트엔드 개발자를 위한 Layer Model
 
오픈소스 WAS를 위한 클러스터 솔루션 - OPENMARU Cluster
오픈소스 WAS를 위한 클러스터 솔루션 - OPENMARU Cluster오픈소스 WAS를 위한 클러스터 솔루션 - OPENMARU Cluster
오픈소스 WAS를 위한 클러스터 솔루션 - OPENMARU Cluster
 
HTML5 & CSS 살펴보기
HTML5 & CSS  살펴보기HTML5 & CSS  살펴보기
HTML5 & CSS 살펴보기
 
React
ReactReact
React
 
웹-워크플로우 베스트프랙티스
웹-워크플로우 베스트프랙티스웹-워크플로우 베스트프랙티스
웹-워크플로우 베스트프랙티스
 
Single Page Web
Single Page WebSingle Page Web
Single Page Web
 
05. 마이크로서비스 아키텍처 환경에서의 SSO 구축방안
05. 마이크로서비스 아키텍처 환경에서의 SSO 구축방안05. 마이크로서비스 아키텍처 환경에서의 SSO 구축방안
05. 마이크로서비스 아키텍처 환경에서의 SSO 구축방안
 
Mean stack Start
Mean stack StartMean stack Start
Mean stack Start
 
Wisepush
WisepushWisepush
Wisepush
 
hexa core
hexa corehexa core
hexa core
 
[2014널리세미나] 웹 서비스분석 MEAN Stack과 PhantomJS만 알면 끝!
[2014널리세미나] 웹 서비스분석 MEAN Stack과  PhantomJS만 알면 끝![2014널리세미나] 웹 서비스분석 MEAN Stack과  PhantomJS만 알면 끝!
[2014널리세미나] 웹 서비스분석 MEAN Stack과 PhantomJS만 알면 끝!
 
Implementing android mvi pattern
Implementing android mvi patternImplementing android mvi pattern
Implementing android mvi pattern
 
Front end engineer
Front end engineerFront end engineer
Front end engineer
 
Gef 정리
Gef 정리Gef 정리
Gef 정리
 
OSGI(Open Service Gateway initiative)
OSGI(Open Service Gateway initiative)OSGI(Open Service Gateway initiative)
OSGI(Open Service Gateway initiative)
 
복잡한 RecyclerView, 군더더기 없이 데이터로 표현하기
복잡한 RecyclerView, 군더더기 없이 데이터로 표현하기복잡한 RecyclerView, 군더더기 없이 데이터로 표현하기
복잡한 RecyclerView, 군더더기 없이 데이터로 표현하기
 
Javascript 생태계
Javascript 생태계Javascript 생태계
Javascript 생태계
 
OSGi
OSGiOSGi
OSGi
 
Reactjs 적용 사례
Reactjs 적용 사례Reactjs 적용 사례
Reactjs 적용 사례
 

Similaire à Backbone 발표

Spring mvc
Spring mvcSpring mvc
Spring mvcksain
 
주니어 입장에서 바라보는 디자인패턴 & 아키텍쳐.pdf
주니어 입장에서 바라보는 디자인패턴 & 아키텍쳐.pdf주니어 입장에서 바라보는 디자인패턴 & 아키텍쳐.pdf
주니어 입장에서 바라보는 디자인패턴 & 아키텍쳐.pdf병근 손
 
Create App Easier With SVC Pattern - DroidKnights 2019 @Seoul
Create App Easier With SVC Pattern - DroidKnights 2019 @SeoulCreate App Easier With SVC Pattern - DroidKnights 2019 @Seoul
Create App Easier With SVC Pattern - DroidKnights 2019 @SeoulBansook Nam
 
HOONS닷넷 오픈소스 프로젝트 Part1.
HOONS닷넷 오픈소스 프로젝트 Part1.HOONS닷넷 오픈소스 프로젝트 Part1.
HOONS닷넷 오픈소스 프로젝트 Part1.Hojin Jun
 
[웹기반시스템 3조] mvc
[웹기반시스템 3조] mvc[웹기반시스템 3조] mvc
[웹기반시스템 3조] mvc구 봉
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Kim Hunmin
 
[Td 2015]각이 다른 mvc6! 그 여섯 번째 이야기!(최지훈)
[Td 2015]각이 다른 mvc6! 그 여섯 번째 이야기!(최지훈)[Td 2015]각이 다른 mvc6! 그 여섯 번째 이야기!(최지훈)
[Td 2015]각이 다른 mvc6! 그 여섯 번째 이야기!(최지훈)Sang Don Kim
 
[KAU UMC 컨퍼런스] Java 기반 Web의 역사 - 김준기
[KAU UMC 컨퍼런스] Java 기반 Web의 역사 - 김준기[KAU UMC 컨퍼런스] Java 기반 Web의 역사 - 김준기
[KAU UMC 컨퍼런스] Java 기반 Web의 역사 - 김준기JunGi Kim
 
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문종훈 박
 
iOS Architecture.pdf
iOS Architecture.pdfiOS Architecture.pdf
iOS Architecture.pdfssuser86e2971
 
오픈소스 프레임워크 기반 웹 서비스 설계 (Example)
오픈소스 프레임워크 기반 웹 서비스 설계 (Example)오픈소스 프레임워크 기반 웹 서비스 설계 (Example)
오픈소스 프레임워크 기반 웹 서비스 설계 (Example)중선 곽
 
자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기Jeado Ko
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyondJae Sung Park
 
04.실행환경 교육교재(화면처리)
04.실행환경 교육교재(화면처리)04.실행환경 교육교재(화면처리)
04.실행환경 교육교재(화면처리)Hankyo
 
Microservice Architecture
Microservice ArchitectureMicroservice Architecture
Microservice ArchitectureYoonsung Jung
 
[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridappNAVER D2
 
유엔진 오픈소스 클라우드 플랫폼 (uEngine Microservice architecture Platform)
유엔진 오픈소스 클라우드 플랫폼 (uEngine Microservice architecture Platform)유엔진 오픈소스 클라우드 플랫폼 (uEngine Microservice architecture Platform)
유엔진 오픈소스 클라우드 플랫폼 (uEngine Microservice architecture Platform)uEngine Solutions
 
JavaScript MEAN 스택
JavaScript MEAN 스택JavaScript MEAN 스택
JavaScript MEAN 스택Tai Hoon KIM
 

Similaire à Backbone 발표 (20)

Spring mvc
Spring mvcSpring mvc
Spring mvc
 
주니어 입장에서 바라보는 디자인패턴 & 아키텍쳐.pdf
주니어 입장에서 바라보는 디자인패턴 & 아키텍쳐.pdf주니어 입장에서 바라보는 디자인패턴 & 아키텍쳐.pdf
주니어 입장에서 바라보는 디자인패턴 & 아키텍쳐.pdf
 
Create App Easier With SVC Pattern - DroidKnights 2019 @Seoul
Create App Easier With SVC Pattern - DroidKnights 2019 @SeoulCreate App Easier With SVC Pattern - DroidKnights 2019 @Seoul
Create App Easier With SVC Pattern - DroidKnights 2019 @Seoul
 
HOONS닷넷 오픈소스 프로젝트 Part1.
HOONS닷넷 오픈소스 프로젝트 Part1.HOONS닷넷 오픈소스 프로젝트 Part1.
HOONS닷넷 오픈소스 프로젝트 Part1.
 
[웹기반시스템 3조] mvc
[웹기반시스템 3조] mvc[웹기반시스템 3조] mvc
[웹기반시스템 3조] mvc
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까?
 
[Td 2015]각이 다른 mvc6! 그 여섯 번째 이야기!(최지훈)
[Td 2015]각이 다른 mvc6! 그 여섯 번째 이야기!(최지훈)[Td 2015]각이 다른 mvc6! 그 여섯 번째 이야기!(최지훈)
[Td 2015]각이 다른 mvc6! 그 여섯 번째 이야기!(최지훈)
 
[KAU UMC 컨퍼런스] Java 기반 Web의 역사 - 김준기
[KAU UMC 컨퍼런스] Java 기반 Web의 역사 - 김준기[KAU UMC 컨퍼런스] Java 기반 Web의 역사 - 김준기
[KAU UMC 컨퍼런스] Java 기반 Web의 역사 - 김준기
 
1.react 101
1.react 1011.react 101
1.react 101
 
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
 
iOS Architecture.pdf
iOS Architecture.pdfiOS Architecture.pdf
iOS Architecture.pdf
 
오픈소스 프레임워크 기반 웹 서비스 설계 (Example)
오픈소스 프레임워크 기반 웹 서비스 설계 (Example)오픈소스 프레임워크 기반 웹 서비스 설계 (Example)
오픈소스 프레임워크 기반 웹 서비스 설계 (Example)
 
Presentation1
Presentation1Presentation1
Presentation1
 
자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond
 
04.실행환경 교육교재(화면처리)
04.실행환경 교육교재(화면처리)04.실행환경 교육교재(화면처리)
04.실행환경 교육교재(화면처리)
 
Microservice Architecture
Microservice ArchitectureMicroservice Architecture
Microservice Architecture
 
[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp
 
유엔진 오픈소스 클라우드 플랫폼 (uEngine Microservice architecture Platform)
유엔진 오픈소스 클라우드 플랫폼 (uEngine Microservice architecture Platform)유엔진 오픈소스 클라우드 플랫폼 (uEngine Microservice architecture Platform)
유엔진 오픈소스 클라우드 플랫폼 (uEngine Microservice architecture Platform)
 
JavaScript MEAN 스택
JavaScript MEAN 스택JavaScript MEAN 스택
JavaScript MEAN 스택
 

Backbone 발표