착 하면 척! CHAK 서비스 개발기(부제. 나의 오픈소스 활용기)

오승현 upgle@xpressengine.com

네팔 코이카 국제 협력 요원 (컴퓨터 교육)

XE 공모전 모듈 부문 수상 (중고장터 모듈)

국내 최초 오픈소스를 위한 공간 XEHUB

아직 1.학.년이니까.. 잘부탁드려요

착 프로젝트 팀원

전창완

선지훈

오승현

이준하

CHAK 서비스?

CHAK 이란?

XpressEngine 등 오픈소스 프로젝트 개발자와 사용자간의

커뮤니케이션을 위해서 시작

CHAK 이란?

어디에나 착! 댓글 혹은 포럼을

커뮤니케이션에 필요한 기능들을 착!착!착!붙일 수 있다

착(CHAK)이란?

단 코드 몇줄로!

소셜로그인 기능

착(CHAK)이란?

단 코드 몇줄로!

코드 하이라이팅

착(CHAK)이란?

단 코드 몇줄로!

파일 첨부

착(CHAK)이란?

www.xpressengine.com

!

착(CHAK)이란?

www.xpressengine.com

!

서비스 시연

데모페이지에 CHAK 댓글을 붙일 거예요

여기에서 볼 수 있어요!

http://d2.naver.com

오픈소스를 활용하다

착 서비스에

사용된 오픈소스

# CHAK 서비스 요구사항

Dynamic UI를 제공하는

Single Page Application (SPA)

# CHAK 서비스 요구사항

아 웃겨 ㅋㅋㅋㅋㅋㅋㅋㅋ

댓글달기

오승현 아 웃겨 ㅋㅋㅋㅋㅋㅋㅋㅋ

자바스크립트 프레임워크

ReactJS

ReactJS

웹 개발을 앱 개발 처럼

http://www.satter.org/2013/05/embarcaderos-rad-studio-xe4.html

웹 개발을 앱 개발 처럼

이 버튼 HTML로 만들어볼까요?

좋아요 12

웹 개발을 앱 개발 처럼

http://jsfiddle.net/o3y6dxbj/

좋아요 12

웹 개발을 앱 개발 처럼

http://jsfiddle.net/o3y6dxbj/

좋아요 12

웹 개발을 앱 개발 처럼

Likebtn 이라는 새로운 컴포넌트를 정의

HTML 과 같은 방식인 JSX 문법으로 커스텀한 컴포넌트를 사용

웹 개발을 앱 개발 처럼

웹 개발을 앱 개발 처럼

<Editor />

웹 개발을 앱 개발 처럼

<Editor />

웹 개발을 앱 개발 처럼

MVC 중 View

MODEL VIEW

CONTROLLER

XpressEngine 3 (Alpha 버전)

http://xpressengine.io

필요한 기능만 컴포넌트로 구현 가능 (확장성)

https://www.flickr.com/photos/bdesham/2432400623https://flic.kr/p/9aJJ5m

아이디어 구상

Document

<script></script>

댓글 창 생성

API를 통한 비동기 통신

RESTful JSON API

API를 통한 비동기 통신

CRUD (Create, Read, Update, Delete)

GET chak.it/articles/:id

HTTP REQUEST

POST chak.it/articles

PATCH chak.it/articles/:idDELETE chak.it/articles/:id

API를 통한 비동기 통신

SUCCESS or FAIL

{ "data": { "type" : "articles", "id" : "000110" } }

HTTP RESPONSE

데이터 및 VIEW 처리

{ "data": { "type" : "articles", "id" : "000110" } }

PROBLEM #1

점점 많아지는 컴포넌트(=Javascript) 파일들

수많은 리엑트 컴포넌트 (javascript)

HTML

수많은 리엑트 컴포넌트 (javascript)

HTML

의존관계

수많은 리엑트 컴포넌트 (javascript)

https://www.flickr.com/photos/nicksieger/280662707/

Javascript를 모듈화하는 방법

CommonJS

