spring boot + react 과정 (Eclipse)

이클립스에서 하려면 메이븐 플러그인들이 필요함 (webpack 해주는)

mysite를 spring으로 개발할때 view는 jsp와 template로 했지만 이제는 리액트 컴포넌트가 대신한다 

리액트 컴포넌트(번들) :  JSX, JS, HTML,  CSS를 이용하여 만들고 이 Bundle을 컴파일하여 뿌려주는 webpack으로 해준다 eclipse에서는 webpack를 이용하려면 그것과 관련된 메이븐 플러그인을 세팅해줘야한다

index를 쳤을때 index.js가 컴파일되어 화면에 뿌려줘야함 스프링 부트에서

webpack-dev-server : 프락시 서버

프락시가 톰캣(spring)과 연결되어있어서 프락시를 찌르면 톰캣에가서 jsp파일을 가져옴 css, js파일은 프락시 하지않고 webpack이니까  항상 css,js파일 요청이오면 react폴더를 가르키고 react폴더안의 index.js파일을 컴파일하여 가져오는데 이걸 번들링이라한다

이설정을 프락시서버에 해줌  

js를 가져올때 문법확인하고 압축하는 라이브러리들을 설치해야함

node를 먼저설치 node는 os에 javascript를 실행시켜주는 인터프리터라 생각하면 된다

spring-boot webpack 설정 과정

[1]
npm install --save-dev webpack webpack-cli webpack-dev-server



[2]
npm install --save-dev babel-core babel-loader babel-preset-env css-loader style-loader url-loader file-loader



[3]

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "src/main/react/index.js",
  "scripts": {
    "prod": "webpack --env=production",
    "dev": "webpack-dev-server --env=development",
    "start": "npm run dev"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^1.0.0",
    "file-loader": "^1.1.11",
    "style-loader": "^0.22.1",
    "url-loader": "^1.0.1",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}


[4]

npm install --save-dev mini-css-extract-plugin

1. cmd(powershell)에서 spring-boot 프로젝트가 있는곳으로 이동하여 [1], [2]을 실행한다

2. npm init을 실행시켜 package.json을 대충만든다

3. package.json 내용을 [3]으로 변경한다

node_modules에 에러가 발생하지만 이건 에러가아니니 신경안써도된다

4. javaResources 밑에 source folder로 src/main/react 만듬

5. src/main/react만들고 디플로이 어셈블리 설정창에서 react 폴더 제거

6. webpack.config 파일을 프로젝트에 붙여넣는다

7. webpack.config를 아래와 같이 수정

const path = require('path');

//const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = (env) => {

let clientPath = path.resolve(__dirname, 'src/main/react');

let outputPath = path.resolve(__dirname, 'react/out');

return {

mode: !env ? 'development' : env,

entry: {

index: clientPath + '/index.js'

},

output: {

path: outputPath,

filename: '[name].js'

},

module: {

rules: [{

test: /\.js$/,

use: [{

loader: 'babel-loader',

options: {

presets: 'env'

}

}]

}, {

test: /\.(css)$/,

use: [{

loader: MiniCssExtractPlugin.loader // css 압축시키는놈

}, {

loader: 'css-loader'

}]

}]

},

// plugins: [

// new MiniCssExtractPlugin({

// path: outputPath,

// filename: '[name].css'

// })

// ],

devServer: { // 프락시 서버 설정

contentBase: outputPath,

publicPath: '/',

host: '0.0.0.0',

port: 8081,

proxy: {

'**': 'http://127.0.0.1:8888' // spring boot는 8888로 설정했으니

},

inline: true,

hot: false

}

}

}

npm start에는 index.js가 필요

serviceWorker.unregister();

서버 실행시키는 코드

8. npm start 실행

에러시

npm install babel-loader@7 설치

다시 npm start

npm으로 리액트 설치하고 하면됨?

index.css 를 spring-boot-mysite 프로젝트 밑에 생성

@babel/preset-env : 최신버전으로 설치 

번들에는 css, json 등 다되야 완벽

위의 과정은 아직 완벽하게 된것이 아니므로 추후에 수정