Open source 세미나

30 Jun 2018 |

GPL3 : 최근에는 GPL3를 따른다 MPL : 새로운 파일에 작성한 소스코드의 경우 공개 의무가 없음 CPL/EPL : IBM 오픈소스 라이센스 : (이클립스) 가져다 쓰는건상관 없으나 문제가 발생했을 때 책임 지지 않는다 BSD : 소스코드 공개 의무가 없음 저작권표시, 보증책임이 없다는 표시 Apache license : Apache 이름에 대한 상표권을 침해하지 않아야 함 대표 : 안드로이드 MIT license : 제약이 없고 책임을 지지 않는다

##특허권/듀얼 라이센스## GPL3를 선택하게 되면 특허권 포기가 된다

라이센시 특허

이용자가 특허권을 가지고 있는 경우

듀얼라이센스

복수 라이센스 적용
QT라이센스

Elastic Remote Working - 김종민
[시작하세요 엘라스틱서치]
Elastic search 오픈소스 검색엔진
침대에서 회사까지 1분 유튜브 루씬 ?

오픈소스로 돈을 어떻게 벌죠 ? 기술지원, 유료 사용자 기능, 교육, 컨설팅 아시아 쪽에서는 기술지원에 대한 수익내기가 어렵다 : 엔지니어의 몸값이 너무 작다

Reoete Working 매년 1~2차례 모임
핸드북, 메뉴얼, 친화력을 위한 문화,

Remote 근무의 이유 대도시 집값이 무시무시, 비자 문제 미국은 원래 땅 덩이라가 커서 모이기 힘들다
이메일을 주고 받고 일을 진행 비동기 처리

장점 유연한 시간 활용: 매일 2~4시간 여유 자신에게 익숙한 근무 환경 구현 사무실 임대료 절약

단점 동료간의 유대감 부족 캐쥬얼한 대화가 어려움 회의에 집중하기 어려움

스스로 일할 분위기 만들기
조인석 엔지니어의 홈오피스

세밀한 자기 관리 동료들 간의 신뢰 가족들의 협력

내가 좋아하는 것, 실제로 잘하는것, 세상이 요구하는 것

devtool

github : 개발툴 , 공유툴로 사용, 슬랙과 연동
google apps ?
slack : 챗봇을 만들어서 업무에 활용
salesforce : 최강의 crm 툴
Zoom : 비디오 컨퍼런스 툴,
pingboard : 근태/인사 관리
Demo Day : 개인 프로젝트나 개발중인 기능 발표
물어보면 개발한 사람을 알려준다
개발한 사람이 메일이나 슬랙으로 물어보면 잘 대답해준다
친근함의 사람들을 주로 채용

아웃사이더 오픈소스 생태계
일원으로서의 개발자
1. 개인 프로젝트의 소스코드 공개(저장소 사용 목적)
2. 다른 사람들이 사용하는 오픈소스 (프레임워크, 라이브러리, 도구)

처음에 왜 오픈소스를 시작했나요 ? github 개인 목적의 웹사이트 dotfiles 관리 학습 목적으로 만든 데모 프로그램 주변 개발자들과 그룹 프로젝트

공개 저장소는 공짜니까 … 오픈소스에 이슈 제기 PR : 오타 수정 요청

개발하다보니 오픈소스 참여 …

모던 개발에서는 오픈소스가 없는 개발은 상상하기 어렵다 …

오픈소스 프로젝트에 참여하는 방법 이미 오픈소스 생태계에 속해 있다. => 어느부분을 할 것인가 ?

어떻게 참여하는가 ?

사용
홍보
번역
리포팅
문서화
코드 제출

오픈소스가 가장 진보된 개발 프로세스를 가지고 있다

배운점

커뮤니케이션 방법
협업의 방법과 중요성: 비동기
테스트 코드의 중요성
지속적 통합/ 지속적 배포
코드의 품질 관리

대부분의 프로젝트는 컨트리뷰션이 더 필요하다

버스 팩터: 팀원 중 일부가 버스에 치였을 때 프로젝트에 영향을 줄일 수 있는 수

메인테이너나 프로젝트를 비난하지 말자

메인테이너는 생각보다 바쁘다

