1. 자바스크립트로
오픈소스하기
135
Copyright 2013.10 projectBS committee All rights reserved

2. 발표자
맹기완, 비사이드소프트 대표
창업하고 10년이나 살아있음
오늘 할 이야기
자바스크립트로 오픈소스 하기
간단한 데모와 설명

3. 제이쿼리를 쓰다가....
1.4로 사이트를 구축시작
완성하고 납품을 안했는데 1.7이 등장
이제와 버전업이 가능한가?

4. 할 수 없다.
1.4에 의존적인 플러그인이 다수 존재
이미 1.4 API가 온 사이트에 적용된 상태
안할 수 있나?
보안문제, 버그픽스, 새 브라우저 대응,
성능 향상...

5. 그 외에도 제이쿼리를 쓰다가..
여러 개의 애니메이션을 걸면 너무 느림
CSS3 prefix를 안해줌
하위 브라우저 호환도 opacity만..

6. 그 외에도 제이쿼리를 쓰다가..
IE 하위버전에서 돌아는 가지만 너무 느림
다양한 안드로이드 브라우저에서 문제출몰
반대로 IE최신버전도 문제가 속출

7. 고객은 IE와 이상한 안드로이드에서
빨리 돌아가길 원하고..
먹고는 살아야하고..

8. 어쩔 수 없이 비슷한걸 만들어서
유지보수 직접하기로..
말이 되나?

9. 1. 짜피 핫한 이슈는 RSS나 메일링으로 유명한 라이브
러리소식을 수신하고 같이 패치
2. 수주한 일을 수행하면서 버그 픽스도 회사가 망하기
전까진 지속적으로 할 수 밖에 없음
3. 무엇보다 회사라 담당자를 배치할 수 있음
유지비용이 너무 큰게 아닌지..

10. 결국 가장 컸던 비용..
제이쿼리가 지원안해서 못해요.
일 자체가 없어지는 비용..

11. 근데 왜 오픈소스를 하려고?
2013년 2분기정도부터...
제이쿼리 클론 만드는 걸로 해결이 안됨
현재 보통의 사이트에 수십개의 플러그인과
UI프레임웍이 난무함
구멍가게가 감당할 수 없는 분량

12. 이왕 오픈소스 할거면 제대로 해보자.
무엇이 제대로인가?
..잘 모름.
해외사례, 국내사례 공부(지금도)

13. 오픈소스를 보면서 느낀점
코드를 사용하는 쪽을 향한 오픈소스의
많은 사례는 쉽게 이해했음
수많은 라이센스 공부 - MIT, GPL...

14. 오픈소스를 보면서 느낀점
코드에 참여하는 사람에게 권리를 주자!
커미터야말로 진짜 깊이 쓸 사용자!
커미터를 모을 방법이 필요함.

15. 커미터가 쉽게 될 수 있는 길을 열자.
오픈소스가 투자를 받거나 수익을 발생시키면 커
미터에게도 혜택이 돌아가게 해보면...

16. 1. 우선 회사와의 관계를 완전히 제거
2. 코드의 귀속권한을 커미터위원회에게
3. 커미터를 언디파인드에서 모집, 시작

17. 근데 목적이나 비전은?
가장 많이 본 목적들..
1. 자아추구, 여가활용
2. 커리어에 도움, 직장인의 다른 탈출구
3. 기업의 제품홍보 및 상품화단계
4. 반제품화를 통한 SI수주 증대

18. 그게 아닌 좋은 목표를 찾자!
전자정부 표준프레임웍에 도전하거나
각종 대회에 오픈 소스로 도전하거나
SI기업들이 직접 쓰는 레퍼런스를 만들어가거나
D2나 JCO에도 참가해보고 해외에도 진출하거나..
..이것저것 다 해보는 중

19. 혼자가 아닌 커미터들과 함께..

20. 정태원
개발경력 10년의 평범한 개발자
사용언어: java, C#, javascript
최근 열심히 javascript 공부중

21. 공부 많이 하지 않고
쉽고 빠르게
그리고 화려하게

22. CSS 키프레임 애니메이션 만들기
jQuery코드와 bsjs코드 비교

23. 키프레임 애니메이션 만들기

24. jQuery 코드

25. jQuery 코드

26. jQuery 코드

27. bsjs 코드

28. bsjs 코드
CSS 선언
애니매이션 실행

29. 코드비교
bsjs
36 줄
jQuery
102 줄

30. bsjs의 경우

31. bsjs 장점

32. 배우기 쉽다
-기존 css 문법을 사용
간편하다
-작성하는 코드의 양이 적다
-prefix를 bs core에서 처리
-구브라우저 호환성 지원
-생산성이 올라간다.

33. 사용법

34. bs.Css()
bs.Dom()
bs.ANI.tween()
bs.WIN.on()
bs.img()

35. bs.Dom
bs.Dom(’<div></div>’)
.S(‘<’, ‘body’);
bs.Dom('<div></div>')
.S('mousedown', function(e) { });

36. bs.Css
bs.Css(‘#id’).S(‘left’,100, ‘top’,100,
‘float’, ‘left’);

37. bs.WIN.on
bs.WIN.on( 'keydown',
function(e){
if( e.key( 'a' )) function(){};
if( e.key( ‘enter’ )) function(){};
});

38. bs.ANI.tween
bs.Dom(‘#id’).S('width', 0 );
bs.ANI.tween(bs.Dom(‘#id’), 'width',
100, 'time', .5);

39. bs.img
bs.img(function(){},
‘image01.jpg',
‘image02.jpg',
…
‘image25.jpg');

41. 페이스북으로 오셔서 함께해요.
https://www.facebook.com/groups/bs5js
Github 에서 소스도 확인하세요.
https://github.com/projectbs/bsjs

42. Q&A

43. THANK YOU