웹프레임워크를 이용하여 개발된 오픈소스 cms프로젝트 샤인
TRANSCRIPT
이상원
(주) 북팔 CTO
Meteor Korea 운영자 (Meteor Seoul Meetup)
Discover Meteor 번역(http://kr.discovermeteor.com/)
Meteor Weekly 번역 (https://medium.com/@leesangwon)
차 례
SHINE 소개
SHINE 특징
SHINE 사용방법
OpenSource & Next
SHINE 소개
SHINE 프로젝트란?
Meteor+React 기반의 웹, 앱용 BoilerPlate
개발자가 프로젝트를 시작할 때의 출발점
회원, 로그, Admin, 업로드, 등등
귀찮은 작업을 모두 만들어 두자.
비즈니스 모델의 구현만 하면 되도록…
SHINE 프로젝트 경과
2015년 5월 시작
북팔프리 앱 소스를 정리하여 오픈 소스로 전환 (Meteor Only)
9월에 shinejs.io 사이트 오픈(Blaze 기반)
Meteor에서 Angular, React 공식 지원 발표
Meteor + React 로 새로 개발 시작
이전 버전을 Shine-Blaze로 새 버전을 Shine-React로 변경
현재는 Shine-React 중심으로 진행 중
SHINE React 개발 현재
Meteor + React 기반
Mobile 우선 개발
File Structure 표준화, 모듈화
회원 기능(OAuth 일부)
파일업로드
테마 기능
SHINE React v0.2.0
Product? No!
SHINE 특징
Technical specification
JavaScript, ES2015(Babel)
Meteor, React
CSS, Less, Bootstrap
Git, GitHub
+
Archtecture
Blaze
DDP
Client ReactMinimongo
Web App
Livequery
MongoDBServer
Libraries
Meteor Core
React
Server
Client View
Router / Layout ReactRouter
CSS Bootstrap, Less
Image Upload Cloudinary
Accounts-ui SHINE custom package
SHINE File Structure
/apps
/admin Admin 앱
/batch Batch 앱
/front 웹 앱
/mobile 모바일 앱(iOS, Android)
/packages 공통 packages
/bin
*.sh 빌드, 실행(디버그), 환경설정 스크립트
/docs 문서
/build 빌드 산출물 디렉토리
/release 배포본 산출물 디렉토리
App File Structure
/client 클라이언트 전용 코드
/conf 클라이언트 설정
/packages Local 패키지 디렉토리
/public 클라이언트 리소스 (이미지, 아이콘 등)
/server 서버 전용 코드
/conf 서버 설정
/shared 공통 소스
/0 라이브러리
/modules 기능별 모듈
router.jsx 라우터
Module Structure
/client
/PostList.jsx View
/PostListContainer.jsx DB Query
/lib
/post_model.js Collections, Insert/Update
/post_validator.js Validation
/server
/post_publish.js Pub/Sub, List/View
SHINE 사용방법
설치 및 구동
1. Git, Meteor 설치
2. 소스 다운로드git clone https://github.com/shine-js/shine-react
3. 실행 (개발모드) cd shine-react/apps/adminmeteor
4. 빌드 (iOS, Android)cd shine-react/binbuild.sh admin
Diary Module 해보기
/lib diary_model.js
diary_validator.js
/server diary_publish.js
/client DiaryList.jsx
DiaryPagedList.jsx
DiaryListContainer.jsx
DiaryView.jsx
DiaryViewContainer.jsx
DiaryForm.jsx
DiaryNewContainer.jsx
DiaryEditContainer.jsx
단계
1. Model - Collection
2. Method (Insert/Update/Remove)
3. Pub/Sub (List/View)
4. Form/View
5. Router
리소스
www.meteorjs.kr
http://www.meetup.com/Meteor-Seoul/
https://www.facebook.com/meteorjskorea
https://medium.com/@leesangwon/
shinejs.io
https://github.com/shine-js/
OpenSource & Next
SHINE Next
OAuth (Facebook, Google, Kakao, Naver)
Push & Batch
SEO, Search (Elastic, Server-side rendering)
Flux Architecture
OpenSource 해보니…
힘들다…
내 것인 듯 내 것 아닌…
실력은 확실히…
함께 하면…
북팔 강남 센터
2015년 4월 오픈
4평 비즈니스 센터에서 20평 단독 사무실(7호선 학동역)
2 + 3명 +알파(2~3 분)
창업 기획 프로젝트 추진 중
오세요…
감사합니다