이슈보고는 재현 가능한 예제와 상황을 제공해야 한다
자신의 이슈를 빨리 처리해 달라고 요청하지 말자
처리할 수 있는 이슈는 답변을 달거나 pull request 를 제출한다 후원하기 opencollective

KossLab 송태웅 해외 오픈소스 컨퍼런스 발표와 참여 레벨에 따른 발표가능 : 특별한 경험 the linux foundation events 다른 사람들의 요약본을 훑어 본다 질문 - 전문용어로 파악 영어에 집중 보다는 기술에 집중 질문 하나라도 건져간다 —————————————————————————–

python, pycon, and the psf 김영근 파이썬 커뮤니티 == 파이썬 사용자 파이썬 3가 주 사용한다
서로 존중하고 다양성을 소중하게 여긴다
파이썬 다양한 분야에서 사용 중이다 왜 파이썬이 다양하게 사용될까? => 타분야에서 자동화 …. 웰컴!!! 도메인 지식을 가진자가 프로그램을 배움 … => 라이브러리가 좋아짐

sprint : open source 1st time contributors ! 파이썬 커뮤니티의 원동력 존중과 배려, 소속감과 참여감, 기여 생태계 사람들, 동료의식

파이콘 한국 2018 : 8월

제플린 이문수 아파치 제플린 데이터 분석할 때 사용 notebook
어떻게만들었는가 ? 2013년 => 2014년 스파크 개발자 사이트 메일링 스택오버플로우 Apache : “Community over code” Apache Project New project => incubator => (graduation vote) TLP 투표를 통해 결정 => Sub project

Board => PMC Chair =>

의사결정

제안
토론
공감대 형성
투표

공감대 형성 => 투표(O)

Apache project가 되는 가장 큰 장점 Apache 브랜드 사용
Apache2 라이센스 Quality Standard Open decision making process

단점: 제품을 만들때 문제가 된다 아파치 재단에 브랜드를 소유한다
생태계(사용자 기여자가 많을 수록 …) … => 파이썬도 생태계 커뮤니티 …

기여 방법
추가 기능에 대한 documentation
code 기여만 있는 것이 아니라 개선 사항이나 버그 feedback
파이썬은 sprint … 저변 확대 … 어떻게 기여자를 늘릴 것인가 ?
오픈소스 … => 본질은 소프트웨어는 사용자에 가치가 부여되어야 한다

공부를 목적으로 한다면 유명한 오픈소스의 개발자의 다른 프로젝트를 찾아본다

원격근무 : 커뮤니케이션의 문제가 발생할 수 있다 … 이모지를 통해서 늬앙스를 전달 …
원격근무의 늬앙스를 놓치는 부분을 보완해 줄수 있는 방법이 필요하다 …

오픈소스 기여 : 번역 …, 자신이 사용하는 프로젝트 …, 오픈소스 개발에 대한 흐름, 늬앙스 …

쓰다가 필요한 프로그램을 개발 …

본질은 실력 …

협업, 이슈 관리, commit 메시지는 어떻게 작성하는 가?

책 추천 개발자들의 부족한점 감정 이해 … 커뮤니케이션 능력…
활용서는 피하라 … KRC C 프로그래밍 리눅스 심층분석(커널)
성당과시장 한빛미디어 pdf 제공 기술 뉴스레터 …

투자자 .. => 돈은 어떻게 벌것인가 ??? 오픈소스 기반의 회사로 성공한 회사가 흔하지는 않다

영어 커뮤니케이션 노하우

문서를 활용
영어 사용량을 늘린다. 모방
부끄러움을 극복.
node 내부는 C++ ?
내가 어디에 관심을 가지고 있는가 ? 관심있는 분야를 조금씩 구체화 시킴
오픈소스 : 리뷰나 discussion가 많아야 한다
사용되지 않는 경우 사라지고 많다. 코드가 줄려는 가치가 명확해야 한다…
빠르게 움직여서 가치를 찾아야 한다
좋은 코드와 빠르게 사용자가 필요로 하는 기능을 빠르게 개발할 것인가에 대한 균형
Saas 형태의 제공, GIT과 GITHUB와의 관계 같은 수익모델
듀얼 라이센스
내가 무엇에 관심이 있는가 ?
메뉴얼화

Comment Read more

TIL webpack

21 Jun 2018 | webpack npm

