vulcanJS - 10. Posts Update/Delete

마지막으로 수정과 삭제를 구현해보면 목록 조회(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/routes.js? overwrite
    force packages/spectrum-simplebb/lib/modules/routes.js

Route도 만들었다.

그렇다면 다음은 /posts/edit/:_id로 들어올 진입점을 만들자. PostsSingleComponent가 괜찮아보인다.
<Link to={`/posts/edit/${this.props.documentId}`}>Edit</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 (
      this.props.loading &&
        <div />
      ||
        <div>
          <h1>{this.props.document.title}</h1>
          <pre>
            {this.props.document.body}
          </pre>
          <div>
            <Link to={`/posts/edit/${this.props.documentId}`}>Edit</Link>
          </div>
          <div>
            <Link to='/'>to Home</Link>
          </div>
        </div>
    );
  }
}
registerComponent('PostsSingleComponent', PostsSingleComponent, [withDocument, {
  collection: Posts
}]);
export default PostsSingleComponent;

상위 Component인 PostsViewComponent가 _id를 documentId로 전달하므로 같은 걸 사용했다.

목록>상세>수정까지 진입하는 길은 다 만들어졌다.

수정 서식을 보여주도록 PostsEditComponent를 고쳐보자.

사실 PostsEditComponent는 PostsNewComponent와 거의 같다.

단 하나 차이점이 있다면 SmartForm에 documentId를 지정하는 것만이 다르다.

즉, SmartForm Component는 documentId를 지정할 경우 수정을 하고 없을 경우 새로운 Document를 생성한다고 보면된다.

import React, { Component } from 'react';
import { registerComponent, Components } from 'meteor/vulcan:core';
import Posts from  "../modules/posts/collection.js";
class PostsEditComponent extends Component {
  render () {
    return (
      <div>
        <Components.SmartForm
          collection={Posts}
          documentId={this.props.params._id}
        />
      </div>
    );
  }
}
registerComponent('PostsEditComponent', PostsEditComponent);
export default PostsEditComponent;

날로 먹는다고 봐야 한다.

아직 날로 먹는 건 끝이 아니다.

SmartForm은 collection과 documentId 말고도 몇 가지가 더 있기 때문이다.

지금 현재 구현은 수정이라는 기능엔 충실하지만 실제로 사용자는 수정을 완료한 뒤에 멀뚱하게 그자리에 있는 것을 원하지 않을 것이다.

successCallback을 추가하여 수정 완료 시 상세 조회 화면으로 돌아가도록 해 보자.

import React, { Component } from 'react';
import { registerComponent, Components } from 'meteor/vulcan:core';
import Posts from  "../modules/posts/collection.js";
class PostsEditComponent extends Component {
  render () {
    return (
      <div>
        <Components.SmartForm
          collection={Posts}
          documentId={this.props.params._id}
          successCallback={
            ()=> this.props.router.push(`/posts/${this.props.params._id}`)
          }
        />
      </div>
    );
  }
}
registerComponent('PostsEditComponent', PostsEditComponent);
export default PostsEditComponent;

router객체 안에 있는 push를 사용하여 해당 글로 다시 돌아가보았다.

신규 작성에 비해 수정을 위해서 우리가 해준 건 딱 두개 밖에 없다.

1. documentID 를 추가했고
2. 수정 후 callback을 구현했다.

그러면 이젠 마지막 관문인 삭제 구현을 해야하는데 이게 의외로 싱겁다.

SmartForm에 속성 두개만 추가하면 된다.

1. showRemove={true} 를 추가하여 삭제 기능을 화면에 보여주고
2. removeSuccessCallback을 구현하여 삭제 후 callback을 구현하면 된다.

한번 해보자.

먼저 removeSuccessCallback 후엔 이미 자신이 사라진 이후니까 successCallback처럼 자신의 글로 되돌아 갈 수 없다.

목록으로 가도록 해주자.

          removeSuccessCallback ={

            ()=> this.props.router.push(`/`)

          }

이 정도가 적당할 것 같다.

전부 모아보자.

import React, { Component } from 'react';
import { registerComponent, Components } from 'meteor/vulcan:core';
import Posts from  "../modules/posts/collection.js";
class PostsEditComponent extends Component {
  render () {
    return (
      <div>
        <Components.SmartForm
          collection={Posts}
          documentId={this.props.params._id}
          successCallback={
            ()=> this.props.router.push(`/posts/${this.props.params._id}`)
          }
          showRemove={true}
          removeSuccessCallback ={
            ()=> this.props.router.push(`/`)
          }
        />
      </div>
    );
  }
}
registerComponent('PostsEditComponent', PostsEditComponent);
export default PostsEditComponent;

showRemove와 removeSuccessCallback을 구현하였다.

Delete 기능이 아래 달라붙었다.

버튼 같지 않지만 그거야 스타일링 하면 되고 클릭해보자.

확인 alert이 뜨고.

홈으로 이동 후 삭제가 잘 이루어졌다.

갑자기 수정/삭제가 너무 허망하게 구현이 된 것 같은 느낌은 있지만 여기까지 필요한 최소한의 기능은 모두 구현해보았다고 할 수 있다.

이제 나머지는 디테일을 위한 공부!

Vulcan 메뉴얼은 당연히 읽고

http://docs.vulcanjs.org/

Meteor 도 봐두고

https://docs.meteor.com/

GraphQL도 익히고

http://graphql.org/

React도 보고

https://facebook.github.io/react/

즐거운 공부 뿐이다. 즐기자.