Naver D2FEST

'오픈소스로 날아오르다'

<ForWeaver> D2FEST 수상기

2015. 2. 27

고 민 수 이 아 침

CONTENTS ForWeaver : For STUDENTS!

i. ForWeaver 소개

ii. ForWeaver의 시작

iii. 개발하면서 겪은 일들

iv. 추천하는 오픈소스와 사이트

v . 발표를 마치며

핚신대학교 컴퓨터공학부

2014 D2FEST 최우수상

NAVER LABS 인턴

이런 사람들입니다

Who are we............. ?

고 민 수 이 아 침

ForWeaver

너희들이 만든 게 ForWeaver 라고?

Question

그런데 그게 무슨 뜻이야?

ForWeaver 소개

ForWeaver

Communion of Birds

소셔블위버는 남아프리카 공화국의 건조핚 북서부 지역에 서식하는 작은 새

이 새는 생김새는 평범하지만 독특핚 사회생활을 영위하는 것으로 유명하다

이름의 유래는?

ForWeaver

핚 번에 300마리까지 군집을 이루어 서식하는 Sociable Weaver의 거대핚 공동 둥지

재주가 비상핚 Sociable Weaver 들은

길이 7미터에 무게가 100킬로그램인 둥지를 짓는다

ForWeaver

‘ForWeaver ’ : “위버=학생”

학생들을 위한 사이트! 바로 우리들을 위한 사이트!!

ForWeaver

Services

그래 그래! 학생들을 위핚 사이트라는 뜻이란 건 알겠어!

그럼 어떤 서비스를 하는데?

ForWeaver 기능은?

ForWeaver

버전관리란? 소스 공유 프로그램

Central Repository

Local Repository

Local

Repository

Local

Repository

ForWeaver 기능은?

ForWeaver

또한 ‘소스코드 + 기록’도 관리 가능

ForWeaver 기능은?

ForWeaver

학생들의 과제 제출에 활용!

ForWeaver 기능은?

이 기능을

ForWeaver

어떻게 쓰지? 생소한 이슈 트래커!

ForWeaver 기능은?

ForWeaver

강력한 분류 기능! 태그 게시판 제공!

ForWeaver 기능은?

ForWeaver

학생들을 위한 소셜 코딩의 장+과제 저장소

그래서 ForWeaver는!

ForWeaver

시연!

ForWeaver

ForWeaver…

그 시작

ForWeaver

버전 관리로 과제 검증하면 어떨까?

만들게 된 이유는?

ForWeaver

외국에서는 이미 쓰고 있다

만들게 된 이유는?

하지만, 국내에는 없는 서비스!

ForWeaver

아이디어는 있는데 어떻게 시작하지?

만들게 된 이유는?

ForWeaver

맘 편하게 단독 개발 처음에는...

혼자 개발하면서

- 의견 공유는 시간 낭비

- 혼자 아이디어로도 완성할 수 있을걸?

- 팀원 구하다가 시간만 버려..

ForWeaver

10% 정도 구현했던 데모 버전

혼자 개발하면서

ForWeaver

공모전에 도전, 그러나 계속 실패...

혼자 개발하면서

ForWeaver

혼자서 다 하려다보니

문서화, 코드 어느 하나 안 할 수도 없고... 능률도 떨어지고...

혼자 개발하면서

ForWeaver

커뮤니티에서 모집 ‘짧은 글로는 프로젝트를 알릴 수가 없어!’

어려운 팀원 구하기

ForWeaver

친한 사람 중에서 모집 ‘친하다고 해서

내 아이디어를 진지하게 보지는 않아’

“포위버가 좋은 건 알겠는데.. 잘 될지는 모르겠다”

어려운 팀원 구하기

ForWeaver

프로젝트를 목적으로 한 스터디 그룹 결성!

어려운 팀원 구하기

그래서...

ForWeaver

팀으로 바꾸고 나서 좋아진 점

