Post List

2016년 10월 25일 화요일

react-router-tutorial #10 clean urls

이번 예제를 위하여 10-clean-urls 디렉토리로 이동한 후 npm install을 실행한다.
이제까지의 예제들을 보면 URL에 해시를 이용하고 있는 것을 확인 할 수 있다.
이 해시는 Hash History 라는 것을 이용해 라우팅을 설정하는 것고 한다.

어째든 해시를 이용하다 보니 URL이 쓰레기 같은게 붙어서 움직임으로 이를 없애는 것이 목적이다.

1. index.js 파일에 대하여 hashHistory 를 browserHistory 로 변경한다.



[binrang@binrang 10-clean-urls]$ pwd
/home/binrang/react/react-router-tutorial/lessons/10-clean-urls
[binrang@binrang 10-clean-urls]$ vi index.js
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, hashHistory, IndexRoute } from 'react-router'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'
import Repo from './modules/Repo'
import Home from './modules/Home'
render((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Home}/>
      <Route path="/repos" component={Repos}>
        <Route path="/repos/:userName/:repoName" component={Repo}/>
      </Route>
      <Route path="/about" component={About}/>
    </Route>
  </Router>
), document.getElementById('app'))

이 파일을 아래와 같이 수정한다.

import React from 'react'
import { render } from 'react-dom'
// hashHistory를 browserHistory로 변경
import { Router, Route, browserHistory, IndexRoute } from 'react-router'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'
import Repo from './modules/Repo'
import Home from './modules/Home'
render((
  <Router history={browserHistory}>
  {/* hashHistory를 browserHistory 로 변경 */}
    <Route path="/" component={App}>
      <IndexRoute component={Home}/>
      <Route path="/repos" component={Repos}>
        <Route path="/repos/:userName/:repoName" component={Repo}/>
      </Route>
      <Route path="/about" component={About}/>
    </Route>
  </Router>
), document.getElementById('app'))

저장을 하고 웹을 띄워서 확인해 보자.

[binrang@binrang 10-clean-urls]$ npm start
> tutorial@1.0.0 start /home/binrang/react/react-router-tutorial/lessons/10-clean-urls
> webpack-dev-server --inline --content-base .
events.js:160
      throw er; // Unhandled 'error' event
      ^
Error: listen EADDRINUSE 127.0.0.1:8080
    at Object.exports._errnoException (util.js:1026:11)
    at exports._exceptionWithHostPort (util.js:1049:20)
    at Server._listen2 (net.js:1257:14)
    at listen (net.js:1293:10)
    at net.js:1403:9
    at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:62:16)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:81:10)
npm ERR! Linux 3.10.0-229.el7.x86_64
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "start"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! tutorial@1.0.0 start: `webpack-dev-server --inline --content-base .`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the tutorial@1.0.0 start script 'webpack-dev-server --inline --content-base .'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the tutorial package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack-dev-server --inline --content-base .
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs tutorial
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls tutorial
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR!     /home/binrang/react/react-router-tutorial/lessons/10-clean-urls/npm-debug.log

이런... 모지?. 이 에러는 무엇이냐... 별거 아니다.. webpack 서버가 이미 구동되어 있다라는 것이다. 아마 전에 했던 예제에서 띄워놓은 것을 깜박하고 놔두었나보다..

프로세스를 확인하고 죽인 후 다시 실행하면 별일 없이 뜬다.
홈화면... 익숙하다.

클릭해서 들어가면 URL이 깔끔하다.

보기 좋군...

깔끔하다..

URL란에 직접 입력하고 쳤더니..헐.. 이런 에러가...

이 부분을 해결해 보자.. 이 부분은 서버쪽의 환경을 변경해야 한다.

[binrang@binrang 10-clean-urls]$ pwd
/home/binrang/react/react-router-tutorial/lessons/10-clean-urls
[binrang@binrang 10-clean-urls]$ vi package.json 
{
  "name": "tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --inline --content-base ."
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-router": "^2.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.5.1",
    "babel-loader": "^6.2.2",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "http-server": "^0.8.5",
    "webpack": "^1.12.13",
    "webpack-dev-server": "^1.14.1"
  }
}

이 부분에서 start 부분을 아래와 같이 수정한다.

"start": "webpack-dev-server --inline --content-base . --history-api-fallback"

그 다음에 index.html을 아래와 같이 수정한다.
index.css 를 /index.css 로 bundle.js를 /bundle.js 로 변경하자.

[binrang@binrang 10-clean-urls]$ vi index.html
<!doctype html public="storage">
<html>
<meta charset=utf-8/>
<title>My First React Router App</title>
<!-- index.css -> /index.css -->
<link rel=stylesheet href="/index.css">
<div id=app></div>
<!-- bundle.js -> /bundle.js -->
<script src="/bundle.js"></script>

이제 웹을 다시 구동시켜 보자.

URL을 직접 입력해도 화면이 정상적으로 출력이 된다.

이제 이 예제의 목표를 달성했다.

참조 URL : 10-clean-urls