ݺߣ

ݺߣShare a Scribd company logo

200820 NAVER TECH CONCERT 13_네이버에서 오픈 소스 개발을 통해 성장하는 방법

•
•
NAVER Engineering
NAVER Engineering

200820 NAVER TECH CONCERT - 최연규 네이버에서 오픈 소스 개발을 통해 성장하는 방법

1 of 39
Download to read offline
200820 NAVER TECH CONCERT 13_네이버에서 오픈 소스 개발을 통해 성장하는 방법
NAVER | 최연규(Daybrush) 네이버에서오픈소스개발을통해성장하는방법
목차 1. 나는? 2. ? 3. 오픈 소스는? 1. 왜 오픈 소스를 사용할까? 2. 왜 오픈 소스를 만들까? 4. 입사 전 포트폴리오였던 나의 오픈 소스 5. InfiniteGrid가 오픈 소스로 되어가는 과정 1. 설계 및 개발 2. 문서 3. 저작권 문제 확인 4. 릴리즈 및 홍보 5. 외부 활동 6. 오픈 소스 참여 7. 나는 이제?
저는? https://github.com/daybrush https://github.com/naver/egjs
?
오픈 소스는? 오픈 소스 소프트웨어(OSS)는 저작권 소유자가 사용자에게 소프트웨어를 누구에게나 어떤 목적 으로든 사 용, 연구, 변경 및 배포 할 수있는 권한을 부여하는 라이센스에 따라 소스 코드가 공개되는 일종의 컴퓨터 소 프트웨어입니다. https://en.wikipedia.org/wiki/Open-source_software
우리는 오픈 소스를 사용할까? 사용하고 있었을까? • 사용하고 있습니다. • 사용했을 겁니다. • 사용하고 있을걸요?
왜 오픈 소스를 사용할까? 잘 만들어진 외부 오픈 소스를 사용함으로써 개발 비용을 절감할 수 있습니다. Background photo created by asierromero - www.freepik.com
왜 오픈 소스를 만들까? 왜 오픈 소스로 만들까? 1. 우리의(나의) 지식 공유를 할 수 있습니다. 1. 소스 및 사용한 기술 2. 글 3. 발표 Food photo created by KamranAydinov - www.freepik.com Product Product Product Open Source
왜 오픈 소스를 만들까? 왜 오픈 소스로 만들까? 2. 우리가(내가) 하는 일을 알릴 수 있습니다. 1. 포트폴리오, 자랑 2. 채용
왜 오픈 소스를 만들까? 왜 오픈 소스로 만들까? https://opensource.google/docs/why/ 3. 커뮤니티를 형성하여 사용자들의 참여를 기대할 수 있습니다. 1. 버그 제보 및 보안 개선 2. 새로운 기능 제안 3. 이를 통해 더 나은 , 더 가치 있는, 더 발전 하는 제품을 만들 수 있다. 4. 학습할 수 있는 기회가 많이 생깁니다. 1. 가이드가 있더라도 사용자들마다 모두 똑같은 방법으로 사용하지 않습니다. 그렇기 때문에 다양한 사용법에 따른 다양한 상황에서 다양한 버그제보를 받을 수 있습니다. 2. 사용자들이 3번과 같이 새로운 기능을 제안함으로써 나(우리)는 다양한 생각을 할 수 있습니다. 새로운 기능을 개발함으로써 많은 학습을 할 수 있습니다.
입사 전 포트폴리오였던 나의 오픈 소스 1. CSS 애니메이션을 쉽게 만들어주는 JavaScript 라이브러리입니다. 2. 2016년 부터 시작한 첫 오픈 소스입니다. 3. CSS 애니메이션을 쉽게 만들고 과제를 하기 위해 만든 라이브러리를 만들었습니다. 4. 나만 사용하는 라이브러리였습니다. https://github.com/daybrush/scenejs
포트폴리오 1. CSS, 애니메이션 지식 1. transform, filter의 동작 2. CSS 애니메이션의 동작에 대해 잘 알고 있다. 3. CSS를 이용한 트릭 4. JavaScript 애니메이션 < - > CSS 애니메이션의 동기화 2. CSS를 분리시키기 위한 정규식. 1. 따옴표 안의 따옴표, 쉼표 분리, 공백 분리, 괄호 분리 3. 데모 1. 이 모든 작업은 데모를 만들기 위한 밑작업이였다!!!!!
포트폴리오 https://www.youtube.com/watch?v=V3I8XomCv60
포트폴리오 오픈 소스, CSS를 중심으로 쓴 포트폴리오로 수 많은 케이스 중 하나일 뿐입니다. << 2016년의 나
InfiniteGrid가 오픈 소스로 되어가는 과정 ­ 시작 1. InfiniteGrid는 무한으로 배치할 수 있는 카드형 레이아웃 컴포넌트입니다. 2. 2017년 인턴 과제이자 첫 오픈 소스 작업 InfiniteGrid 3.0을 개발했습니다. 3. 목표 1. jQuery 제거 2. 기존 Grid 형태의 레이아웃 뿐만 아니라 다양한 형태의 레이아웃 지원 3. 기존 세로 스크롤 뿐만 아니라 가로 스크롤 지원 https://github.com/naver/egjs-infinitegrid
InfiniteGrid가 오픈 소스로 되어가는 과정 ­ 설계 1. 설계 1. Watcher(스크롤 관리) 2. Infinite(스크린에 보여줄 범위 관리) 3. ItemManager(아이템 관리) 4. DOMRenderer(DOM을 추가/삭제/스타일 지정) 5. Layout(화면에 그려질 레이아웃 형태)
InfiniteGrid가 오픈 소스로 되어가는 과정 ­ 개발 1. 개발 환경 1. ES6 2. Babel 3. Webpack 4. eslint 5. editorconfig 2. 테스트 1. Karma, Mocha, Chrome Launcher 3. 코드 리뷰
InfiniteGrid가 오픈 소스로 되어가는 과정 - 문서 1. API 문서 작성 1. JSDoc 2. tsdoc 3. typedoc 4. 혹은 예제 5. README API 문서가 없는 오픈 소스는 사용자들이 사용하고 싶어도 사용하기 어려울 수 있습니다.
InfiniteGrid가 오픈 소스로 되어가는 과정 - 문서 1. README 2. 데모 https://github.com/naver/egjs-infinitegrid/blob/master/README.md
InfiniteGrid가 오픈 소스로 되어가는 과정 - 문서 1. 컨트리뷰션에 도움을 주는 문서 또는 룰 https://github.com/naver/egjs-infinitegrid/tree/master/.github https://github.com/naver/egjs-infinitegrid/blob/master/CONTRIBUTING.md
InfiniteGrid가 오픈 소스로 되어가는 과정 ­ 저작권 확인 1. 법적 이슈 있는 써드파티 모듈 확인 대부분 무료 라이선스이지만 상용 제한이 있다거나 다른 조건이 있는 라이선스가 있는지 확인 https://www.olis.or.kr/license/compareGuide.do 2. 오픈 소스 저작권 명시 https://github.com/naver/egjs-infinitegrid/blob/master/LICENSE 3. 외부에서 가져온 오픈 소스 코드에 대한 출처 명시 https://github.com/naver/egjs-infinitegrid/blob/master/NOTICE
InfiniteGrid가 오픈 소스로 되어가는 과정 ­ 릴리즈 1. 버전 관리 1. git tag 2. npm 3. cdn
InfiniteGrid가 오픈 소스로 되어가는 과정 ­ 홍보 1. 시작 및 홍보 1. Reddit 2. JavaScript Weekly 3. Frontend Focus 4. 블로그 5. SNS https://d2.naver.com/helloworld/0637045
외부 활동 1. 블로그 1. Webpack에서 Tree Shaking하는 방법 2. Webpack에서 Rollup 전환기 3. 모든 프레임워크를 1번에 다루는 방법 CFC 4. 데이터 변화 추적 5. 무한 DOM 렌더링 최적화 6. Web VR 입문자를 위한 팁들 7. iOS 13 포인터 이벤트 https://medium.com/naver-fe-platform
외부 활동 2. 외부 발표 활동 1. FEConf 2018 ­ CSS 애니메이션 2. WATCON 2019 ­ 에디터 컴포넌트 밋업 3. FEConf 2019 ­ 4K 오픈소스 개발기 4. DEVIEW 2019 ­ 모든 프레임워크를 1번에 다루는 방법 CFC 5. FE Devtalk 2019 16회 ­ Framework VS Framework 6. TECHCON 2020 ­ 오픈소스로 성장하는 방법
오픈 소스 참여 - 이유 1. 사용했는데 생각했던 대로 잘 동작하지 않는다. 2. 사용했는데 버그 발견 3. 사용했는데 기능 부족 4. 눈에 보이는 오타 5. 번역 6. 기여하고 싶을 정도로 흥미로운 프로젝트 7. 기타
오픈 소스 참여
오픈 소스 참여 ­ VSCODE를 통해 알게 된 지식 1. getSelection, createRange, Textarea를 이용해 에디터를 만드는 방법 2. Clipboard API cut, copy, paste events
저는 이제 1. 입사 전의 포트폴리오였던 오픈 소스를 발전!! 1. README 및 문서 작업 2. 저작권 확인 3. 릴리즈 및 홍보 2. 인기를 끌면서 커뮤니티도 조금 활성화되고 다른 오픈 소스도 제작
저는 이제 1. 저는 egjs를 관리하고 2. 글도 쓰고 3. 외부에도 발표도 하고 4. 커뮤니티도 운영하고 5. 필요하면 이슈 작성과 외부 오픈 소스 코드를 수정해 PR을 요청하고 6. 만들고 싶은 것을 만들고 공개할 수 있는 7. 7.3K 오픈 소스 개발자가 되었습니다.
고민? 1. 오픈 소스 이름 정하기 1. 흔한 이름 2. 정직한 이름 3. 고유 이름 4. 동의어 또는 다른 나라 언어의 이름
고민? 2. Vanilla(또는 프레임워크)로 만들어진 컴포넌트를 다른 프레임워크의 지원 요청 1. Vanilla(또는 특정 프레임워크)만 지원한다. 2. 다른 프레임워크도 지원을 한다.
고민? 3. 수없이 들어오는 기능 제안 1. 우리에게 필요한 기능인지. 2. 이 기능이 다른 사용자들에게도 유용한지. 3. 이 오픈 소스 안에서만 해결할 수 있는 문제인지.
오픈 소스는 1. 만드는 것도 재밌고 2. 참여하는 것도 재밌고 3. 다양한 경험을 할 수 있습니다.
200820 NAVER TECH CONCERT 13_네이버에서 오픈 소스 개발을 통해 성장하는 방법
https://bit.ly/2E1XBD4
200820 NAVER TECH CONCERT 13_네이버에서 오픈 소스 개발을 통해 성장하는 방법
200820 NAVER TECH CONCERT 13_네이버에서 오픈 소스 개발을 통해 성장하는 방법

