View
259
Download
5
Category
Preview:
Citation preview
오승현
• �XE�1�서드파티�개발자�
• �XE�1�Contributor�
• �XECONTEST�2014�수상�
• �CHAK�개발�(15.06�~�)
오승현
• XE�1�서드파티�개발자�
• �XE�1�Contributor�
• �XECONTEST�2014�수상�
• �CHAK�개발�(15.06�~�)
What is CHAK?
4
5
오픈소스�개발자와�사용자간의�커뮤니케이션을�제공
What is CHAK?
What is CHAK?
6
어디에나�포럼,�코멘트�서비스�제공
What is CHAK?
7
쉽고�간단한�설치
What is CHAK?
8
Just�Copy�&�Paste
What is CHAK?
9
소셜�로그인
What is CHAK?
10
Syntax�Highlighting
What is CHAK?
11
파일�업로드
What is CHAK?
12
Web�Hook
How to use?
13착!
How to use?
14착!
15
어때요�참�쉽죠?
16
다른�공간,�같은�커뮤니케이션
Service Preview(서비스�시연)
SHOW CASE(착�적용�사례)
SHOW CASE #1
19
D2�Hello�WorldNAVER�개발자들의�실전�노하우와�지식을�담은�기술�블로그
SHOW CASE #2
20
D2�STARTUP�FACTORYD2�Startup�Factory는�NAVER가�Tech�Startup�생태계�저변�
확대를�위해�만든�Accelerator로,�차별화된�Tech�Startup을�
직접�발굴해�육성하고�있습니다.�
SHOW CASE #3
21
Laravel�Korean�DocsNaverD2�지원으로�작성된��
라라벨�한국어�메뉴얼�깃허브�페이지
SHOW CASE #4
22
XpressEngineXpressEngine은 누구나 쉽고 편하고 자유롭게 콘텐츠를 발행을
할 수 있도록 하기 위한 CMS(Content Management System)
처음 4가지 요구사항(지금은�무한한�∞�요구사항)
CHAK 서비스 기본 요구사항
24
어디에나�착!�붙어야함1
SPA�(Single�Page�Application)2
커뮤니케이션�(댓글,�포럼)3
소셜�로그인�(SNS�Login)4
25
SPA�(Single�Page�Application)
SPA (Single Page Application)
26
- Wikipedia
A single-page application (SPA) is a web application or web site that fits on a single web page with the goal of providing
a more fluid user experience akin to a desktop application
웹 어플리케이션
데스크탑 어플리케이션과 같은 사용자 경험을 제공
SPA (Single Page Application)
27
SPA (Single Page Application)
28
Lots of people use React as the V in MVC. Since React makes no
assumptions about the rest of your technology stack, it's easy to try it out
on a small feature in an existing project.
JUST UIReact abstracts away the DOM from you, giving a simpler programming
model and better performance. React can also render on the server using Node, and it can power native apps
using React Native.
Virtual DOMReact implements one-way reactive data flow which reduces boilerplate and is easier to reason about than
traditional data binding.
DATA FLOW
https://facebook.github.io/react/
SPA (Single Page Application)
29
SPA (Single Page Application)
30
Request
Response
SERVER
31
1,300개 이상의 XE 모듈, 스킨, 애드온 …
32
서비스에 필요한 모듈만 따로 구현
33
+ CHAK SERVICE Module
XpressEngine with React
34
+ CHAK SERVICE LOGIC
Application
Request
Response
XE1 으로 서비스를 만들다보니
35
안되는게�있어?�XE�코어를�수정해!
XE1 으로 서비스를 만들다보니
36
수정하고�나니�업데이트가�불안하다
XE1 으로 서비스를 만들다보니
37
UI�테스트만�믿고�가야하나?
2014 XECON - Selenium for UI Test 오승훈 XE 커뮤니티 개발 그룹
Xpress Engine3로 착 서비스 확장하기(실제�CHAK�서비스에서�활용중인�패키지�소개)
XE3에서 강화된 특징
39
• Modern�PHP�(Autoloading,�Composer,�etc)�
• 라라벨(Laravel)�프레임워크�기반의�오픈소스�CMS�
• 유용한�XE3�Core�Packages�
• Cloud�File�System�
• Testable�(Unit�test)
Autoloading, PSR-4
40
XE1
모듈에서 따로 구현한 클래스는 include 해야함
Michael님의 유튜브(YouTube) 모듈
41
Autoloading, PSR-4
42
XE3
현재 클래스의 네임 스페이스를 지정
필요한 클래스들을 로드
Composer & Packagist
43
Composer is a brilliant dependency manager for PHP. List your project’s dependencies in a composer.json file and, with a few simple commands, Composer will automatically download your project’s dependencies and setup autoloading for you.
There are already a lot of PHP libraries that are compatible with Composer, ready to be used in your project. These “packages” are listed on Packagist, the official repository for Composer-compatible PHP libraries.
composer require phpunit/phpunit
Laravel 프레임워크 기반의 오픈소스 CMS
44
Authentication
Billing
Elixir
Authorization
Cache
Encryption
Events
Helpers
Package Development
Filesystem
Localization
Pagination
Redis Session
Artisan Console
Collections
Errors & Logging
Hashing
Queues
SSH Tasks
Task Scheduling Testing Validation
유용한 XE3 코어 패키지
Xpressengine\Config
Xpressengine\Category
Xpressengine\Interception
Xpressengine\Comment
Xpressengine\Document
Xpressengine\Keygen
Xpressengine\Menu
Xpressengine\Register
Xpressengine\Site
Xpressengine\Permission
Xpressengine\Routing
Xpressengine\Skin
Xpressengine\Tag Xpressengine\Temporary
Xpressengine\Counter
Xpressengine\DynamicField
Xpressengine\Media
Xpressengine\Database
Xpressengine\Http
Xpressengine\Member
Xpressengine\Plugin
Xpressengine\Seo
Xpressengine\Storage
Xpressengine\Presenter
Xpressengine\Settings
Xpressengine\Support
Xpressengine\Theme Xpressengine\ToggleMenu
Xpressengine\Translation Xpressengine\Trash Xpressengine\UIObject Xpressengine\Widget
CHAK with Laravel & XE3
47
Event System with Queued Job
48
Laravel's events provides a simple observer implementation,
allowing you to subscribe and listen for events in your application
Events and Queues
<?php class documentController extends document{ function insertDocument() { // Insert data into the DB $output = executeQuery('document.insertDocument', $obj); if(!$output->toBool()) { $oDB->rollback(); return $output; }
ModuleHandler::triggerCall('document.insertDocument', 'before', $obj); }
Event System (XE 1 Trigger)
49
class DocumentHandler{ public function insertDocument($doc) { $this->insertDoc($doc); Event::fire(new DocumentInserted($doc)); return $doc; }
Event System (Laravel)
50
.
.
.
class EventServiceProvider extends ServiceProvider{ /** * The event listener mappings for the application. * * @var array */ protected $listen = [ ArticleWasDeleted::class => [ DeleteArticleUser::class, RemoveFileFromStorage::class, WebhookQueueSender::class, DeleteArticleCodes::class, DeleteArticleFiles::class, DeleteArticleLinks::class, DeleteArticleTags::class, DeleteArticleVotes::class, DeleteArticleChildren::class ],
Event System (Laravel)
51
웹훅도 날려야하고.. 클라우드서버에서 파일도 삭제해야하고..
자식 댓글도 삭제해야하니.. Recursive하게 다시 파일을 삭제하고..
Event System with Queued Job
52
출처 : 생활코딩
class DeleteArticleFiles implements ShouldQueue{ use InteractsWithQueue; /** @var Log */ private $log; /** @var FileRepositoryInterface */ private $articleFiles;
Event System with Queued Job
53
ShouldQueue 인터페이스 상속만으로 비동기 작업 처리
.
.
.
Event System with Queued Job
54
바로응답
ArtisanListen
출처 : 생활코딩
Cloud File System
55
Filesystem / Cloud Storage
The Laravel Flysystem integration provides simple to use drivers for working with local
filesystems, Amazon S3, and Rackspace Cloud Storage.
Cloud File System
56
Storage::disk('local')->put('file.txt', 'Contents');
Cloud File System (Custom Disk)
57
League/Flysystem/AdapterInterface
XE3 Config with CHAK
58
XE3의 Config 패키지는 XE3 에서 각종 설정 정보를 저장하고 관리하며
Hierarchy 구조로 상위 참조가 가능한 key - value 저장소
Xpressengine\Config
XE3 Config with CHAK
59
사용자 (Naver)
코멘트1
CHAK SERVICE
사용자 (XE)
코멘트2 코멘트3 포럼1 포럼2 포럼3
포럼 혹은 코멘트 인스턴스
인스턴스를 관리할 수 있는 그룹
사용자 (Naver)
코멘트1
CHAK SERVICE
사용자 (XE)
코멘트2 코멘트3 포럼1 포럼2 포럼3
XE3 Config with CHAK
60
착 포럼 인스턴스에 대한 설정(스킨) 정보를 요청
{"skin" : null
}
사용자 (XE)
XE3 Config with CHAK
61
사용자 (Naver)
코멘트1
CHAK SERVICE
코멘트2 코멘트3 포럼1 포럼2 포럼3
{"skin" : null
}
부모(Parent)의 설정 정보를 요청
사용자 (XE)사용자 (Naver)
코멘트1
CHAK SERVICE
코멘트2 코멘트3 포럼1 포럼2 포럼3
XE3 Config with CHAK
62
기본 Default 설정 정보를 요청
{"skin" : "default"
}
XE3 Config with CHAK
63
Cfg::get(‘chak.upgle.1000-0000’);
Instance ID
group ID
CHAK Service
[ . ] 으로 구분되는 구분자(델리미터)를 통해서 설정 정보를 가져올 수 있다.
유용한 XE3 코어 패키지
Xpressengine\Config
Xpressengine\Category
Xpressengine\Interception
Xpressengine\Comment
Xpressengine\Document
Xpressengine\Keygen
Xpressengine\Menu
Xpressengine\Register
Xpressengine\Site
Xpressengine\Permission
Xpressengine\Routing
Xpressengine\Skin
Xpressengine\Tag Xpressengine\Temporary
Xpressengine\Counter
Xpressengine\DynamicField
Xpressengine\Media
Xpressengine\Database
Xpressengine\Http
Xpressengine\Member
Xpressengine\Plugin
Xpressengine\Seo
Xpressengine\Storage
Xpressengine\Presenter
Xpressengine\Settings
Xpressengine\Support
Xpressengine\Theme Xpressengine\ToggleMenu
Xpressengine\Translation Xpressengine\Trash Xpressengine\UIObject Xpressengine\Widget
너무 많아서 다 보여드릴수가 없어요!
Artisan Command 를 통한 서비스 관리
Artisan Command
Artisan Command 를 통한 서비스 관리 (스케쥴링)
Linux Cron Job
http://laravel.com/docs/5.1/scheduling
Unit Testing
$_SESSION 글로벌 변수에 의존하고 있기도 하고…
Testable XE3
Unit Testing (XE1)
$_SESSION 글로벌 변수에 의존하고 있기도 하고…
다른 Class의 인스턴스를 런타임 중에 받아오고
Unit Testing (DI)
class User {public function getCurrentUser() {
$user_id = $_SESSION['user_id'];$user = new User();
$user->select('id', 'username')->where('id', $user_id)->limit(1)->get();
if($user->num_results() > 0){
return $user->all();}return null;
}}
class User {
protected $_db;
public function __construct($db_connection){
$this->_db = $db_connection;}
public function getUser($userId){
$user = $this->_db->select('user')->where('id', $user_id)->limit(1)->get();
if($user->num_results() >0){
return $user->all();}return false;
}}
Non-Testable Code Testable Code
의존성을 생성자에서 주입받는다.
Unit Testing (XE3)
XE3 Test Coverage (76%)
Unit Testing
CHAK Service Unit Test
Unit Testing
72
Cos
t of C
hang
e
0
5
10
15
20
Development Time
XE1 XE3 (TDD Available)
Cost of change vs development time
XE3로 시작하는 웹서비스 장점
73
• �전세계�수�많은�사용자로부터�검증된�프레임워크�기반��오픈�소스�코드�
• 개발�비용�최소화�(XE�패키지�활용,�서비스�개발�기간�단축)�
• 서드�파티�모듈을�활용하여�서비스�자체�컨텐츠에�집중할�수�있다.�
• 테스팅을�통한�안정적인�배포및�서비스�운영�가능하다.
XE3로 멋진 서비스를 만들어주세요!
감사합니다
Recommended