웹프레임워크를 이용하여 개발된 오픈소스 cms프로젝트 샤인

이상원 (leesn@bookp.al)

이상원

(주) 북팔 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 분)

창업 기획 프로젝트 추진 중

오세요…

감사합니다