More Related Content

200820 NAVER TECH CONCERT 13_네이버에서 오픈 소스 개발을 통해 성장하는 방법

  • 3. 목차 1. 나는? 2. ? 3. 오픈 소스는? 1. 왜 오픈 소스를 사용할까? 2. 왜 오픈 소스를 만들까? 4. 입사 전 포트폴리오였던 나의 오픈 소스 5. InfiniteGrid가 오픈 소스로 되어가는 과정 1. 설계 및 개발 2. 문서 3. 저작권 문제 확인 4. 릴리즈 및 홍보 5. 외부 활동 6. 오픈 소스 참여 7. 나는 이제?
  • 5. ?
  • 6. 오픈 소스는? 오픈 소스 소프트웨어(OSS)는 저작권 소유자가 사용자에게 소프트웨어를 누구에게나 어떤 목적 으로든 사 용, 연구, 변경 및 배포 할 수있는 권한을 부여하는 라이센스에 따라 소스 코드가 공개되는 일종의 컴퓨터 소 프트웨어입니다. https://en.wikipedia.org/wiki/Open-source_software
  • 7. 우리는 오픈 소스를 사용할까? 사용하고 있었을까? • 사용하고 있습니다. • 사용했을 겁니다. • 사용하고 있을걸요?
  • 8. 왜 오픈 소스를 사용할까? 잘 만들어진 외부 오픈 소스를 사용함으로써 개발 비용을 절감할 수 있습니다. Background photo created by asierromero - www.freepik.com
  • 9. 왜 오픈 소스를 만들까? 왜 오픈 소스로 만들까? 1. 우리의(나의) 지식 공유를 할 수 있습니다. 1. 소스 및 사용한 기술 2. 글 3. 발표 Food photo created by KamranAydinov - www.freepik.com Product Product Product Open Source
  • 10. 왜 오픈 소스를 만들까? 왜 오픈 소스로 만들까? 2. 우리가(내가) 하는 일을 알릴 수 있습니다. 1. 포트폴리오, 자랑 2. 채용
  • 11. 왜 오픈 소스를 만들까? 왜 오픈 소스로 만들까? https://opensource.google/docs/why/ 3. 커뮤니티를 형성하여 사용자들의 참여를 기대할 수 있습니다. 1. 버그 제보 및 보안 개선 2. 새로운 기능 제안 3. 이를 통해 더 나은 , 더 가치 있는, 더 발전 하는 제품을 만들 수 있다. 4. 학습할 수 있는 기회가 많이 생깁니다. 1. 가이드가 있더라도 사용자들마다 모두 똑같은 방법으로 사용하지 않습니다. 그렇기 때문에 다양한 사용법에 따른 다양한 상황에서 다양한 버그제보를 받을 수 있습니다. 2. 사용자들이 3번과 같이 새로운 기능을 제안함으로써 나(우리)는 다양한 생각을 할 수 있습니다. 새로운 기능을 개발함으로써 많은 학습을 할 수 있습니다.
  • 12. 입사 전 포트폴리오였던 나의 오픈 소스 1. CSS 애니메이션을 쉽게 만들어주는 JavaScript 라이브러리입니다. 2. 2016년 부터 시작한 첫 오픈 소스입니다. 3. CSS 애니메이션을 쉽게 만들고 과제를 하기 위해 만든 라이브러리를 만들었습니다. 4. 나만 사용하는 라이브러리였습니다. https://github.com/daybrush/scenejs
  • 13. 포트폴리오 1. CSS, 애니메이션 지식 1. transform, filter의 동작 2. CSS 애니메이션의 동작에 대해 잘 알고 있다. 3. CSS를 이용한 트릭 4. JavaScript 애니메이션 < - > CSS 애니메이션의 동기화 2. CSS를 분리시키기 위한 정규식. 1. 따옴표 안의 따옴표, 쉼표 분리, 공백 분리, 괄호 분리 3. 데모 1. 이 모든 작업은 데모를 만들기 위한 밑작업이였다!!!!!
  • 15. 포트폴리오 오픈 소스, CSS를 중심으로 쓴 포트폴리오로 수 많은 케이스 중 하나일 뿐입니다. << 2016년의 나
  • 16. InfiniteGrid가 오픈 소스로 되어가는 과정 ­ 시작 1. InfiniteGrid는 무한으로 배치할 수 있는 카드형 레이아웃 컴포넌트입니다. 2. 2017년 인턴 과제이자 첫 오픈 소스 작업 InfiniteGrid 3.0을 개발했습니다. 3. 목표 1. jQuery 제거 2. 기존 Grid 형태의 레이아웃 뿐만 아니라 다양한 형태의 레이아웃 지원 3. 기존 세로 스크롤 뿐만 아니라 가로 스크롤 지원 https://github.com/naver/egjs-infinitegrid
  • 17. InfiniteGrid가 오픈 소스로 되어가는 과정 ­ 설계 1. 설계 1. Watcher(스크롤 관리) 2. Infinite(스크린에 보여줄 범위 관리) 3. ItemManager(아이템 관리) 4. DOMRenderer(DOM을 추가/삭제/스타일 지정) 5. Layout(화면에 그려질 레이아웃 형태)
  • 18. InfiniteGrid가 오픈 소스로 되어가는 과정 ­ 개발 1. 개발 환경 1. ES6 2. Babel 3. Webpack 4. eslint 5. editorconfig 2. 테스트 1. Karma, Mocha, Chrome Launcher 3. 코드 리뷰
  • 19. InfiniteGrid가 오픈 소스로 되어가는 과정 - 문서 1. API 문서 작성 1. JSDoc 2. tsdoc 3. typedoc 4. 혹은 예제 5. README API 문서가 없는 오픈 소스는 사용자들이 사용하고 싶어도 사용하기 어려울 수 있습니다.
  • 20. InfiniteGrid가 오픈 소스로 되어가는 과정 - 문서 1. README 2. 데모 https://github.com/naver/egjs-infinitegrid/blob/master/README.md
  • 21. InfiniteGrid가 오픈 소스로 되어가는 과정 - 문서 1. 컨트리뷰션에 도움을 주는 문서 또는 룰 https://github.com/naver/egjs-infinitegrid/tree/master/.github https://github.com/naver/egjs-infinitegrid/blob/master/CONTRIBUTING.md
  • 22. InfiniteGrid가 오픈 소스로 되어가는 과정 ­ 저작권 확인 1. 법적 이슈 있는 써드파티 모듈 확인 대부분 무료 라이선스이지만 상용 제한이 있다거나 다른 조건이 있는 라이선스가 있는지 확인 https://www.olis.or.kr/license/compareGuide.do 2. 오픈 소스 저작권 명시 https://github.com/naver/egjs-infinitegrid/blob/master/LICENSE 3. 외부에서 가져온 오픈 소스 코드에 대한 출처 명시 https://github.com/naver/egjs-infinitegrid/blob/master/NOTICE
  • 23. InfiniteGrid가 오픈 소스로 되어가는 과정 ­ 릴리즈 1. 버전 관리 1. git tag 2. npm 3. cdn
  • 24. InfiniteGrid가 오픈 소스로 되어가는 과정 ­ 홍보 1. 시작 및 홍보 1. Reddit 2. JavaScript Weekly 3. Frontend Focus 4. 블로그 5. SNS https://d2.naver.com/helloworld/0637045
  • 25. 외부 활동 1. 블로그 1. Webpack에서 Tree Shaking하는 방법 2. Webpack에서 Rollup 전환기 3. 모든 프레임워크를 1번에 다루는 방법 CFC 4. 데이터 변화 추적 5. 무한 DOM 렌더링 최적화 6. Web VR 입문자를 위한 팁들 7. iOS 13 포인터 이벤트 https://medium.com/naver-fe-platform
  • 26. 외부 활동 2. 외부 발표 활동 1. FEConf 2018 ­ CSS 애니메이션 2. WATCON 2019 ­ 에디터 컴포넌트 밋업 3. FEConf 2019 ­ 4K 오픈소스 개발기 4. DEVIEW 2019 ­ 모든 프레임워크를 1번에 다루는 방법 CFC 5. FE Devtalk 2019 16회 ­ Framework VS Framework 6. TECHCON 2020 ­ 오픈소스로 성장하는 방법
  • 27. 오픈 소스 참여 - 이유 1. 사용했는데 생각했던 대로 잘 동작하지 않는다. 2. 사용했는데 버그 발견 3. 사용했는데 기능 부족 4. 눈에 보이는 오타 5. 번역 6. 기여하고 싶을 정도로 흥미로운 프로젝트 7. 기타
  • 29. 오픈 소스 참여 ­ VSCODE를 통해 알게 된 지식 1. getSelection, createRange, Textarea를 이용해 에디터를 만드는 방법 2. Clipboard API cut, copy, paste events
  • 30. 저는 이제 1. 입사 전의 포트폴리오였던 오픈 소스를 발전!! 1. README 및 문서 작업 2. 저작권 확인 3. 릴리즈 및 홍보 2. 인기를 끌면서 커뮤니티도 조금 활성화되고 다른 오픈 소스도 제작
  • 31. 저는 이제 1. 저는 egjs를 관리하고 2. 글도 쓰고 3. 외부에도 발표도 하고 4. 커뮤니티도 운영하고 5. 필요하면 이슈 작성과 외부 오픈 소스 코드를 수정해 PR을 요청하고 6. 만들고 싶은 것을 만들고 공개할 수 있는 7. 7.3K 오픈 소스 개발자가 되었습니다.
  • 32. 고민? 1. 오픈 소스 이름 정하기 1. 흔한 이름 2. 정직한 이름 3. 고유 이름 4. 동의어 또는 다른 나라 언어의 이름
  • 33. 고민? 2. Vanilla(또는 프레임워크)로 만들어진 컴포넌트를 다른 프레임워크의 지원 요청 1. Vanilla(또는 특정 프레임워크)만 지원한다. 2. 다른 프레임워크도 지원을 한다.
  • 34. 고민? 3. 수없이 들어오는 기능 제안 1. 우리에게 필요한 기능인지. 2. 이 기능이 다른 사용자들에게도 유용한지. 3. 이 오픈 소스 안에서만 해결할 수 있는 문제인지.
  • 35. 오픈 소스는 1. 만드는 것도 재밌고 2. 참여하는 것도 재밌고 3. 다양한 경험을 할 수 있습니다.