SlideShare une entreprise Scribd logo
1  sur  17
Télécharger pour lire hors ligne
2015 WePlanet Co., Ltd.
Webframeworks.kr & undefine:D
2015. 07.29
웹-프론트엔드 프레임워크,
어떻게 고를까요?
정진태, wePlanet
“본 세션은 webframeworks.kr의 홍보가 섞여 있으니, 이점 유의해주시기 바랍니다.”
2015 WePlanet Co., Ltd.
webframeworks.kr
다양한 웹기반 서비스
2015 WePlanet Co., Ltd.
webframeworks.kr
다양하게 사용되는 프레임워크
http://stackshare.io
2015 WePlanet Co., Ltd.
Webframeworks.kr
다양하게 일하고 있는 Front-End Developer(1)
(출처) 웹 Front-End 실무 이야기
http://www.slideshare.net/jinkwonlee52/frontend-46605098
2015 WePlanet Co., Ltd.
Webframeworks.kr
다양하게 일하고 있는 Front-End Developer(2)
(출처) 웹 Front-End 실무 이야기
http://www.slideshare.net/jinkwonlee52/frontend-46605098
CSS, HTML, JS
Logic
UI Component
UI(CSS)
Framework
Javascript
Framework
2015 WePlanet Co., Ltd.
프레임워크 적용의 현실/한계 : 새로운 프레임워크 적용에
대한 참고 자료 및 사례가 매우 제한적이기 때문에 많은
시행착오가 생겨남
“ 이번에 AngluarJS에서 관리자화면을 개발했는데 말이죠 … ”
2015 WePlanet Co., Ltd.
조언도 들어봤습니다.
사실 그래도 고민은 계속 됩니다.
닭잡는데 쓰는 소잡는 칼?
닭을 잡다보면 소도 잡지 않을까?
나는 무엇을 알고 있을까?
HTML? CSS? jQuery?
나는 열심히 할건데,
다른 팀원도 그럴까?
(참고) Web Front-End 개발과정 살펴보기 – 윤지수
http://www.slideshare.net/jisuyoun/web-frontend
내가 생각하고 있는 웹은
어떤 모습일까?
이 프레임워크가 지향하는 바는?
2015 WePlanet Co., Ltd.
(추천1) 해봅시다. 백문이불여일RUN
TodoMVC
http://www.todomvc.com
2015 WePlanet Co., Ltd.
TodoMVC
Demo
http://www.todomvc.com
2015 WePlanet Co., Ltd.
TodoMVC
Source: Structuring and Organizing
2015 WePlanet Co., Ltd.
살펴보았습니다.
사실 그래도 고민은 계속 됩니다.
조금 더 빨리 체험해볼순 없을까?
영어야!
영어라고!
우리회사 Back-End랑 잘어울리는게 맞을까?
2015 WePlanet Co., Ltd.
(추천2) WebFrameworks.kr
웹프레임워크 정보 습득
http://www.webframeworks.kr
2015 WePlanet Co., Ltd.
WebFrameworks.kr
웹프레임워크의 범위
Express
AngularJS
BackBoneJS
ReactJS
ExtJS
Meteor
Bootstrap Foundation UI Bootstrap
jQuery
Underscore
JS
D3
Modernizr
JS
yo
bower
Grunt
/ Gulp
Jasmine
2015 WePlanet Co., Ltd.
WebFrameworks.kr
웹프레임워크의 선택
AngularJS
BackBoneJS
ReactJS
ExtJS
• Model-View-Whatever framework
• Two-way data binding (Model-View)
• Directives (Extended HTML)
• Dependency injection
• Google Sponsor
• 속도가 빠르진 않다(?)
• Angular2를 사용하기 위해선 새로 개발
• 경량프레임워크
• 다양한 응용가능
• 미니멀한 MVC =>
미니멀리즘(Minimalism)
• 여러 라이브러리와 플러그인이 함께
사용되야하는 경우가 많아서 때문에
숙련자들에게 추천=>학습커브가 높음
• 데스크탑 스타일의 웹기반 어플리케이션
• 거업업무환경에 최적화된 UI컴포넌트와
반응형 레이아웃을 제공하므로 별도의 UI
Framework없이 사용
• 빠른개발을 할 수 있는 툴을 제공
• 일부 유료
• MVC중 View에 집중
• Flux Architecture를 사용하기 때문에
대형 어플리케이션에도 잘 어울림
• 빠른 속도
• 학습커브가 낮음.
• Facebook Sponsor
“There is no magic solution
for all problem.”
2015 WePlanet Co., Ltd.
WebFrameworks.kr
머뭇거려지는 건 똑같고…
2015 WePlanet Co., Ltd.
WebFrameworks.kr
함께 고민하며 만들어갑니다.
Get Started
Tutorials
Quick StartSeminar
Code-Lab
Conference
UI
프레임워크
프론트엔드
프레임워크
백엔드
프레임워크
풀스택
프레임워크
라이브러리
& 툴
8월 중순 예정,
8시간 집중코딩!
2015 WePlanet Co., Ltd.
감사합니다.