팀 프로젝트가 되고나서

ForWeaver

분업으로 능률이 올라갔다!

팀 프로젝트가 되고나서

ForWeaver

나의 취약점을 채워 주다!

팀 프로젝트가 되고나서

ForWeaver

내가 생각하지 못한 새로운 의견 제시!

팀 프로젝트가 되고나서

ForWeaver

검증 서비스는 로그만으로도 충분하지 않나?

팀 프로젝트가 되고나서

사용자 보기 편하게 통계도 제공해야 한다!

VS

- 민수

- 아침

ForWeaver 팀 프로젝트가 되고나서

다양한 통계 차트로 시각화!

ForWeaver

개발하면서 터득한 노하우!

ForWeaver

다른 방식의 기술로 설계 문제를 해결하다!

개발하면서 터득한 노하우

ForWeaver

태그가 많아지면 검색 속도가 느림!

설계 문제를 해결하다!

ForWeaver

Many to Many 관계

설계 문제를 해결하다!

태그와 게시글은

RDBMS에서..

ForWeaver

태그 A와 B가 동시에 붙은 글을 검색하는 SQL 문

설계 문제를 해결하다!

동작 방식은?

ForWeaver

A

태그 A가 붙은 글 검색

설계 문제를 해결하다!

ForWeaver

태그 B가 붙은 글 검색

A B

설계 문제를 해결하다!

ForWeaver

검색한 데이터를 토대로 태그 A, B 글을 추려냄

A B A,B

설계 문제를 해결하다!

ForWeaver

우리의 구원자, mongoDB!

설계 문제를 해결하다!

ForWeaver

db.posts.find( { tags: { $in: [ ‘A’, ‘B’ ] } } )

글과 태그를 한 곳에 저장하므로

A, B 한번에 검색이 가능!

설계 문제를 해결하다!

ForWeaver

MongoDB의 경우 연관검색 사용하기 불편

하지만...

설계 문제를 해결하다!

ForWeaver

유명한 라이브러리만 답이 아니다!

개발하면서 터득한 노하우

ForWeaver

대표 라이브러리는 방대하고, 저 수준

유명한 라이브러리만 답이 아니다

보통

ForWeaver

Forked Library

Forked Library

파생 라이브러리는 쓰기 편하고, 고수준

유명한 라이브러리만 답이 아니다

ForWeaver

자바 Git 기능 구현 라이브러리

&

유명한 라이브러리만 답이 아니다

ForWeaver

파생 라이브러리!

구현할 수 있는 기능이 많음, GIT 내부 구조를 알아야함

예제도 많고 사용 쉬움, 구현할 수 있는 기능이 적음.

유명한 라이브러리만 답이 아니다

ForWeaver

개발 시간 단축! 완성도 상승!

심사위원님도 칭찬^^

유명한 라이브러리만 답이 아니다

ForWeaver

라이센스는 쓰기 전에 확인하자!

개발하면서 터득한 노하우

ForWeaver

HighChart.js? 쓰고 싶은 기능이 있네! 디자인도 예뻐!

라이센스는 확인하고 쓰자

ForWeaver

커밋 빈도수를 보여주는 기능

라이센스는 확인하고 쓰자

ForWeaver

깔끔하게 잘 만들었는데..

라이센스는 확인하고 쓰자

ForWeaver

비영리 라이센스! 상용화하려면 구매해야..

라이센스는 확인하고 쓰자

ForWeaver

모두 지우고 라이센스가 유연한 D3.js 이용

라이센스는 확인하고 쓰자

ForWeaver

오픈소스라고 저작권이 없는게 아니다!

라이센스는 확인하고 쓰자

ForWeaver

HackDay & 결승전

ForWeaver

핵데이?

HackDay 행사에 초대되다!

HackDay에서

ForWeaver

이슈: 웹에서 ppt를 보여주자

HackDay에서

ForWeaver HackDay에서

이슈 해결을 위해 직접 물어보다