1. NPM

초기화 : package.json 파일 생성 - npm init : 초기화 - npm init -y : default 초기화
패키지 설치 및 업데이트
- 로컬 설치 : npm install package명
  local 디렉토리의 node_modules 디렉토리에 설치된다. 로컬로 설치된 경우 코드에서 require로 import 시킬 수 있다
- 글로벌 설치 : npm install package명 –global
- --save : 앱을 구동하기 위해 필요한 모듈 & 라이브러리 설치
- --save-dev : 앱 개발시 필요한 모듈& 라이브러리 설치

2. Webpack

Entry
- webpack 으로 묶은 모든 라이브러리들을 로딩할 시작점 설정
- a, b, c 라이브러리를 모두 번들링한 bundle.js를 로딩한다
- 1개 또는 2개 이상의 엔트리 포인트를 설정할 수 있다
Output
- entry에서 설정하고 묶은 파일의 결과값을 설정
Output Name Options
- [name]: 엔트리 명에 따른 output 파일명 생성
- [hash]: 특정 webpack build에 따른 output 파일명 생성
- [chunkhash]: 특정 webpack chunk에 따른 output 파일명 생성
참고 api
- path.join() : 해당 API가 동작하는 OS의 파일 구분자를 이용하여 파일의 위치를 조합한다.
- path.resolve()
  - join()의 경우 그냥 문자열을 합치지만, resole는 오른쪽에서 왼쪽으로 파일 위치를 구성해가며 유효한 위치를 찾는다
  - 만약 결과 값이 유효하지 않으면 현재 디렉토리가 사용된다. 반환되는 위치 값은 항상 absolute URL이다
Weppack loader
- 웹팩은 자바스크립트 파일만 처리가 가능하도록 되어 있다
- loader를 이용하여 다른 형태의 웹 자원들을 (img, css, …) js로 변환하여 로딩 한다
Plugin 소개 : 플러그인은 파일별 커스텀 기능을 사용하기 위해서 사용한다
- 플러그인과 로더의 차이 : 로더는 빌드과정에 관여하고 플러그인은 빌드 후 output 과정에 관여한다
- Provide plugin: 모든 모듈에서 사용할 수 있도록 해당 모듈을 변수로 변환 한다
- Defined plugin:
  - webpack 번들링을 시작하는 시점에 사용 가능한 상수들을 정의.
  - 일반적으로 개발계&테스트계에 따라 다른 설정을 적용할 때 유
- Manifest plugin: 번들링시 생성되는 코드(라이브러리)에 대한 정보를 json 파일로 저장하여 관리
Webpack Resolve
- Webpack의 모듈 번들링 관점에서 봤을 때, 모듈 간의 의존성을 고려하여 모듈을 로딩해야 한다
- 모듈을 어떤 위치에서 어떻게 로딩할지를 정의한 것
- webpack.config.js 에서 resolve - alias를 통하여 경로 명을 정의 하여 코드를 import할 때 경로명을 줄일 수 있다
```
resolve: {
 alias: {
     Vendor: path.resolve(__dirname, './app/vendor/')
 }
}
```
- webpack.config.js에서 plugin으로 ProvidePlugin를 사용하여 모듈을 직접 import하지 않고도 전역에서 사용할 수 있다
```
plugins: [
new webpack.ProvidePlugin({
  $: 'jquery'
})
]
```

3. Webpack 빌드를 위한 서버 구성

webpack-dev-server : webpack 자체에서 제공하는 개발 서버이고 빠른 리로딩 기능 제공
webpack-dev-middleware : 서버가 이미 구성된 경우에는 webpack을 미들웨어로 구성하여 서버와 연결

3-1. Webpack Dev Server

페이지 자동 고침을 제공하는 webpack 개발용 node.js 서버

설치 및 실행

dev-server 설치

$ npm install --save-dev webpack-dev-server

dev-server 실행
```
$ node_modules/.bin/webpack-dev-server
```

package.json에 실행 명령어 등록

  "scripts": {
  "start:dev": "webpack-dev-server"
  }

package.json에 스크립트 추가했을 때의 실행 방법
```
  $ npm run start:dev
```
참고: https://www.npmjs.com/package/webpack-dev-server

3-3. Webpack 명령어