AMD (Asynchronous Module Definition)

Browserify를 통한 모듈화

기존의 자바스크립트를 NodeJS(Common JS)와 같은 방식으로

모듈화 하고 의존성을 관리하여 하나의 번들 파일로 만들어준다.

오픈소스 Browserify를 통한 모듈화

의존 관계의 모듈을 자바스크립트 내에서 require 하여 사용한다.

Browserify를 통해 번들화

Dependency까지 깔끔하게 번들처리

BEFORE AFTER

SASS를 사용하여 스타일 모듈화

SASS를 사용하여 스타일 모듈화

SASS를 사용하여 스타일 모듈화

SASS를 사용하여 스타일 모듈화

컴포넌트 & 스타일 디렉토리 구조 일치화

components

AlphabetAvatar.jsx

CommentAction.jsx

CommentActionArea.jsx

CommentFooter.jsx

CommentForm.jsx

CommentEditor.jsx

CommentLoginBtn.jsx

CommentHeader.jsx

CommentList.jsx

CommentListRow.jsx

.

.

.

components

_alphabet_avatar.scss

.

.

.

_comment_action.scss

_comment_action_area.scss

_comment_footer.scss

_comment_form.scss

_comment_editor.scss

_comment_login_btn.scss

_comment_header.scss

_comment_list.scss

_comment_list_row.scss

React 컴포넌트 SASS 스타일시트

PROBLEM #2

개발보다 테스트하는데 오래 걸린다.

Selenium Test

웹 기반 어플리케이션을 테스트할 수 있도록 도와주는

오픈소스 자동화 UI 테스팅 도구

테스트 자동화 (Selenium test) 시연

Selenium 테스트 결과

Continuous Integration(지속적인 통합)

리포팅

결과 통지

테스팅

배포jenkins-ci.org

Continuous Integration(지속적인 통합)

테스트 도입 후

코드 추가 용이함

디버깅 시간 감소

품질 높은 소프트웨어 유지

테스트는 컴퓨터한테 맡겨놓고 커피 한 잔 해요

실무에서 배운 협업 방법

깃으로 소스 형상 관리

착_프로젝트.zip

깃으로 소스 형상 관리

착_프로젝트_20150816.zip

깃으로 소스 형상 관리

착_프로젝트_최종본.zip

깃으로 소스 형상 관리

착_프로젝트_최종본_다시최종본.zip

깃으로 소스 형상 관리

착_프로젝트_최종본_다시최종본_제발최종본.zip

깃으로 소스 형상 관리

깃으로 소스 형상 관리

깃으로 소스 형상 관리 (커밋 히스토리 관리)

요비로 이슈 관리

전체 이슈를 한눈에 파악

# 요약

요약 #1 - 잘부탁드려요

아직 1.학.년이니까.. 잘부탁드려요

요약 #2 - 오픈소스 활용

착 서비스에

사용된 오픈소스

요약 #3 - 서비스를 지탱하는 오픈소스

요약 #3 - 문제해결도 오픈소스

요약 #4 - 테스팅 자동화도 오픈소스

요약 #4 - 협업도 오픈소스

스스로 고민하고 성장할 수 있었던 착 서비스 개발

감사합니다.

reference

• Xpressengine http://xpressengine.com/

• Xpressengine3 http://xpressengine.io/

• React http://facebook.github.io/react/

• AngularJS https://angularjs.org/

• EmberJS http://emberjs.com/

• KnockoutJS http://knockoutjs.com/

• BackboneJS http://backbonejs.org/

• VUEJS http://vuejs.org/

• Jenkins http://jenkins-ci.org/

• NPM http://www.npmjs.com/

• Gulp http://gulpjs.com/

• Codeception http://codeception.com/

• Yobi http://yobi.io/

• Git http://git-scm.com/

• Browserify http://browserify.org/

• Sass http://www.sass-lang.com/

• PHPUnit https://phpunit.de/

• Selenium http://www.seleniumhq.org/

• Codeception http://codeception.com/