ForWeaver

해결: 공모전 기간 동안은 보류

HackDay에서

ForWeaver

직접 구현할 순 없었지만 시간을 벌 수는 있었어요

HackDay에서

ForWeaver

결승전에는 무슨 일이?

ForWeaver

Yobi를 이용하여 공모전을 진행하도록 함

결승전에서

ForWeaver

로그를 통해 심사!

결승전에서

ForWeaver

깃 로그, 이래서 무섭구나!

결승전에서

ForWeaver

발표, 긴장, 성공적

결승전에서

ForWeaver

최우수상 수상

결승전에서

ForWeaver

1.열심히 노력한 ‘흔적’을 인정받다.

우리가 생각하는 수상 이유

ForWeaver

2. 라이센스를 미리 확인했다.

우리가 생각하는 수상 이유

ForWeaver

3. 오픈소스를 적재적소에 활용!

우리가 생각하는 수상 이유

ForWeaver

추천하는 오픈소스와 도움이 되는 사이트들

ForWeaver

• 자바 개발의 필수 아이템 1호

오픈소스 - Spring

ForWeaver

로그인에 보안을 어떻게 적용하지?

페이스북, 트위터와 연동하려면?

최신 NoSQL을 db로 쓰고 싶다면?

오픈소스 - Spring

ForWeaver

★ 잘 조합하시면 개발의 절반은 끝! ★

오픈소스 - Spring

ForWeaver

자바와 함께 쓰기 편한 DB

오픈소스 - mongoDB

ForWeaver

어노테이션만 이용하면 스크립트 없이 개발 가능

@Repository public class WeaverDao { @Autowired private MongoTemplate mongoTemplate; public void insert(Weaver weaver) { // 회원 추가하기 if (!mongoTemplate.collectionExists(Weaver.class)) mongoTemplate.createCollection(Weaver.class); mongoTemplate.insert(weaver); }

오픈소스 - mongoDB

ForWeaver

db.eval( function(name, incAmount) { var doc = db.myCollection.findOne( { name : name } ); doc = doc || { name : name , num : 0 , total : 0 , avg : 0 }; doc.num++; doc.total += incAmount; doc.avg = doc.total / doc.num; db.myCollection.save( doc ); return doc; }, "eliot", 5 );

쿼리 스크립트는 자바스크립트와 유사!

오픈소스 - mongoDB

ForWeaver

• 프로젝트 Build 및 배포 작업에 사용

오픈소스 - maven

ForWeaver

악몽의 라이브러리 추가

오픈소스 - maven

ForWeaver

★ 의존성 문제 해결 ★

라이브러리 검색

오픈소스 - maven

ForWeaver

웹 프론트엔드 프레임워크

오픈소스 - Bootstrap

ForWeaver

웹 디자인을 손쉽게 구현!

오픈소스 - Bootstrap

ForWeaver

Mkyong.com

추천하는 사이트

bootsnipp.com

opentutorials.org

backlogtool.com/git-guide/kr/

Spring, MongoDB 예제 및 강의

Git 익히기

Bootstrap 컴포넌트 모음

마치며…

목표를 공유할 사람과 협업해라!

기술에 문제가 있다면 더 찾아보아라!

남의 도움을 받는 것을 꺼려하지 말라!

THANK YOU

- www.wilkinsonsworld.com/wp-content/gallery/botswana-2010/10476-rooiputs-

19032010-sociable-weaver.jpg

이미지 출처

- www.ymresourcer.com/Birding/Pofadder2012.php

Sociable Weaver 이미지

Sociable Weaver 둥지 이미지

- www.safaribooksonline.com/library/view/mongodb-and-

php/9781449324827/httpatomoreillycomsourceoreillyimages971390.png

몽고디비 설계이미지 변형 원본 주소

- docs.joomla.org/Dvcs

그외 밴드 스티커 사용

GIT 설명 이미지

- band.us