webpack: 웹팩 빌드 기본 명령어 (주로 개발용)
webpack -p : minification 기능이 들어간 빌드(주로 배포용)
webpack -watch(-w): 개발에서 빌드할 파일의 변화를 감지
```
$ webpack --progress --watch
```
webpack -d : sourcemap 포함하여 빌드
webpack –dispaly-error-details: error 발생시 디버깅 정보를 상세히 출력
webpack –optimize-minimize –define process.env.NODE_ENV=”‘production’” : 배포용

개발자 도구 연동

브라우저에서 webpack 으로 컴파일된 파일을 디버깅 하기 어렵다
sourcemap설정을 추가해주면 원래 파일 구조에서 디버깅이 가능해 진다
```
module.export= {
  ...
  devtool: "#inline-source-map"
}
```

Gulp 연동

Gulp와 Webpack 모두 Node.js 기반이기 때문에 통합해서 사용하기 쉽다
``` var gulp = require(‘gulp’); var webpack = require(‘webpack-stream’); var webpackConfig = require(‘./webpack.config.js’);

gulp.task(‘default’, function(){ return gulp.src(‘src/entry.js’). pipe(webpack(webpackConfig)). pipe(gulp.desc(‘dist/’)); }); ```

Hot Module Replacement

웹 앱에서 사용하는 JS 모듈들을 갱싱할 때 화면의 새로고침 없이 뒷 단에서 변경 및 삭제 기능을 지원
공식 가이드에는 React 를 기준으로 사용법이 작성되어 있다

Comment Read more

TIL 토이프로젝트 - spring react

19 Jun 2018 | Spring maven webpack 토이프로젝트

보통은 react + nodeJs 혹은 react + dJango를 쓰는 듯한다.
react + spring을 찾아보니 https://github.com/spring-guides/tut-react-and-spring-data-rest 에 boiler code가 있어서 참고 하기로 하였다.

maven에서 react를 사용할 수 있도록 제공하는 plug-in이 존재 한다
pom.xml에 빌드에 frontend-maven-plugin을 추가해 준다

<plugin>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-maven-plugin</artifactId>
</plugin>

개발하던 중 react를 위 코드를 참고하여 프로젝트에 추가하자 문제가 발생하였다
증상: 서버측에서 fetch를 사용하여 json을 가져오는 코드를 추가하게 되면 반영이 안되는 것이었다
원인: webpack 1.12.2 에서 es6 코드가 지원되지 않아 빌드과정에서 에러가 발생하였다
해결: webpack의 버전을 올리기로 하였다

package.json : webpack의 버전을 3.8.1 으로 수정
webpack.config.js : debug를 삭제 한다, loader를 babel에서 babel-loader로 변경

IntelliJ에서 maven 빌드 과정을 보고 싶다면 IntelliJ의 오른쪽 텝에서 Maven Projects를 선택 -> Lifecycle에서 한단계씩 실행해 보면 빌드 과정 중 어떤 에러가 나오고 어떻게 조치를 해야하는 지 찾을 수 있다

증상: state={} 에러 발생
원인: state = {}는 es7 부터 지원 된다고 한다
출처 해결: babel preset에 stage-0를 추가

증상: stage-0를 추가하면 async function에서 에러가 발생한다
원인: stage-0 프리셑에서 추가된 것을 지원하기 위해서는 별도의 polyfill이 필요하다
해결: babel 기반의 폴리필을 추가하는 방법은 두 가지이다.

babel-polyfill을 사용하는 방법
- babel-polyfill을 npm을 통해서 설치한다. => package.json에 추가 한다
- webpack.config.js에 polyfill이 필요한 js에 추가한다
```
 entry: ['babel-polyfill','./src/main/js/app.js'],
```
babel-plugin-transform-runtime을 사용하는 방법
- babel-runtime을 설치한다
- babel-plugin-transform-runtime을 –save-dev로 설치한다
- .babelrc에 아래와 같이 추가한다
```
"plugins": [
  ["transform-runtime", {
    "polyfill": false,
  "regenerator": true
  }]
]
```

polyfill : 웹 개발에서 기능을 지원하지 않는 웹브라우저 상의 기능을 구현하는 코드