Contenu connexe

Tendances

Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Sang Seok Lim
 
원모먼트 Vue js 적용기
원모먼트 Vue js 적용기원모먼트 Vue js 적용기
원모먼트 Vue js 적용기우현 김
 
구글 인박스 히드라 프로그래밍
구글 인박스 히드라 프로그래밍구글 인박스 히드라 프로그래밍
구글 인박스 히드라 프로그래밍Lee Ji Eun
 
가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJSJae Sung Park
 
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, VueGunhee Lee
 
Angular는 사실 어렵지 않습니다.
Angular는 사실 어렵지 않습니다.Angular는 사실 어렵지 않습니다.
Angular는 사실 어렵지 않습니다.장현 한
 
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문종훈 박
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyondJae Sung Park
 
Universal Rendering
Universal RenderingUniversal Rendering
Universal RenderingTaegon Kim
 
Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드NAVER D2
 
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민NAVER D2
 
오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5Taegon Kim
 
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강 [토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강 우영 주
 
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신Sungwoo Choo
 
개발자를 위한 웹표준 & 웹접근성이야기
개발자를 위한 웹표준 & 웹접근성이야기개발자를 위한 웹표준 & 웹접근성이야기
개발자를 위한 웹표준 & 웹접근성이야기NAVER D2
 
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012Daum DNA
 
AngularJS In Production
AngularJS In ProductionAngularJS In Production
AngularJS In ProductionMooYeol Lee
 
Spring vs. spring boot
Spring vs. spring bootSpring vs. spring boot
Spring vs. spring bootChloeChoi23
 
JavaScript 2014 프론트엔드 기술 리뷰
JavaScript 2014 프론트엔드 기술 리뷰JavaScript 2014 프론트엔드 기술 리뷰
JavaScript 2014 프론트엔드 기술 리뷰Kenu, GwangNam Heo
 

Tendances (20)

Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
 
원모먼트 Vue js 적용기
원모먼트 Vue js 적용기원모먼트 Vue js 적용기
원모먼트 Vue js 적용기
 
구글 인박스 히드라 프로그래밍
구글 인박스 히드라 프로그래밍구글 인박스 히드라 프로그래밍
구글 인박스 히드라 프로그래밍
 
가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS
 
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue
 
Angular는 사실 어렵지 않습니다.
Angular는 사실 어렵지 않습니다.Angular는 사실 어렵지 않습니다.
Angular는 사실 어렵지 않습니다.
 
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond
 
iOS9 소개
iOS9 소개iOS9 소개
iOS9 소개
 
Universal Rendering
Universal RenderingUniversal Rendering
Universal Rendering
 
Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드
 
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
 
오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5
 
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강 [토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
 
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
 
개발자를 위한 웹표준 & 웹접근성이야기
개발자를 위한 웹표준 & 웹접근성이야기개발자를 위한 웹표준 & 웹접근성이야기
개발자를 위한 웹표준 & 웹접근성이야기
 
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
 
AngularJS In Production
AngularJS In ProductionAngularJS In Production
AngularJS In Production
 
Spring vs. spring boot
Spring vs. spring bootSpring vs. spring boot
Spring vs. spring boot
 
JavaScript 2014 프론트엔드 기술 리뷰
JavaScript 2014 프론트엔드 기술 리뷰JavaScript 2014 프론트엔드 기술 리뷰
JavaScript 2014 프론트엔드 기술 리뷰
 

Similaire à 웹-프론트엔드 프레임워크를 고르기 위한 팁

드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서draghome
 
프론트엔드 개발 첫걸음
프론트엔드 개발 첫걸음프론트엔드 개발 첫걸음
프론트엔드 개발 첫걸음DataUs
 
자바_웹_개발자를_위한_c#_핵심_기능
자바_웹_개발자를_위한_c#_핵심_기능자바_웹_개발자를_위한_c#_핵심_기능
자바_웹_개발자를_위한_c#_핵심_기능Dexter Jung
 
웹개발자 김영환 기술경력서 & 자기소개서
웹개발자 김영환 기술경력서 & 자기소개서웹개발자 김영환 기술경력서 & 자기소개서
웹개발자 김영환 기술경력서 & 자기소개서영환 김
 
Spring boot와 docker를 이용한 msa
Spring boot와 docker를 이용한 msaSpring boot와 docker를 이용한 msa
Spring boot와 docker를 이용한 msa흥래 김
 
드래그홈2013표준제안서
드래그홈2013표준제안서드래그홈2013표준제안서
드래그홈2013표준제안서draghome
 
SoftLayer에서 VM 생성해보기!
SoftLayer에서 VM 생성해보기!SoftLayer에서 VM 생성해보기!
SoftLayer에서 VM 생성해보기!IBM Korea
 
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드NAVER Engineering
 
드래그홈 표준제안서 2014
드래그홈 표준제안서 2014드래그홈 표준제안서 2014
드래그홈 표준제안서 2014draghome
 
코드잇-리액트-특강.pdf
코드잇-리액트-특강.pdf코드잇-리액트-특강.pdf
코드잇-리액트-특강.pdf이정환
 
피플펀드 웹서비스 성능개선기(+초기 스타트업의 개발방법론) 20171220
피플펀드 웹서비스 성능개선기(+초기 스타트업의 개발방법론) 20171220피플펀드 웹서비스 성능개선기(+초기 스타트업의 개발방법론) 20171220
피플펀드 웹서비스 성능개선기(+초기 스타트업의 개발방법론) 20171220Seomgi Han
 
2021년 3월 27일 개발자 이야기
2021년 3월 27일 개발자 이야기2021년 3월 27일 개발자 이야기
2021년 3월 27일 개발자 이야기Jay Park
 
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리Sa-ryong Kang
 
Spring Framework 튜토리얼 - 네이버 최영목님
Spring Framework 튜토리얼 - 네이버 최영목님Spring Framework 튜토리얼 - 네이버 최영목님
Spring Framework 튜토리얼 - 네이버 최영목님NAVER D2
 
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
 
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...Sang Seok Lim
 
장고로 웹서비스 만들기 기초
장고로 웹서비스 만들기   기초장고로 웹서비스 만들기   기초
장고로 웹서비스 만들기 기초Kwangyoun Jung
 
[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridappNAVER D2
 

Similaire à 웹-프론트엔드 프레임워크를 고르기 위한 팁 (20)

드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서
 
프론트엔드 개발 첫걸음
프론트엔드 개발 첫걸음프론트엔드 개발 첫걸음
프론트엔드 개발 첫걸음
 
자바_웹_개발자를_위한_c#_핵심_기능
자바_웹_개발자를_위한_c#_핵심_기능자바_웹_개발자를_위한_c#_핵심_기능
자바_웹_개발자를_위한_c#_핵심_기능
 
웹개발자 김영환 기술경력서 & 자기소개서
웹개발자 김영환 기술경력서 & 자기소개서웹개발자 김영환 기술경력서 & 자기소개서
웹개발자 김영환 기술경력서 & 자기소개서
 
Spring boot와 docker를 이용한 msa
Spring boot와 docker를 이용한 msaSpring boot와 docker를 이용한 msa
Spring boot와 docker를 이용한 msa
 
드래그홈2013표준제안서
드래그홈2013표준제안서드래그홈2013표준제안서
드래그홈2013표준제안서
 
SoftLayer에서 VM 생성해보기!
SoftLayer에서 VM 생성해보기!SoftLayer에서 VM 생성해보기!
SoftLayer에서 VM 생성해보기!
 
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
 
드래그홈 표준제안서 2014
드래그홈 표준제안서 2014드래그홈 표준제안서 2014
드래그홈 표준제안서 2014
 
코드잇-리액트-특강.pdf
코드잇-리액트-특강.pdf코드잇-리액트-특강.pdf
코드잇-리액트-특강.pdf
 
Place site Design
Place site DesignPlace site Design
Place site Design
 
피플펀드 웹서비스 성능개선기(+초기 스타트업의 개발방법론) 20171220
피플펀드 웹서비스 성능개선기(+초기 스타트업의 개발방법론) 20171220피플펀드 웹서비스 성능개선기(+초기 스타트업의 개발방법론) 20171220
피플펀드 웹서비스 성능개선기(+초기 스타트업의 개발방법론) 20171220
 
2021년 3월 27일 개발자 이야기
2021년 3월 27일 개발자 이야기2021년 3월 27일 개발자 이야기
2021년 3월 27일 개발자 이야기
 
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
 
Spring Framework 튜토리얼 - 네이버 최영목님
Spring Framework 튜토리얼 - 네이버 최영목님Spring Framework 튜토리얼 - 네이버 최영목님
Spring Framework 튜토리얼 - 네이버 최영목님
 
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
 
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
 
장고로 웹서비스 만들기 기초
장고로 웹서비스 만들기   기초장고로 웹서비스 만들기   기초
장고로 웹서비스 만들기 기초
 
One ASP.NET
One ASP.NETOne ASP.NET
One ASP.NET
 
[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp
 

Plus de WebFrameworks

웹프레임워크를 이용하여 개발된 오픈소스 CMS프로젝트 샤인
웹프레임워크를 이용하여 개발된 오픈소스 CMS프로젝트 샤인웹프레임워크를 이용하여 개발된 오픈소스 CMS프로젝트 샤인
웹프레임워크를 이용하여 개발된 오픈소스 CMS프로젝트 샤인WebFrameworks
 
Nodejs를 이용한 개발
Nodejs를 이용한 개발Nodejs를 이용한 개발
Nodejs를 이용한 개발WebFrameworks
 
Meteor를 통해서 개발하는 웹어플리케이션 서비스
Meteor를 통해서 개발하는 웹어플리케이션 서비스Meteor를 통해서 개발하는 웹어플리케이션 서비스
Meteor를 통해서 개발하는 웹어플리케이션 서비스WebFrameworks
 
React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기WebFrameworks
 
Bootstrap과 UI-Bootstrap
Bootstrap과 UI-BootstrapBootstrap과 UI-Bootstrap
Bootstrap과 UI-BootstrapWebFrameworks
 
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점 Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점 WebFrameworks
 
Webframeworks angular js 세미나
Webframeworks angular js 세미나Webframeworks angular js 세미나
Webframeworks angular js 세미나WebFrameworks
 

Plus de WebFrameworks (9)

웹프레임워크를 이용하여 개발된 오픈소스 CMS프로젝트 샤인
웹프레임워크를 이용하여 개발된 오픈소스 CMS프로젝트 샤인웹프레임워크를 이용하여 개발된 오픈소스 CMS프로젝트 샤인
웹프레임워크를 이용하여 개발된 오픈소스 CMS프로젝트 샤인
 
Nodejs를 이용한 개발
Nodejs를 이용한 개발Nodejs를 이용한 개발
Nodejs를 이용한 개발
 
Meteor를 통해서 개발하는 웹어플리케이션 서비스
Meteor를 통해서 개발하는 웹어플리케이션 서비스Meteor를 통해서 개발하는 웹어플리케이션 서비스
Meteor를 통해서 개발하는 웹어플리케이션 서비스
 
React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기
 
Bootstrap과 UI-Bootstrap
Bootstrap과 UI-BootstrapBootstrap과 UI-Bootstrap
Bootstrap과 UI-Bootstrap
 
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점 Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
 
Meteor2015 codelab
Meteor2015 codelab Meteor2015 codelab
Meteor2015 codelab
 
Webframeworks angular js 세미나
Webframeworks angular js 세미나Webframeworks angular js 세미나
Webframeworks angular js 세미나
 
One-day-codelab
One-day-codelabOne-day-codelab
One-day-codelab
 

웹-프론트엔드 프레임워크를 고르기 위한 팁

  • 1. 2015 WePlanet Co., Ltd. Webframeworks.kr & undefine:D 2015. 07.29 웹-프론트엔드 프레임워크, 어떻게 고를까요? 정진태, wePlanet “본 세션은 webframeworks.kr의 홍보가 섞여 있으니, 이점 유의해주시기 바랍니다.”
  • 2. 2015 WePlanet Co., Ltd. webframeworks.kr 다양한 웹기반 서비스
  • 3. 2015 WePlanet Co., Ltd. webframeworks.kr 다양하게 사용되는 프레임워크 http://stackshare.io
  • 4. 2015 WePlanet Co., Ltd. Webframeworks.kr 다양하게 일하고 있는 Front-End Developer(1) (출처) 웹 Front-End 실무 이야기 http://www.slideshare.net/jinkwonlee52/frontend-46605098
  • 5. 2015 WePlanet Co., Ltd. Webframeworks.kr 다양하게 일하고 있는 Front-End Developer(2) (출처) 웹 Front-End 실무 이야기 http://www.slideshare.net/jinkwonlee52/frontend-46605098 CSS, HTML, JS Logic UI Component UI(CSS) Framework Javascript Framework
  • 6. 2015 WePlanet Co., Ltd. 프레임워크 적용의 현실/한계 : 새로운 프레임워크 적용에 대한 참고 자료 및 사례가 매우 제한적이기 때문에 많은 시행착오가 생겨남 “ 이번에 AngluarJS에서 관리자화면을 개발했는데 말이죠 … ”
  • 7. 2015 WePlanet Co., Ltd. 조언도 들어봤습니다. 사실 그래도 고민은 계속 됩니다. 닭잡는데 쓰는 소잡는 칼? 닭을 잡다보면 소도 잡지 않을까? 나는 무엇을 알고 있을까? HTML? CSS? jQuery? 나는 열심히 할건데, 다른 팀원도 그럴까? (참고) Web Front-End 개발과정 살펴보기 – 윤지수 http://www.slideshare.net/jisuyoun/web-frontend 내가 생각하고 있는 웹은 어떤 모습일까? 이 프레임워크가 지향하는 바는?
  • 8. 2015 WePlanet Co., Ltd. (추천1) 해봅시다. 백문이불여일RUN TodoMVC http://www.todomvc.com
  • 9. 2015 WePlanet Co., Ltd. TodoMVC Demo http://www.todomvc.com
  • 10. 2015 WePlanet Co., Ltd. TodoMVC Source: Structuring and Organizing
  • 11. 2015 WePlanet Co., Ltd. 살펴보았습니다. 사실 그래도 고민은 계속 됩니다. 조금 더 빨리 체험해볼순 없을까? 영어야! 영어라고! 우리회사 Back-End랑 잘어울리는게 맞을까?
  • 12. 2015 WePlanet Co., Ltd. (추천2) WebFrameworks.kr 웹프레임워크 정보 습득 http://www.webframeworks.kr
  • 13. 2015 WePlanet Co., Ltd. WebFrameworks.kr 웹프레임워크의 범위 Express AngularJS BackBoneJS ReactJS ExtJS Meteor Bootstrap Foundation UI Bootstrap jQuery Underscore JS D3 Modernizr JS yo bower Grunt / Gulp Jasmine
  • 14. 2015 WePlanet Co., Ltd. WebFrameworks.kr 웹프레임워크의 선택 AngularJS BackBoneJS ReactJS ExtJS • Model-View-Whatever framework • Two-way data binding (Model-View) • Directives (Extended HTML) • Dependency injection • Google Sponsor • 속도가 빠르진 않다(?) • Angular2를 사용하기 위해선 새로 개발 • 경량프레임워크 • 다양한 응용가능 • 미니멀한 MVC => 미니멀리즘(Minimalism) • 여러 라이브러리와 플러그인이 함께 사용되야하는 경우가 많아서 때문에 숙련자들에게 추천=>학습커브가 높음 • 데스크탑 스타일의 웹기반 어플리케이션 • 거업업무환경에 최적화된 UI컴포넌트와 반응형 레이아웃을 제공하므로 별도의 UI Framework없이 사용 • 빠른개발을 할 수 있는 툴을 제공 • 일부 유료 • MVC중 View에 집중 • Flux Architecture를 사용하기 때문에 대형 어플리케이션에도 잘 어울림 • 빠른 속도 • 학습커브가 낮음. • Facebook Sponsor “There is no magic solution for all problem.”
  • 15. 2015 WePlanet Co., Ltd. WebFrameworks.kr 머뭇거려지는 건 똑같고…
  • 16. 2015 WePlanet Co., Ltd. WebFrameworks.kr 함께 고민하며 만들어갑니다. Get Started Tutorials Quick StartSeminar Code-Lab Conference UI 프레임워크 프론트엔드 프레임워크 백엔드 프레임워크 풀스택 프레임워크 라이브러리 & 툴 8월 중순 예정, 8시간 집중코딩!
  • 17. 2015 WePlanet Co., Ltd. 감사합니다.