More Related Content Similar to [D2 campus]착 하면 척! chak 서비스 개발기 (20) [D2 campus]착 하면 척! chak 서비스 개발기1. 착 하면 척! CHAK 서비스 개발기
(부제. 나의 오픈소스 활용기)
오승현 upgle@xpressengine.com
20. # CHAK 서비스 요구사항
Dynamic UI를 제공하는
Single Page Application (SPA)
21. # CHAK 서비스 요구사항
아 웃겨 ㅋㅋㅋㅋㅋㅋㅋㅋ
댓글달기
오승현
아 웃겨 ㅋㅋㅋㅋㅋㅋㅋㅋ
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 문법으로
커스텀한 컴포넌트를 사용
36. 필요한 기능만 컴포넌트로 구현 가능 (확장성)
https://www.flickr.com/photos/bdesham/2432400623https://flic.kr/p/9aJJ5m
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"
}
}
45. 수많은 리엑트 컴포넌트 (javascript)
https://www.flickr.com/photos/nicksieger/280662707/
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 스타일시트
77. 요약 #1 - 잘부탁드려요
아직 1.학.년이니까.. 잘부탁드려요
78. 요약 #2 - 오픈소스 활용
착 서비스에
사용된 오픈소스
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/