spectrum learns to dig

요즘은 다들 javascript 환경을 React 하나만을 위해 구성하는 경우가 꽤 많은데 사실 Meteor는 상당히 유연한 javascript platform이며 Meteor를 사용하는 Vulcan 역시도 그렇다. 이번엔 따로 package를 만들지 않고 그냥 vulcan 프로젝트 위에서 해보자. import를 써서 빈틈없이 의존 관계를 명시적으로 정의하는 방법 외에도 어플리케이션 구조에 따른 load-order( https://guide.meteor.com/structure.html#load-order )를 가지고 자동으로 소스코드를 병합하는 방식도 지원한다. (원래는 이게 기본이었음) 작동하는 방식은 간단한데 /client 로 시작하면 client에서 실행. /server 로 시작하면 server 에서 실행하는 것을 기본으로 HTML 템플릿 파일이 항상 먼저 lib/ 디렉토리를 그 다음으로 path가 깊은 곳을 그 다음으로 파일은 전체 경로명에서 알파벳 순으로 main*.* 인 파일은 마지막에 불러오는 규칙을 가지고 있다. 만일 import를 꼭 쓰고 싶으면 import/ 디렉토리 안에 두면 된다. 이 규칙에 따라 이전에 다루었던 요소들을 정리하여 디렉토리를 구성을 다음과 같이 해보았다. \client \lib   \components     \Posts       PostsListComponent.coffee   \lib     \lib       global.coffee     \models       \Posts         \imports           schema.coffee           ..resolver.coffee, mutation.coffee...         collection.coffee         permissions.coffee   routes.coffee \server 의도하고자 하는 바는 이렇다. component, models 과 같은 기본 요소들은 c

버전 1.5 기준 package.js에서 Package.onUse 에 새 패키지를 추가했는데 인식하지 못하는 경우가 있다. Package.onUse((api) => {   api.use([     'vulcan:core',     'vulcan:forms',     'vulcan:accounts' /* <-- 추가함! */   ]); ... } 내부패키지건 원격패키지건 안되는 안된다. 이럴 때 meteor add 후 meteor remove 해도 되지만 더 간단한 방법이 있다. meteor update vulcan:accounts 이렇게 update 해주는 방법이 있다. .meteor/package 파일을 건들지 않아서 좋다. 그래도 역시 좋지 않다. Meteor 스럽지 않다. https://github.com/meteor/meteor/issues/7721  현재 1.5.2에서도 해결이 안되었군요. 해결되어 적용되면 다시 글 올리겠습니다.

Posts를 만들면서 약간 아쉬웠던 부분은 Delete 부분에 대해서 너무 SmartForm에 의지하여 간단하게 넘어가긴 했다. showRemove={true} 옵션을 통해 한줄 찍 긋고 Delete라고 나오는 부분을 클릭하는 것도 좋지만 목록에서 지우거나 상세 보기에서 지울 일도 분명 있을 것이다. 역시나 이것도 목록(ex. withList)을 가져올 때 처럼 HoC(Higher-Order Component)를 사용한다. http://docs.vulcanjs.org/mutations.html#Remove-Mutation  부분을 참조하자. 이번에 구현할 것은 목록마다 remove 버튼을 달고 버튼을 누르면 이벤트를 받아 삭제하도록 구현해보자. import { registerComponent, withList, withRemove } from 'meteor/vulcan:core'; 먼저 해야할 것은 withRemove를 import에 추가하는 것이다. 그러면 withRemove를 registerComponent시 사용할 수 있다. withList와 함께 withRemove도 추가하자. registerComponent('PostsListComponent', PostsListComponent, [   withList, {     collection: Posts   }], [   withRemove, {     collection: Posts   } ]); withRemove도 withList와 동일하게 collection만 지정하면 된다. 준비는 다 되었다. withRemove를 붙여서 this.props는 removeMutation을 갖게 되었다. removeMutation의 사용법은 다음과 같다. this.props.removeMutation({   documentId: documentId }).then(/* success */).catch(/* error */);

마지막으로 수정과 삭제를 구현해보면 목록 조회(List), 상세 조회, 쓰기, 수정, 삭제까지 모든 필요한 요소를 아우를 수 있을 것이다. 감이 좋은 분들은 눈치 챘을지도 모르겠지만 사실 수정이란 건 UI면에서 볼때 이미 양식이 채워져있는 신규 쓰기와 별반 다르지 않다. 먼저 해야할 것은 역시나 Component를 만드는 일이다. $ vulcan g component ? Package name spectrum-simplebb ? Component name PostsEditComponent ? Component type Class Component ? Register component Yes    create packages/spectrum-simplebb/lib/components/PostsEditComponent.jsx  conflict packages/spectrum-simplebb/lib/components/index.js ? Overwrite packages/spectrum-simplebb/lib/components/index.js? overwrite     force packages/spectrum-simplebb/lib/components/index.js PostsEditComponent를 만들었다. route도 만들자. /posts/edit/:id 이렇게 경로를 만들면 좋겠다. 그러고보니 이전 글에서 만든 상세보기도 /posts/view/:id 형식으로 만들껄 그랬다. $ vulcan g route ? Package name spectrum-simplebb ? Route name postsEdit ? Route path /posts/edit/:_id ? Component name PostsEditComponent ? Layout name  conflict packages/spectrum-simplebb/lib/modules/routes.js ? Overwrite packages/spectrum-simplebb/lib/modules/

Route들끼리 연결에 대해 알아보자고 지난 시간에 말씀드렸는데 Vulcan에선 React-router( https://reacttraining.com/react-router/web/api/Link )를 사용하므로 그 규칙을 그대로 따르면 됩니다. <Link to='경로명'>표시할 이름</Link> 형식으로 씁니다. PostsSingleComponent 에 <Link to='/'>to Home</Link> 를 추가하여 처음으로 돌아가도록 합시다. import React, { Component } from 'react'; import { Link } from 'react-router'; import { registerComponent, withDocument } from 'meteor/vulcan:core'; import Posts from "../modules/posts/collection.js"; class PostsSingleComponent extends Component {   render () {     return (       <div>         <h1>{this.props.document.title}</h1>         <pre>           {this.props.document.body}         </pre>         <Link to='/'>to Home</Link>       </div>     );   } } registerComponent('PostsSingleComponent', PostsSingleComponent, [withDocument, {   collection: Posts }]); export default Post

지금까지 Posts 의 목록을 조회하고 생성하는 걸 해보았습니다. 목록을 봤으니 목록 중 하나를 선택하여 상세 내용을 보고 수정/삭제를 할 수 있으면 데이터 처리 한 바퀴를 온전히 돌 수 있다고 볼 수 있습니다. 먼저, 상세보기를 만들어봅시다. 시작은 Component부터 하도록 하지요. PostsViewComponent라는 걸 만들어 봅시다. $ vulcan g component ? Package name spectrum-simplebb ? Component name PostsViewComponent ? Component type Class Component ? Register component Yes    create packages/spectrum-simplebb/lib/components/PostsViewComponent.jsx  conflict packages/spectrum-simplebb/lib/components/index.js ? Overwrite packages/spectrum-simplebb/lib/components/index.js? overwrite this and all others     force packages/spectrum-simplebb/lib/components/index.js 슥삭 만들고 Route를 만들어 URL을 통한 접근을 시도해봅니다. Route이름은 postsView라고 하고 /posts/:_id 와 같은 형식으로 접근하게 해보죠. $ vulcan g route ? Package name spectrum-simplebb ? Route name postsView ? Route path /posts/:_id ? Component name PostsViewComponent ? Layout name  conflict packages/spectrum-simplebb/lib/modules/routes.js ? Overwrite packages/spectrum-simplebb/