웹프레임워크를 선택하기 위한 접근방법에 대해 공유합니다.

1. 2015 WePlanet Co., Ltd.
GDG Seoul & Webframeworks.kr
2015. 09. 30
웹 프레임워크 고민
삽질하기
정진태, 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) 살펴봅시다.
StackShare.io

9. 2015 WePlanet Co., Ltd.
(추천2) 해봅시다. 백문이불여일RUN
TodoMVC
http://www.todomvc.com

10. 2015 WePlanet Co., Ltd.
TodoMVC
Demo
http://www.todomvc.com

11. 2015 WePlanet Co., Ltd.
TodoMVC
Source: Structuring and Organizing

12. 2015 WePlanet Co., Ltd.
Webframeworks.kr
프레임워크의 선택
(출처) 실무에 바로 적용하는 Node.js
1) 샘플 애플리케이션으로 어플리케이션 스타일과 패턴을 확인
2) 애플리케이션의 타입을 고려
- 프로토타입, 제품 애플리케이션, 최소 요건 제품, 프로젝트 사이즈 등
3) 익숙한 라이브러리와 프레임워크의 궁합 여부
4) 애플리케이션의 특성 고려
- 분리된 프론트엔드 클라이언트를 가진 REST API인지, 기존의 웹
애플리케이션인지 등
5) 특정 기능의 지원 여부
- 처음부터 웹소켓이 있는 Reactive 템플릿(ex: Meteor)의 지원이 필요한지 등
6) 인기도 확인
- GitHub이나 NPM 등에서 download 수, Star, Watch, Fork 등의 정보를
확인
7) 예제가 있는 훌룡한 API 문서, 또는 예제와 오픈 이슈나 버그들이 있는지
여부로 GitHub페이지, 그리고 프레임워크의 웹 사이트, NPM 등을 평가한다.
만약 오픈 이슈나 버그가 몇 백개 이상이라면, 좋은 사인이 아니다, 또한,
GitHub 저장소에 마지막으로 커밋한 날짜를 확인한다. 마지막으로 커밋한
날짜에서 6개월 이상 지났다면 좋은 사인이 아니다.

13. 2015 WePlanet Co., Ltd.
살펴보았습니다.
사실 그래도 고민은 계속 됩니다.
영어야! 영어라고!

14. 2015 WePlanet Co., Ltd.
(추천3) WebFrameworks.kr
웹프레임워크 정보 습득
http://www.webframeworks.kr

15. 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

16. 2015 WePlanet Co., Ltd.
WebFrameworks.kr
머뭇거려지는 건 똑같고…

17. 2015 WePlanet Co., Ltd.
WebFrameworks.kr
함께 고민하며 만들어갑니다.
Get Started
Tutorials
Quick StartSeminar
Code-Lab
Conference
UI
프레임워크
프론트엔드
프레임워크
백엔드
프레임워크
풀스택
프레임워크
라이브러리
& 툴

18. 2015 WePlanet Co., Ltd.
감사합니다.