[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기Jae Sung Park
차트란 무엇일까요? 차트는 우리가 일상에서 아주 쉽게 자주 접하지만, 막상 개발자로써의 경험을 하는 동안 차트 개발(적용)은 쉽게 경험해 보기 어려운 영역이기도 합니다.
본 발표는 '차트'라는 영역에 대한 개발 경험기와 함께 오픈소스로 공개 후, 단 기간 내에 많은 주목을 받기 까지의 과정을 통해 어떻게 의미있는 성과를 글로벌 하게 얻을 수 있었는가에 대한 오픈소스 성장에 대한 경험도 같이 공유합니다.
이를 통해 다양한 오픈소스 개발 시도와 참여가 활발히 이루어 지는데 도움을 줄수 있게 되기를 기대 합니다.
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기Jae Sung Park
차트란 무엇일까요? 차트는 우리가 일상에서 아주 쉽게 자주 접하지만, 막상 개발자로써의 경험을 하는 동안 차트 개발(적용)은 쉽게 경험해 보기 어려운 영역이기도 합니다.
본 발표는 '차트'라는 영역에 대한 개발 경험기와 함께 오픈소스로 공개 후, 단 기간 내에 많은 주목을 받기 까지의 과정을 통해 어떻게 의미있는 성과를 글로벌 하게 얻을 수 있었는가에 대한 오픈소스 성장에 대한 경험도 같이 공유합니다.
이를 통해 다양한 오픈소스 개발 시도와 참여가 활발히 이루어 지는데 도움을 줄수 있게 되기를 기대 합니다.
모바일 게임과 앱을 위한 오픈소스 게임서버 엔진 프로젝트 CloudBread 프로젝트Dae Kim
CloudBread
클라우드 기반 무료 오픈소스 프로젝트로, 모바일 게임과 모바일 앱에 최적화된 게임 서버 엔진입니다. 모든 서비스는 마이크로소프트의 클라우드 서비스인 Azure에 최적화되어 동작하며, 안정성과 확장성을 목표로 개발 중입니다.
기능
•PaaS / DaaS 서버 엔진•PaaS, DaaS 로 손쉬운 개발 및 서비스 즉시 배포
•Real Auto Scale - PaaS
•개발/테스트/배포 = 통합 환경
•서비스 규모에 따른 앱 변경 없음
글로벌 론칭 아키텍처
•글로벌 론칭+데이터 동기화
•설계 부터 클라우드에 최적화된 아키텍처 및 프레임워크로 개발
•오픈소스 프레임워크 활용 개발
보안, 관리, 기술교육
•저장/통신에 표준 암호화 기술 적용
•기본 관리자 서비스 및 커스터마이징
•분석/관리 배치 작업 추가 제작 가능
개발자 그룹
•페이스북 사용자 그룹 : https://www.facebook.com/groups/cloudBreadProject/
지원되는 모바일 & 클라이언트환경
•iOS, Android, Windows Phone, Windows 스토어앱, Xamarin, PhoneGap, Sencha 등
•Microsoft Azure Mobile Service가 지원하는 모바일 및 다양한 클라이언트 플랫폼 지원 : http://azure.microsoft.com/ko-kr/documentation/services/mobile-services/
설치
•Wiki의 튜토리얼 설치 참조
프로젝트 설명
•모바일게임과 모바일 앱에서 사용되는 사용자의 패턴과 액션을 기록해 기능들을 제공
•클라이언트 모바일 디바이스는 게임서버로 JSON 방식의 데이터를 요청하고 서버가 해당 데이터를 처리 후 응답
•약 100여개의 비즈니스 로직이 기본제공(Wiki 참조)
•클라이언트는 마이크로소프트가 오픈소스로 직접 만들어 제공하는 라이브러리를 통해 서버로 API를 호출
실행 예제와 API 리스트는 Wiki 참조
Contribute/질문/토론
•페이스북 사용자 그룹 : https://www.facebook.com/groups/cloudBreadProject/
『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기복연 이
MEAN 스택, 서버와 클라이언트를 넘나드는 풀스택 엔지니어의 선택
MEAN은 서버와 클라이언트 양쪽을 모두 다루는 풀스택 엔지니어를 위한 기술이며, 한번 익혀두면 여러 상황에서 돌파구를 발견할 가능성을 높여준다. 그만큼 개발자의 경쟁력을 높일 수 있음을 의미한다. 스택의 모든 구성 요소가 자바스크립트를 사용하므로 진입 장벽이 낮고 팀 내 협업, 노하우 공유, 의사소통에 큰 도움을 준다.
이 책은 오랜 개발과 번역 경험을 두루 갖춘 베테랑 역자가 원서의 예제를 완결된 형태로 재구성해서 독자의 시간을 절약해주고 아쉬운 설명을 보강해 완성도를 높였다. 책의 흐름에 발맞춰 예제를 조금씩 확장해 나가다 보면 어느 순간 자신만의 멋진 풀스택 앱을 만들 수 있을 것이다.
- 지은이 : 애덤 브레츠, 콜린 J. 이릭
- 옮긴이 : 박재호
- ISBN : 978-89-6848-218-2 93000
- 발행일 : 2015년 9월 1일
- 페이지수 : 348
- 정가 : 28,000원
- 구매(예스24) : http://goo.gl/KNlRGg
어느 해커쏜에 참여한 백엔드 개발자들을 위한 교육자료
쉽게 만든다고 했는데도, 많이 어려웠나봅니다.
제 욕심이 과했던 것 같아요. 담번엔 좀 더 쉽게 !
- 독자 : 백엔드 개발자를 희망하는 사람 (취준생, 이직 희망자), 5년차 이하
- 주요 내용 : 백엔드 개발을 할 때 일어나는 일들(개발팀의 일)
- 비상업적 목적으로 인용은 가능합니다. (출처 명기 필수)
[야생의 땅: 듀랑고] 서버 아키텍처 - SPOF 없는 분산 MMORPG 서버Heungsub Lee
NDC14에서 발표한 "[야생의 땅: 듀랑고] 서버 아키텍처" 세션의 슬라이드입니다.
슬라이드에 설명이 많지 않은데, 디스이즈게임에서 발표 내용을 잘 정리해주었습니다. 기사도 함께 보시면 좋을 것 같습니다.
http://www.thisisgame.com/webzine/news/nboard/4/?n=54955
모바일 게임과 앱을 위한 오픈소스 게임서버 엔진 프로젝트 CloudBread 프로젝트Dae Kim
CloudBread
클라우드 기반 무료 오픈소스 프로젝트로, 모바일 게임과 모바일 앱에 최적화된 게임 서버 엔진입니다. 모든 서비스는 마이크로소프트의 클라우드 서비스인 Azure에 최적화되어 동작하며, 안정성과 확장성을 목표로 개발 중입니다.
기능
•PaaS / DaaS 서버 엔진•PaaS, DaaS 로 손쉬운 개발 및 서비스 즉시 배포
•Real Auto Scale - PaaS
•개발/테스트/배포 = 통합 환경
•서비스 규모에 따른 앱 변경 없음
글로벌 론칭 아키텍처
•글로벌 론칭+데이터 동기화
•설계 부터 클라우드에 최적화된 아키텍처 및 프레임워크로 개발
•오픈소스 프레임워크 활용 개발
보안, 관리, 기술교육
•저장/통신에 표준 암호화 기술 적용
•기본 관리자 서비스 및 커스터마이징
•분석/관리 배치 작업 추가 제작 가능
개발자 그룹
•페이스북 사용자 그룹 : https://www.facebook.com/groups/cloudBreadProject/
지원되는 모바일 & 클라이언트환경
•iOS, Android, Windows Phone, Windows 스토어앱, Xamarin, PhoneGap, Sencha 등
•Microsoft Azure Mobile Service가 지원하는 모바일 및 다양한 클라이언트 플랫폼 지원 : http://azure.microsoft.com/ko-kr/documentation/services/mobile-services/
설치
•Wiki의 튜토리얼 설치 참조
프로젝트 설명
•모바일게임과 모바일 앱에서 사용되는 사용자의 패턴과 액션을 기록해 기능들을 제공
•클라이언트 모바일 디바이스는 게임서버로 JSON 방식의 데이터를 요청하고 서버가 해당 데이터를 처리 후 응답
•약 100여개의 비즈니스 로직이 기본제공(Wiki 참조)
•클라이언트는 마이크로소프트가 오픈소스로 직접 만들어 제공하는 라이브러리를 통해 서버로 API를 호출
실행 예제와 API 리스트는 Wiki 참조
Contribute/질문/토론
•페이스북 사용자 그룹 : https://www.facebook.com/groups/cloudBreadProject/
『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기복연 이
MEAN 스택, 서버와 클라이언트를 넘나드는 풀스택 엔지니어의 선택
MEAN은 서버와 클라이언트 양쪽을 모두 다루는 풀스택 엔지니어를 위한 기술이며, 한번 익혀두면 여러 상황에서 돌파구를 발견할 가능성을 높여준다. 그만큼 개발자의 경쟁력을 높일 수 있음을 의미한다. 스택의 모든 구성 요소가 자바스크립트를 사용하므로 진입 장벽이 낮고 팀 내 협업, 노하우 공유, 의사소통에 큰 도움을 준다.
이 책은 오랜 개발과 번역 경험을 두루 갖춘 베테랑 역자가 원서의 예제를 완결된 형태로 재구성해서 독자의 시간을 절약해주고 아쉬운 설명을 보강해 완성도를 높였다. 책의 흐름에 발맞춰 예제를 조금씩 확장해 나가다 보면 어느 순간 자신만의 멋진 풀스택 앱을 만들 수 있을 것이다.
- 지은이 : 애덤 브레츠, 콜린 J. 이릭
- 옮긴이 : 박재호
- ISBN : 978-89-6848-218-2 93000
- 발행일 : 2015년 9월 1일
- 페이지수 : 348
- 정가 : 28,000원
- 구매(예스24) : http://goo.gl/KNlRGg
어느 해커쏜에 참여한 백엔드 개발자들을 위한 교육자료
쉽게 만든다고 했는데도, 많이 어려웠나봅니다.
제 욕심이 과했던 것 같아요. 담번엔 좀 더 쉽게 !
- 독자 : 백엔드 개발자를 희망하는 사람 (취준생, 이직 희망자), 5년차 이하
- 주요 내용 : 백엔드 개발을 할 때 일어나는 일들(개발팀의 일)
- 비상업적 목적으로 인용은 가능합니다. (출처 명기 필수)
[야생의 땅: 듀랑고] 서버 아키텍처 - SPOF 없는 분산 MMORPG 서버Heungsub Lee
NDC14에서 발표한 "[야생의 땅: 듀랑고] 서버 아키텍처" 세션의 슬라이드입니다.
슬라이드에 설명이 많지 않은데, 디스이즈게임에서 발표 내용을 잘 정리해주었습니다. 기사도 함께 보시면 좋을 것 같습니다.
http://www.thisisgame.com/webzine/news/nboard/4/?n=54955
LG전자 SEED2016 발표
개미수열 문제를 풀어보면서 다양한 프로그래밍 개념들을 적용시켜봅니다. (Java/JavaScript/Go/C/Scala/Haskell 코드가 조금씩 등장)
- regex
- list processing
- iterator/generator
- coroutine/continuation
- lazy list
Ionic adventures - Hybrid Mobile App Development rocksJuarez Filho
Ionic frameworks is the new kid on the block related to Hybrid Mobile Apps created by Drifty and rapidly growth with a variety of tools like ionic lab, ionic creator, ionic view, ionic crosswalk integration and other exciting tools is coming this year like ionic PUSH.
Check this presentation to have a short getting start in this amazing framework.
Let's create amazing apps with Ionic. \o/
[SOSCON 2018] 오픈소스 개발: Behind the scenesJae Sung Park
오픈 소스 개발에 참여한다는 것은 여러분들에게 어떤 의미가 있나요? 포트폴리오 작성을 위해? 불편함을 개선하기 위해? 무언가 멋져 보이기 때문에?
외적으로 보이는 오픈 소스 개발/운영은 여러분들이 생각하는 '모습'과 아주 다를 수 있습니다. 성공적인 오픈 소스가 되기 위해서는 무엇이 필요할까요?
오픈소스 개발자로 성공(또는 살아남기) 할 수 있을까요?
billboard.js 프로젝트를 운영하면서 경험한 내용을 바탕으로, 여러분들이 알지 못하는 오픈소스 운영 과정에서의 경험을 전달하고자 합니다.
Polymer의 기술기반인 Web Componets를 구성하는 표준 스펙들인 Custom Elements, HTML Imports, HTML Templates 그리고 Shadow DOM을 간략히 살펴본다.
Polymer의 아키텍처 및 기본적인 사용방법 그리고 material design이 적용된 paper elements 등을 살펴본다.
14. 주요 구성요소
컴포넌트
eg 유틸리티 모음
MovableCoord 사용자의 동작을 가상 좌표계의 논리적 좌표로 변경
Flicking 플리킹 UI를 구현
in�niteGrid 콘텐츠가 있는 카드 엘리먼트를 그리드 레이아웃에 무한으로 배치
Visible 엘리먼트가 기준 엘리먼트나 뷰포트 안에 보이는지 확인
jQuery
확장 플러그인
persist 웹 페이지의 현재 상태를 JSON 형식으로 저장하는 캐시 인터페이스
pre�xCss CSS 벤더 프리픽스를 지원하지 않는 일부 jQuery 버전을 사용할 때 제조사 접두어를 지원
animate jQuery.animate() 메서드를 확장해 transform과 3D 가속을 지원
pause / resume jQuery.animate()로 실행한 애니메이션을 일시 정지 및 재실행
이벤트
rotate 모바일 기기의 회전을 감지하는 이벤트
scrollend 스크롤의 마지막 시점을 감지하는 이벤트
16. 빠른 이슈 대응과 내부
니즈(UI/UX/기능) 충족을 목표
(2004)
(2010)
(2011)
Jindo
Jindo Component
Jindo Mobile Component
▪ [2011 deview]
▪ [2014 deview]
모바일 웹UI 개발, 아직도 맨땅에 삽질부터 하십니까?
자바스크립트 라이브러리 개발/운영 경험기
17. 그러나... lack of
외부 레퍼런스, 교육비용, 호환성
빠른 변화, 환경의 민첩한 대응
개발자들의 long term 커리어 및 발전 기여
아쉽지만, fade-out 결정
34. API 형태로 변경
원하는 시점에 API 호출
$.persist("CACHEKEY"); // getter
$.persist("CACHEKEY", data); // setter
35. 스토리지 문제
브라우저 마다 다른 저장
Private mode 에서 Web Storage 이슈 ( )
quota limit
Safari
$.persist() 스토리지 사용순서:
(session → local)
→
Web Storage
history.state
36. 사례#2: 기능성 부족
애니메이션을 쉽게 구현할 수 있는 .
하지만, 크로스 브라우징 이슈로 'transform' 속성 지원되지 않음
jQuery.animate()
$el.animate({
transform: "translate3d(0,200,0)"
}, 1000);
47. transform 순서
완벽한 중간 값은 복잡 matrix 연산 필요
Matrix 연산 줄이고, transform 연산으로 자연스럽게
그러나, 일부 상황(움직임 적은)에서 약간 부자연
유명 라이브러리들(ex. )도 순서 고려 못함
결국, 순서는 사용자 몫
Velocity.js
▪ [참고] jQuery 애니메이션은 어떻게 작동하는가? - / /기본 심화 응용
49. eg.Flicking
패널을 쓸어 넘김 형태로 이동하는 플리킹 UI를 구현
Why?
흔히 사용되는 UI/UX
빠른 이슈 대응 필요
높은 브라우저 커버리지
지속적 성능요인 개선을 빠르게 적용
터치 제스처는 활용Hammer.js
50. 렌더링 성능 향상
렌더링 성능을 위해 하드웨어 가속 적용
Layer hack이 일반적 (ex. translateZ(0))
will-change
변경이 발생할 속성을 브라우저에 힌트 주면, 사전 최적화
효율적 리소스 관리
(ex. GPU 메모리의 사용을 관리, 과도한 composite layer 생성 제한)
52. 시행착오
will-change
패널 이동하기 직전 설정, 이동 후 제거
브라우저가 holding 하고 있을수 있는 리소스 release 위해
사용 후, 제거 권고 ( )
설정 제거가 단시간에 반복해 이루어지는 형태엔 부적합
→ 프레임별 rasterization 비용이 크게 증가
Always Remove will-change
58. 성능향상
DOM Recycling
일정 수 노드만 유지
뷰포트 밖 요소 제거
물리적 DOM과
논리적 데이터 분리
이미지 포함한 경우,
크기를 구하기 위해
complete 속성 비동기 확인
59. 시행착오
스크롤 시 paint 비용을 줄이기 위해 하드웨어 가속
그러나,
카드 UI 특성상 컨텐츠가 매번 변경
composite layer의 잦은 업데이트는 성능저하 요인
하드웨어 가속은 무조건 좋은 것이 아니다.
상황에 맞게 적용 고려
▪ [2014 deview]
▪ [Hello world]
네이버 모바일 홈을 움직이는 반응형 무한스크롤의 비밀
네이버 쇼핑의 새로운 카드형 UI 라이브러리, eg.In�niteGrid
62. 환경 구분
1) 하드웨어 가속 환경에 대한 white list
수년간 직접적인 테스트를 통한 단말기 구분
// 하드웨어 가속 사용이 적절한 단말기 여부를 반환
eg.isHWAccelerable();
https://naver.github.io/egjs/latest/doc/eg.html#isHWAccelerable
2) Transition 속성 사용환경 구분
// CSS transition 사용이 적절한 환경 여부를 반환
eg.isTransitional();
https://naver.github.io/egjs/latest/doc/eg.html#isTransitional
63. 안정성 확보 방안들
기본 고려 사항들
브라우저 호환성
다양한 환경(모바일, 테블릿, 데스크탑) 호환성
성능
[ 목표 ]
일관된 코드 품질 유지
지속적이며 끊김없는 테스트 수행을 목표
모든 코드에는 unit test가 존재해야 한다.
64. 코드 스타일 유지
(부제: 너는 나 나는 너)
코드 스타일 검사 ( - 향후, ESLint로 전환 예정)
코드 정적 검사 ( )
개발자간 에디터와 IDE 등에서의 코드 스타일 유지
( )
JSCS
https://github.com/naver/egjs/blob/master/.jscsrc
JSHint
https://github.com/naver/egjs/blob/master/.jshintrc
EditorCon�g
https://github.com/naver/egjs/blob/master/.editorcon�g
65. 자동화된 테스트
Total test cases: 3,591 (93% coverage)
Commit/Push 마다
commit hook( )을 통한 linting
CI( )를 통한 push 단위별 검증
husky
TravisCI
https://github.com/naver/egjs/tree/master/test/unit
66. 실 환경 수동 QA
163개의 수동 테스트 케이스를 통한 검증
네이버의 수많은 사용자들을 통해 검증
https://github.com/naver/egjs/tree/master/test/manual
67. Road Map
ES6/7 전환
다양한 프레임워크(Angular, React) 지원
jQuery 의존성 제거
VanillaJS로 전환, 의존성 줄여 사용환경 개선
( [참고] )
모듈별 개별 라이브러리로 분리
light 하게, 기능 중심적 및 사용성 증대
Is jQuery Still Relevant?
68. 맺으며
갈길 멀다.
여러분의 적극적 참여로 발전하는 라이브러리 목표
github repo를 통해 모든 activity 공개
PR은 언제나 환영
개발자(국내/해외)과 웹 생태계 기여
국내 FE 오픈소스들 중 두드러지는 성공 케이스 부재
유명 오픈소스들 best practice 도입/참고