[DreamChain DApp] #21 Dynamic Routing 2

이전글에 이이서 동적 라우팅 기능을 추가해 보겠습니다.

이전글 - [DreamChain DApp] #20 Dynamic Routing 1

본 내용은 Ethereum and Solidity: The Complete Developer's Guide을 참고해서 작성되었습니다.

---

이전글에서 Next.js의 기본 라우팅을 이용하지 않고 사용자 라우팅을 이용하는 것을 설정했습니다. 그러나 아직 컨트랙트 주소처럼 동적으로 변하는 웹페이지를 구성하기 위한 라우팅은 설정하지 않았습니다.

story_details 페이지

먼저 index 페이지에 나타난 DreamStory 컨트랙트 주소를 클릭했을 때, 나타낼 story_details 페이지를 아래와 같이 꾸밉니다. 많은 내용을 추가해야 해서 일단은 간단히 페이지를 만들고 다음 글에서 내용을 채우겠습니다.

// import react
import React, { Component } from 'react';
// import layout
import Layout from '../../components/layout';

// class based component
class StoryDetails extends Component {
  render() {
    return (
      <Layout>
        <h3>Story Details</h3>
      </Layout>
    )
  }
}

// export the component
export default StoryDetails;

동적 routes 맵핑

이제 동적 라우팅 맵핑을 위해 routes.js 파일을 아래와 같이 수정합니다.

// the require returns a function,
// so we need to () to invoke the function
const routes= require( 'next-routes' )();

// define a new route mapping using add() function with pattern
routes.add( '/dream_stories/:address', '/dream_stories/story_details' );

// export some helpers
module.exports= routes;

routes.add( '/dream_stories/:address', '/dream_stories/story_details' ); 부분을 유심히 보세요. routes의 add라는 함수를 이용하여 새로운 라우트 맵핑을 추가하고 있습니다. add 함수의 첫번째 인자는 라우트의 패턴입니다. 즉, 동적으로 생성하는 라우트의 와일드 카드 방식으로 패턴을 지정합니다. :address는 index 페이지에서 전달되도록 할 것입니다.

두번째 인자는 해당 라우트가 나타낼 페이지입니다. 여기서는 좀전에 만든 story_details 페이지를 설정해 줍니다. 이 때 pages폴더 기준으로 경로까지 같이 입력합니다.

index 페이지 수정

이제 index 페이지에서 "View Story Details"를 클릭했을 때, 컨트랙트 주소를 routes에 전달하기만 하면 됩니다. 아래와 같이 index.js 파일을 수정합니다.

(생략)
// render card groups to display stories
  renderStories() {
    // map calls the arugment function one time for every element inside stories array
    // fluid option is to extend the component
    const items= this.props.stories.map( address => {
      return {
        header: address,
        description: (
          <Link route={`/dream_stories/${address}`}>
            <a>View Story Details</a>
          </Link>
        ),
        meta:'5,000',
        fluid: true
      };
    });

    return <Card.Group items= {items} />;
  }
(생략)

수정된 부분은 <Link route={/dream_stories/${address}}>입니다. <a>태그를 <Link>태그로 감싸고, 라우트에 컨트랙트 주소를 전달하고 있습니다.

동적 라우팅 구현이 다 됐습니다. 그럼 테스트 해보겠습니다. 브라우저로 가서 새로고침을 합니다. 그런 후 "View Story Details"에 마우스를 올려 봅니다. 그러면 아래와 같이 브라우저 하단에 이동할 링크가 보입니다.

클릭해보면 story_details 페이지로 이동합니다. 이렇게요.

routes 추가 수정

그런데, 헤더의 "+"을 클릭하면 new_story 페이지로 이동하지 않습니다. index 페이지에서 클릭해봐도 똑같습니다. 아래와 같이 show_details 페이지가 표시될 뿐입니다.

이유는 routes 파일에서 설정한 패턴때문입니다. new_story 페이지의 링크는 http://localhost:3000/dream_stories/new_story 이것입니다. 그런데 routes 파일에 구현된 내용을 보면, 이 링크는 패턴이 일치합니다. 즉, new_story 페이지로 이동하라는 명령이 패턴으로 인식되어 story_details 페이지가 나타난 것입니다.
여기가 routes.add( '/dream_stories/:address', '/dream_stories/story_details' ); 문제가 되는 부분인데, 의외로 해결 방법은 간단합니다. routes 맵핑을 추가하면 됩니다. 그러나 주의할 것은 패턴에 대한 맵핑보다 먼저 오게끔 추가해야 합니다. 만약 패턴 라우팅 뒤에 오게 되면 동일한 문제가 발생합니다. routes.js 파일을 다음과 같이 수정해 줍니다.

// define a new route mapping using add() function with pattern
// the priority route should come first
routes
  .add( '/dream_stories/new_story', '/dream_stories/new_story' )
  .add( '/dream_stories/:address', '/dream_stories/story_details' );

추가된 부분은 .add( '/dream_stories/new_story', '/dream_stories/new_story' )입니다. 패턴 라우팅 위에 추가된 것이 보입니다. new_story라는 링크를 클릭하면 new_story 페이지를 표시하라는 내용을 추가한 것입니다.

이렇게 한 후 다시 브라우저로 가서 new_story 페이지로 이동해 봅니다. 제대로 표시되는 것을 알 수 있습니다.

마지막으로 한가지 더 해줘야 할 게 있습니다. new_story 페이지에서 새로고침을 하면 다시 story_details 페이지가 나타납니다. 라우트 맵핑이 바뀌었기 때문에 웹서버를 다시 실행시켜야 합니다. root 폴더로 이동하여 아래와 같이 실행합니다.

$ npm run dev

아마 뒤에 다운로드 페이지 표시관련해서 몇 가지 라우트 맵핑이 추가될 것입니다. 그때마다 웹서버를 다시 실행시켜야 하는 걸을 잊지 마세요.

Misc

몇가지 추가적으로 수정한 것이 있습니다. 이미 위 스크린샷에 드러났지만, index 페이지에 Story의 개수를 Footer에 표시해봤습니다. 방법은 DreamFactory 인스턴스가 불러들인 stories 인스턴스를 이용하여 단순히 lengh 프라퍼티를 이용했습니다.

(생략)
          </Link>
          { this.renderStories() }
          <h3>The number of Stories: {this.props.stories.length}</h3>
        </div>
(생략)

또, Footer를 그동안 의미없게 놔뒀는데, 조금 의미를 부여해 봤습니다.

Share your dream story and earn dream coins
Footer는 필요에 맞게 적절히 사용하면 되겠습니다. 나중에 더 중요하게 쓰일지도 모르겠네요.

---

이상으로 동적 라우팅을 구현해 봤습니다. 그렇게 복잡하지 않아서 좋네요. 웹페이지를 꾸며가면서 느끼는 점은 좀 더 예쁘게 꾸며 보고 싶은데, 아직 척척 꾸미기엔 실력이 모자람을 느낍니다. 그래도 꾸며가는 재미에 배워가는 재미가 있어서 좋습니다. 그렇죠?

오늘의 실습: Footer를 어떻게 활용하면 좋을까요?