0. React 셋팅 관련 고민 ( SPA vs Server Rendering with Spring )

React 의 장점 중 하나는 Server rendering 인데??

 그런데 create react app ( https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html ) 은 뭔가 SPA 를 위한 셋팅이라는 느낌이 강하게 든다. ( 제발 누가 아니라고 말해주길... ㅜㅠㅜㅠㅜㅠ ) 근데 한번 더 나아가 생각해보면 당연하지 않은가...? 서버 렌더링을 하려면 당연히 서버 프레임웍 또는 언어 등에 의존할 수 밖에 없고, 그렇다면 script 엔진을 통한 렌더링은 해당 프레임웍에서 해주건 안되면 Node 등을 통해서 렌더링을 해야하니, 그 프로젝트의 구조가 당연히 동일할 순 없을테니, 보일러 플레이트가 존재하기 힘들테고... ( 물론 각 프레임웍마다 누군가 잘 만들어 놓은게 또 등장하겠지만... ㅋㅋ )

 여하튼 이번에는 일단 create-react-app 을 통한 SPA 로 프로젝트를 구성해 보려 한다. 

하지만 다음번에 Server Rendering with Spring-boot 를 하려할 때, 참조할만한 소스를 아래 공유한다.

 - https://github.com/iolo/jscon-springboard-demo

 - https://github.com/iolo/spring-template-bench

create-react-app 이용하기

일단 eject 을 하고서 수정해야 하는것이 2가지 정도 있다. 사실 sass나 redux, react router 등에 대한 설정은 뒤에 다루도록 하겠다. ( 아마도 추가적인 기능이라는 느낌이 든다. 기본 설정에는 위와 같은 내용들은 포함이 안되는 것이 맞기에.. 즉, 프로젝트 성향 / 설계자들의 취향 등마다 다른 부분이기에 create-react-app에 포함이 안되지 않았을까 하는 느낌이 든다. )

npm run start 의 내용을 차근 차근 뜯어보면, 그 중에 runDevServer function 안에 devServer object 를 만들고 서버를 실행시키는 부분이 있다. 이 부분에서 proxy 를 설정하고, webpack-dev-server client entry point 를 설정해 줘야 한다.

개발용 express 서버 포트 / proxy 설정 변경

webpack.config.dev.js

module.exports = {
  devtool: 'eval',
  entry: [
    require.resolve('webpack-dev-server/client') + '?http://0.0.0.0:8081',
    require.resolve('webpack/hot/dev-server'),
    path.join(srcPath, 'index')
  ],

start.js

new WebpackDevServer(compiler, {
  historyApiFallback: true,
  hot: true, // Note: only CSS is currently hot reloaded
  publicPath: config.output.publicPath,
  quiet: true,
  proxy: {
      "*": "http://localhost:8080"
  }
})

HMR ( Hot Module Replace ) 설정

$ npm install --save-dev react-hot-loader

webpack.config.dev.js

    module:{
        loaders: [
            {
                test: /.js$/,
                loader: 'babel',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react'],
                    plugins: ["react-hot-loader/babel"]
                }
            }
        ]
    },