[Chart 추천 서비스] React + Meteor + Redux + Typescript + EUI 환경 구성
Chart 추천 서비스기획한 Chart Recommendation 서비스를 위한 React, Meteor, Typescript, SCSS, Elastic UI(eui), Redux 기반 환경을 구성하는 과정을 정리한다.
- Meteor create을 통한 react환경
- Typescript, SCSS 지원
- redux-observable을 이용한 Redux 환경 설정
- Elastic UI 및 react-final-form 설치
- react+meteor+eui+scss boilerplate 소스
React기반의 Meteor, Typescript, SCSS 프로젝트 생성
Node.js 8.12.0 사용, 현재 meteor 버전은 1.8.0.1 이다.
$ meteor create --react react-meteor-redux-boilerplate
$ cd react-meteor-redux-boilerplate
// 최신 버전 설치
$ meteor update
// 정상 작동하는지 확인
$ meteor run
scss, typescript 컴파일러 설치
$ meteor add fourseven:scss
$ meteor add barbatus:typescript
typescript를 위한 @types 및 패키지 설치
$ meteor npm install --save-dev @types/meteor
$ meteor npm install --save-dev @types/node
$ meteor npm install --save-dev @types/react
$ meteor npm install --save-dev @types/react-dom
$ meteor npm install --save-dev react-router-dom
$ meteor npm install --save-dev typescript
$ meteor npm install --save-dev tslint
$ meteor npm install --save-dev tslint-react
root에 tsconfig.json 및 tslint.json 추가
// tsconfig.json
{
"compilerOptions": {
"target": "es6",
"allowJs": true,
"jsx": "preserve",
"moduleResolution": "node",
"types": [
"node"
]
}
}
// tslint.json
{
// "extends": [
// "tslint:latest",
// "tslint-react"
// ],
"rules": {
"quotemark": [
true,
"single",
"jsx-double"
],
"ordered-imports": false,
"no-var-requires": false
}
}
.css, .jsx, .js 를 .scss, .tsx, .ts 확장자로 코드는 다음과 같이 변경한다.
// import
import React from 'react';
=>
import * as React from 'react';
// import path: 절대경로를 상대경로 변경
import App from '/imports/ui/App';
=>
import App from '../imports/ui/App';
// class Props, State 타입지정
class Info extends Component {
=>
class Info extends React.Component<{links: any}, undefined> {
// export
export default InfoContainer = withTracker(() => {
=>
const InfoContainer = withTracker(() => {
...
export default InfoContainer;
package.json 의 start 파일 변경
"mainModule": {
"client": "client/main.tsx",
"server": "server/main.ts"
}
Meteor Pub/Sub 환경 설정
필요없는 패키지 제거
$ meteor remove autopublish
imports/api/links.ts 에 publish 설정
// link.ts
if (Meteor.isServer) {
Meteor.publish('links', () => Links.find());
}
// Info.tsx 에 react-meteor-data의 withTracker안에 subscribe 설정
export default withTracker(() => {
const handle = Meteor.subscribe('links');
return {
links: Links.find().fetch(),
loading: !handle.ready()
}
})(Info);
두번째로 필요없는 패키지 제거
$ meteor remove insecure
deny/allow를 설정
- allow: true로 설정된 것만 가능하고 그외는 모두 불가능하다. (가능한 것이 적으면 allow 설정)
- deny: true로 서정된 것만 불가능하고 그외는 모두 가능하다. (불가능한 것이 적으면 deny 설정)
// api/links.ts의 allow 설정 예
if (Meteor.isServer) {
Meteor.publish('links', () => Links.find());
Links.allow({
insert (userId: string, doc: any) {
console.log('insert doc:', doc);
return (userId && doc.owner === userId);
},
remove(userId: string, doc: any) {
console.log('delete doc:', doc);
return (userId && doc.owner === userId);
}
});
}
사용자 로그인 및 Collection을 위한 simple schem 패키지 설치
$ meteor add accounts-password
$ meteor npm install --save bcrypt
$ meteor npm install --save simpl-schema
폴더 구조를 바꾼다.
client
imports
- api: collection
- client
- layouts: layout container unit
- pages: panel unit
- sdk: shared components, libs
- startup
- client
- server
server
Redux 환경 설정
redux 기본 패키지 설치, react-router-redux는 react-router v4로 오면서 connected-react-router 패키지로 변경되었다.
$ meteor npm install --save redux react-redux connected-react-router
$ meteor npm install --save-dev @types/react-redux
// typesafe-action 설치
$ meteor npm install --save typesafe-actions
// rxjs 기반 side effect 패키지인 redux-observable 설치
$ meteor npm install --save redux-observable rxjs
// state 성능 향상 reselect 설치
$ meteor npm install --save reselect
redux-observble 환경에서의 store 생성 및 acction, reducer, epic 개발은 다음의 블로그를 참조한다.
Elastic UI 환경 설정
먼저 final-form, react-final-form 설치
$ meteor npm install --save final-form react-final-form
styled-components, moment 패키지 설치
$ meteor npm install --save styled-components moment
elastic UI(이하 eui) 설치하기. eui는 yarn으로만 설치됨을 주의한다.
- react-final-form의 third part component로 Eui wrapper component 개발하기는 다음 블로그를 참조한다.
$ meteor npm i -g yarn
$ meteor yarn info
yarn info v1.12.3
// 기존것 제거 하고 yarn으로 다시 설치
$ rm -rf node_modules
$ rm package-lock.json
// package.json 내용 설치
$ meteor yarn
$ meteor yarn add @elastic/eui
client/main.tsx에 사용할 테마 css를 import 한다.
import '@elastic/eui/dist/eui_theme_light.css';
주의할 부분은 eui를 yarn으로 설치한 후 추가 패키지를 위해 "meteor npm install <package>" 할 경우 다시 "meteor yarn" 명령을 수행해 주어야 한다. 이 문제는 eui가 yarn만을 지원하고 meteor가 yarn에 대한 지원이 미흡한데 있지 않을까 싶다. 추정일 뿐이고 누가 해결하면 알려주시면 좋겠다.
최종 meteor run 을 수행하면 로그인 화면이 나온다. 계정을 생성하고 로그인 하면 이제 Link에 대한 CRUD를 수행할 수 있다.
'Chart 추천 서비스' 카테고리의 다른 글
| [Chart 추천 서비스] Voyager 기술 스택과 신규 서비스 SRS (0) | 2018.12.07 |
|---|---|
| [Chart 추천 서비스] Voyager 소개와 개념 (0) | 2018.12.06 |
2015-Voyager-InfoVis.pdf