[D2 campus]착 하면 척! chak 서비스 개발기

1. 착 하면 척! CHAK 서비스 개발기
(부제. 나의 오픈소스 활용기)
오승현 upgle@xpressengine.com

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

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

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

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

6. 착 프로젝트 팀원
전창완
선지훈
오승현
이준하

7. CHAK 서비스?

8. CHAK 이란?
XpressEngine 등
오픈소스 프로젝트 개발자와 사용자간의
커뮤니케이션을 위해서 시작

9. CHAK 이란?
어디에나 착!댓글 혹은 포럼을
커뮤니케이션에 필요한 기능들을 착!착!착!붙일 수 있다

10. 착(CHAK)이란?
단 코드 몇줄로!
소셜로그인 기능

11. 착(CHAK)이란?
단 코드 몇줄로!
코드 하이라이팅

12. 착(CHAK)이란?
단 코드 몇줄로!
파일 첨부

13. 착(CHAK)이란?
www.xpressengine.com
!

14. 착(CHAK)이란?
www.xpressengine.com
!

15. 서비스 시연
데모페이지에
CHAK 댓글을 붙일 거예요

16. 여기에서 볼 수 있어요!
http://d2.naver.com

17. 오픈소스를 활용하다

18. 착 서비스에
사용된 오픈소스

20. # CHAK 서비스 요구사항
Dynamic UI를 제공하는
Single Page Application (SPA)

21. # CHAK 서비스 요구사항
아 웃겨 ㅋㅋㅋㅋㅋㅋㅋㅋ
댓글달기
오승현
아 웃겨 ㅋㅋㅋㅋㅋㅋㅋㅋ

22. 자바스크립트 프레임워크

23. ReactJS

24. ReactJS

25. 웹 개발을 앱 개발 처럼
http://www.satter.org/2013/05/embarcaderos-rad-studio-xe4.html

26. 웹 개발을 앱 개발 처럼
이 버튼 HTML로 만들어볼까요?
좋아요 12

27. 웹 개발을 앱 개발 처럼
http://jsfiddle.net/o3y6dxbj/
좋아요 12

28. 웹 개발을 앱 개발 처럼
http://jsfiddle.net/o3y6dxbj/
좋아요 12

29. 웹 개발을 앱 개발 처럼
Likebtn 이라는 새로운 컴포넌트를 정의
HTML 과 같은 방식인 JSX 문법으로
커스텀한 컴포넌트를 사용

30. 웹 개발을 앱 개발 처럼

31. 웹 개발을 앱 개발 처럼
<Editor />

32. 웹 개발을 앱 개발 처럼
<Editor />

33. 웹 개발을 앱 개발 처럼

34. MVC 중 View
MODEL
VIEW
CONTROLLER

35. XpressEngine 3 (Alpha 버전)
http://xpressengine.io

36. 필요한 기능만 컴포넌트로 구현 가능 (확장성)
https://www.flickr.com/photos/bdesham/2432400623https://flic.kr/p/9aJJ5m

37. 아이디어 구상
Document
<script>
</script>
댓글 창 생성

38. API를 통한 비동기 통신
RESTful JSON API

39. API를 통한 비동기 통신
CRUD (Create, Read, Update, Delete)
GET chak.it/articles/:id
HTTP REQUEST
POST chak.it/articles
PATCH chak.it/articles/:id
DELETE chak.it/articles/:id

40. API를 통한 비동기 통신
SUCCESS or FAIL
{
"data": {
"type" : "articles",
"id" : "000110"
}
}
HTTP RESPONSE

41. 데이터 및 VIEW 처리
{
"data": {
"type" : "articles",
"id" : "000110"
}
}

42. PROBLEM #1
점점 많아지는 컴포넌트(=Javascript) 파일들

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

44. 수많은 리엑트 컴포넌트 (javascript)
HTML
의존관계

45. 수많은 리엑트 컴포넌트 (javascript)
https://www.flickr.com/photos/nicksieger/280662707/

46. Javascript를 모듈화하는 방법
CommonJS
AMD
(Asynchronous Module Definition)

47. Browserify를 통한 모듈화
기존의 자바스크립트를 NodeJS(Common JS)와 같은 방식으로
모듈화 하고 의존성을 관리하여 하나의 번들 파일로 만들어준다.

48. 오픈소스 Browserify를 통한 모듈화
의존 관계의 모듈을 자바스크립트 내에서
require 하여 사용한다.
Browserify를 통해 번들화

49. Dependency까지 깔끔하게 번들처리
BEFORE AFTER

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

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

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

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

54. 컴포넌트 & 스타일 디렉토리 구조 일치화
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 스타일시트

55. PROBLEM #2
개발보다 테스트하는데 오래 걸린다.

56. Selenium Test
웹 기반 어플리케이션을 테스트할 수 있도록 도와주는
오픈소스 자동화 UI 테스팅 도구

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

58. Selenium 테스트 결과

59. Continuous Integration(지속적인 통합)
리포팅
결과 통지
테스팅
배포
jenkins-ci.org

60. Continuous Integration(지속적인 통합)

61. 테스트 도입 후
코드 추가
용이함
디버깅 시간
감소
품질 높은
소프트웨어 유지

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

63. 실무에서 배운 협업 방법

64. 깃으로 소스 형상 관리
착_프로젝트.zip

65. 깃으로 소스 형상 관리
착_프로젝트_20150816.zip

66. 깃으로 소스 형상 관리
착_프로젝트_최종본.zip

67. 깃으로 소스 형상 관리
착_프로젝트_최종본_다시최종본.zip

68. 깃으로 소스 형상 관리
착_프로젝트_최종본_다시최종본_제발최종본.zip

69. 깃으로 소스 형상 관리

70. 깃으로 소스 형상 관리

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

74. 요비로 이슈 관리

75. 전체 이슈를 한눈에 파악

76. # 요약

77. 요약 #1 - 잘부탁드려요
아직 1.학.년이니까.. 잘부탁드려요

78. 요약 #2 - 오픈소스 활용
착 서비스에
사용된 오픈소스

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

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

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

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

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

84. 감사합니다.

85. 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/