참고 사이트 :
- babel-polyfill 설명: http://programmingsummaries.tistory.com/401
- stackoverflow 질문 및 답변 : https://stackoverflow.com/questions/33527653/babel-6-regeneratorruntime-is-not-defined

위와 같이 설정을 해주면 create-react-app에서 처럼 동일한 형식의 es6 코드를 작성 할 수 있다

Comment Read more

TIL 토이프로젝트 - 목적

19 Jun 2018 | 토이프로젝트

어떻하면 실력을 늘릴 수 있을까 ??
책만 일고 정리만 하면 실력이 늘지 않는다. 그것은 요리사가 요리를 해보지 않고 요리책만 들여다 보는 것과 같다. 게임을 배울 때도 마찬가지이다 일단 게임을 시작하고 본다. 시작하면 수많은 시행착오를 거치며 이 게임이 어떤지 알게되는 것이다. 그러다 막히면 커뮤니티나 공략집을 찾아보며 게임을 즐기게 된다

Comment Read more

TIL(java8 람다 코드 개선)

11 Jun 2018 | ToyProject JAVA

코드 개선
아래는 기존의 우선 크롤링을 위해서 작성 했던 코드이다

List<RedbookBroadcasting> broadcastingList = new ArrayList<>();

Elements contents = doc.select("table>tbody>tr");

for (Element element : contents) {
    Elements tds = element.select("tr>td>p");

    String broadcastingCategory = getBroadcastingCategory(tds);

    if (broadcastingCategory.equals("문학") || broadcastingCategory.equals("비문학")) {

        String bookTitle = getBroadcastingBookTitle(tds);

        String broadcastingNumber = getBroadcastingNumbers(tds);

        RedbookBroadcasting broadCastingN =
                new RedbookBroadcasting(
                    broadcastingNumber,
                    bookTitle,
                    broadcastingCategory
                );

        broadcastingList.add(broadCastingN);
    }
}

요즘 JavaScript를 코딩하면서 함수형 프로그래밍에 맞을 볼 수 있었다
생각해 보니 java8부터 람다식을 지원 하는 것이 생각났다
그렇다면 기존 코드를 java8 stream api를 사용하면 좀 더 이해하기 쉬운 코드로 개선 시킬 수 있을거 같았다

List <RedbookBroadcasting> broadcastingList = contents.stream().map(element -> element.select("tr>td>p"))
         .filter(element -> getBroadcastingCategory(element).equals("문학") ||
                 getBroadcastingCategory(element).equals("비문학"))
         .forEach(element -> {
                            RedbookBroadcasting broadcasting = new RedbookBroadcasting(
                                    getBroadcastingNumbers(element),
                                    getBroadcastingBookTitle(element),
                                    getBroadcastingCategory(element)
                            );

                            broadcastingList.add(broadcasting);
                        }

크롤링한 HTML 코드에서 if문으로 걸러냈던 것을 filter를 사용하여 비문학과 문학 항목만을 가져왔다
이후 forEach문을 돌리면 해당 요소를 뽑고 방송회차 정보와 책이름 분류를 읽어들이도록 한후 방송객체로 만들어 리스트에 추가하였다

하지만 더 간단히 코드를 개선할 수 있다

List <RedbookBroadcasting> broadcastingList = contents.stream().map(element -> element.select("tr>td>p"))
        .filter(element -> getBroadcastingCategory(element).equals("문학") ||
                getBroadcastingCategory(element).equals("비문학"))
        .map(elements ->
                new RedbookBroadcasting(getBroadcastingNumbers(elements),
                        getBroadcastingBookTitle(elements),
                        getBroadcastingCategory(elements)))
        .collect(Collectors.toList());

forEach문이 아닌 map에 넣고 각 element를 읽어들이고 방송객체를 생성하여 리턴하고 리턴받은 스트림을 list로 변환하여 반환 하였다

Comment Read more

Older Newer

좌충우돌 개발

Open source 세미나

QT라이센스

친근함의 사람들을 주로 채용

파이콘 한국 2018 : 8월

메뉴얼화

TIL webpack

1. NPM

2. Webpack

3. Webpack 빌드를 위한 서버 구성

3-1. Webpack Dev Server

3-3. Webpack 명령어

TIL 토이프로젝트 - spring react

TIL 토이프로젝트 - 목적

TIL(java8 람다 코드 개선)