Spring x react 연동하기

취미생활/react|2018.11.27 16:26

에디터 vscode 기준


2018/11/23 - [취미생활/알쓸기능] - vscode spring 프로젝트 생성하기


이전 vscode에 설치한 spring에 react를 연동시켜보았다.

이글은 전적으로 이동련님 블로그에서 보고 배웠다.


1. react 라이브러리 설치 


터미널 Ctrl + Shift + '


npm i react react-dom
npm i @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader style-loader webpack webpack-cli -D


package.json에 의존성 추가확인



2. webpack 설정


루트에 webpack.config.js 파일 생성


var path = require('path'); module.exports = { context: path.resolve(__dirname, 'src/main/jsx'), entry: { main: './MainPage.jsx', page1: './Page1Page.jsx' }, devtool: 'sourcemaps', cache: true, output: { path: __dirname, filename: './src/main/webapp/js/react/[name].bundle.js' }, mode: 'none', module: { rules: [ { test: /\.jsx?$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: [ '@babel/preset-env', '@babel/preset-react' ] } } }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] } };


3. Controller 작성


 지난번 HomeController.java 파일에 추가함. 

class import - Alt + Shift + o 


	@GetMapping("/{name}.html")
    public String page(@PathVariable String name, Model model){
        model.addAttribute("pageName", name);
        return "page";
    }



4. 폴더생성

src/main/jsx 

src/java/webapp/css

src/java/webapp/jsp




5. .../jsp/page.jsp 


	<%@ page language="java" contentType="text/html; charset=utf-8"
	%>
	
	
		
			${pageName}
		
		 
		
			


 .../css/custom.css

.main { font-size: 24px; border-bottom: solid 1px black; }
.page1 { font-size: 14px; background-color: yellow; }


.../jsx/MainPage.jax


import '../webapp/css/custom.css';
 
import React from 'react';
import ReactDOM from 'react-dom';
 
class MainPage extends React.Component {
 
    render() {
        return 
메인 페이지
; } } ReactDOM.render(, document.getElementById('root'));




6. webpack watch


개발시 -d , 운영시 -p


node_modules\.bin\webpack --watch -d


태그 : ,

댓글(0)