Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

7,251 views

Published on

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

Published in: Technology
  • Be the first to comment

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

  1. 1. 착 하면 척! CHAK 서비스 개발기
 (부제. 나의 오픈소스 활용기) 오승현 upgle@xpressengine.com
  2. 2. 네팔 코이카 국제 협력 요원 (컴퓨터 교육)
  3. 3. XE 공모전 모듈 부문 수상 (중고장터 모듈)
  4. 4. 국내 최초 오픈소스를 위한 공간 XEHUB
  5. 5. 아직 1.학.년이니까.. 잘부탁드려요
  6. 6. 착 프로젝트 팀원 전창완 선지훈 오승현 이준하
  7. 7. CHAK 서비스?
  8. 8. CHAK 이란? XpressEngine 등 오픈소스 프로젝트 개발자와 사용자간의 커뮤니케이션을 위해서 시작
  9. 9. CHAK 이란? 어디에나 착!댓글 혹은 포럼을 커뮤니케이션에 필요한 기능들을 착!착!착!붙일 수 있다
  10. 10. 착(CHAK)이란? 단 코드 몇줄로! 소셜로그인 기능
  11. 11. 착(CHAK)이란? 단 코드 몇줄로! 코드 하이라이팅
  12. 12. 착(CHAK)이란? 단 코드 몇줄로! 파일 첨부
  13. 13. 착(CHAK)이란? www.xpressengine.com !
  14. 14. 착(CHAK)이란? www.xpressengine.com !
  15. 15. 서비스 시연 데모페이지에 CHAK 댓글을 붙일 거예요
  16. 16. 여기에서 볼 수 있어요! http://d2.naver.com
  17. 17. 오픈소스를 활용하다
  18. 18. 착 서비스에 사용된 오픈소스
  19. 19. # CHAK 서비스 요구사항 Dynamic UI를 제공하는 Single Page Application (SPA)
  20. 20. # CHAK 서비스 요구사항 아 웃겨 ㅋㅋㅋㅋㅋㅋㅋㅋ 댓글달기 오승현 아 웃겨 ㅋㅋㅋㅋㅋㅋㅋㅋ
  21. 21. 자바스크립트 프레임워크
  22. 22. ReactJS
  23. 23. ReactJS
  24. 24. 웹 개발을 앱 개발 처럼 http://www.satter.org/2013/05/embarcaderos-rad-studio-xe4.html
  25. 25. 웹 개발을 앱 개발 처럼 이 버튼 HTML로 만들어볼까요? 좋아요 12
  26. 26. 웹 개발을 앱 개발 처럼 http://jsfiddle.net/o3y6dxbj/ 좋아요 12
  27. 27. 웹 개발을 앱 개발 처럼 http://jsfiddle.net/o3y6dxbj/ 좋아요 12
  28. 28. 웹 개발을 앱 개발 처럼 Likebtn 이라는 새로운 컴포넌트를 정의 HTML 과 같은 방식인 JSX 문법으로 커스텀한 컴포넌트를 사용
  29. 29. 웹 개발을 앱 개발 처럼
  30. 30. 웹 개발을 앱 개발 처럼 <Editor />
  31. 31. 웹 개발을 앱 개발 처럼 <Editor />
  32. 32. 웹 개발을 앱 개발 처럼
  33. 33. MVC 중 View MODEL VIEW CONTROLLER
  34. 34. XpressEngine 3 (Alpha 버전) http://xpressengine.io
  35. 35. 필요한 기능만 컴포넌트로 구현 가능 (확장성) https://www.flickr.com/photos/bdesham/2432400623https://flic.kr/p/9aJJ5m
  36. 36. 아이디어 구상 Document <script>
 </script> 댓글 창 생성
  37. 37. API를 통한 비동기 통신 RESTful JSON API
  38. 38. 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
  39. 39. API를 통한 비동기 통신 SUCCESS or FAIL { "data": { "type" : "articles", "id" : "000110" } } HTTP RESPONSE
  40. 40. 데이터 및 VIEW 처리 { "data": { "type" : "articles", "id" : "000110" } }
  41. 41. PROBLEM #1 점점 많아지는 컴포넌트(=Javascript) 파일들
  42. 42. 수많은 리엑트 컴포넌트 (javascript) HTML
  43. 43. 수많은 리엑트 컴포넌트 (javascript) HTML 의존관계
  44. 44. 수많은 리엑트 컴포넌트 (javascript) https://www.flickr.com/photos/nicksieger/280662707/
  45. 45. Javascript를 모듈화하는 방법 CommonJS AMD (Asynchronous Module Definition)
  46. 46. Browserify를 통한 모듈화 기존의 자바스크립트를 NodeJS(Common JS)와 같은 방식으로 모듈화 하고 의존성을 관리하여 하나의 번들 파일로 만들어준다.
  47. 47. 오픈소스 Browserify를 통한 모듈화 의존 관계의 모듈을 자바스크립트 내에서 require 하여 사용한다. Browserify를 통해 번들화
  48. 48. Dependency까지 깔끔하게 번들처리 BEFORE AFTER
  49. 49. SASS를 사용하여 스타일 모듈화
  50. 50. SASS를 사용하여 스타일 모듈화
  51. 51. SASS를 사용하여 스타일 모듈화
  52. 52. SASS를 사용하여 스타일 모듈화
  53. 53. 컴포넌트 & 스타일 디렉토리 구조 일치화 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 스타일시트
  54. 54. PROBLEM #2 개발보다 테스트하는데 오래 걸린다.
  55. 55. Selenium Test 웹 기반 어플리케이션을 테스트할 수 있도록 도와주는 오픈소스 자동화 UI 테스팅 도구
  56. 56. 테스트 자동화 (Selenium test) 시연
  57. 57. Selenium 테스트 결과
  58. 58. Continuous Integration(지속적인 통합) 리포팅 결과 통지 테스팅 배포 jenkins-ci.org
  59. 59. Continuous Integration(지속적인 통합)
  60. 60. 테스트 도입 후 코드 추가 용이함 디버깅 시간 감소 품질 높은 소프트웨어 유지
  61. 61. 테스트는 컴퓨터한테 맡겨놓고 커피 한 잔 해요
  62. 62. 실무에서 배운 협업 방법
  63. 63. 깃으로 소스 형상 관리 착_프로젝트.zip
  64. 64. 깃으로 소스 형상 관리 착_프로젝트_20150816.zip
  65. 65. 깃으로 소스 형상 관리 착_프로젝트_최종본.zip
  66. 66. 깃으로 소스 형상 관리 착_프로젝트_최종본_다시최종본.zip
  67. 67. 깃으로 소스 형상 관리 착_프로젝트_최종본_다시최종본_제발최종본.zip
  68. 68. 깃으로 소스 형상 관리
  69. 69. 깃으로 소스 형상 관리
  70. 70. 깃으로 소스 형상 관리 (커밋 히스토리 관리)
  71. 71. 요비로 이슈 관리
  72. 72. 전체 이슈를 한눈에 파악
  73. 73. # 요약
  74. 74. 요약 #1 - 잘부탁드려요 아직 1.학.년이니까.. 잘부탁드려요
  75. 75. 요약 #2 - 오픈소스 활용 착 서비스에 사용된 오픈소스
  76. 76. 요약 #3 - 서비스를 지탱하는 오픈소스
  77. 77. 요약 #3 - 문제해결도 오픈소스
  78. 78. 요약 #4 - 테스팅 자동화도 오픈소스
  79. 79. 요약 #4 - 협업도 오픈소스
  80. 80. 스스로 고민하고 성장할 수 있었던 착 서비스 개발
  81. 81. 감사합니다.
  82. 82. 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/

×