9. React 구성하기
이번에는 SpringBoot와 React를 이용해 볼 예정이다.
환경 = OSX , JAVA8, Visual Studio code
VScode에 대해 환경을 설치하는 방법은 gradle_error_solution 하단에 Visual Studio Code 설치법에 대해 언급했다.(Maven도 가능하니 따라서 하면 됨)
스프링 부트를 통해 서버 API 구축, UI를 REACT에서 담당
Front-end : React
Back-end : SpringBoot
이제 SpringBoot 웹 프로젝트 생성해보자!
1. code 에서 ++p 누른다.
spring initializr: Generate Maven 생성
Java 선택
Package , Artifact id 설정
SpringBoot Version 선택
Dependency : DevTools, Spring Web Starter Web 선택
DevTools : 코드가 변경되면 자동으로 Rebuild를 지원해준다.
생성
2. Project를 한번 실행해 본다.
JSP 와 JSTL을 사용하기 위해 라이브러리를 추가
pom.xml > dependencies 내부에
<!-- https://mvnrepository.com/artifact/org.apache.tomcat/tomcat-jasper -->
<dependency>
<groupId>org.apache.tomcat</groupId>
<artifactId>tomcat-jasper</artifactId>
<version>9.0.24</version>
</dependency>
<!-- https://mvnrepository.com/artifact/javax.servlet.jsp.jstl/jstl -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<scope>provided</scope>
</dependency>
SpringBoot를 실행해 본다. 방법: vscode terminal에서 'mvn spring-boot:run' 입력하면 서버가 실행됨
3. React 환경 추가
터미널에서 'npm init' >> package.json 생성 (질문들이 나오는데 전부 enter)
react 의존 라이브러리 설치
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
4. webpack 설정
webpack을 통해 react 개발 할 때, 자바스크립트 기능과 jsp에 포함할 .js파일 생성가능 프로젝트의 루트경로에 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']
}]
}
};
코드 내용
React 소스 경로를 src/main/jsx로 설정
MainPage와 Page1Page.jsx 빌드
빌드 결과 js 파일들을 src/main/webapp/js/react아래 [페이지 이름].bundle.js 로 설정
5. 서버 코드 개발
MainController.java 파일을 생성한다.
~~~
package com.example.demo.Controller;
import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PathVariable;
@Controller public class MainController{
@GetMapping("/{name}.html")
public String page(@PathVariable String name,Model model){
model.addAttribute("pageName",name);
return "page";
}
}
2. src/main 에 webapp 폴더를 만들고 webapp 안에 jsp 와 css 폴더를 만든다.
src main webapp jsp css
src/main/webapp/jsp/page.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"%> <!doctype html>
${pageName}
<body>
<div id="root"></div>
<script src="js/react/${pageName}.bundle.js"></script>
</body>
</html>
src/main/webapp/css/custom.css
.main { font-size: 1.5em; border-bottom:solid 1px black; } .page1 { font-size:0.8em; background-color:orange; }
### 6. 클라이언트 코드 개발
src/main에 jsx 폴더를 만들고 MainPage.jsx 와 Page1Page.jsx 2가지 jsx 파일을 만든다.
src/main/jsx/MainPage.jsx
// custom.css 파일 import import '../webapp/css/custom.css';
import React from 'react'; import ReactDom from 'react-dom';
class MainPage extends React.Component { render(){ return demo 메인페이지; } } ReactDom.render(,document.getElementById('root'));
src/main/jsx/Page1Page.jsx
// custom.css 파일 import import '../webapp/css/custom.css';
import React from 'react'; import ReactDom from 'react-dom';
class Page1Page extends React.Component { render(){ return demo page1페이지; } } ReactDom.render(,document.getElementById('root'));
이제 우리가 만든 클라이언트 페이지를 서버 구동 후 볼 수 있도록 빌드 시켜야 한다.
### 7. 클라이언트 스크립트 빌드시키기
jsx 파일을 수정할 때 마다 자동적으로 빌드를 시켜주는 것이 필요.
webpack의 watch 명령을 통해 가능하도록 만들 수 있다.
vscode terminal에서 아래와 같이 입력
node_modules/.bin/webpack --watch -d -d : 개발 시 -p : 운영 시
터미널에 정상적으로 빌드되는 걸 확인 할 수 있을 것이다.
( src/main/webapp/js/react 아래에 bundle.js 가 생성됨을 확인하면 됨)
이제 'package.json'에 script를 등록하면 간편하게 빌드와 서버실행을 할 수 있다.
"script": { "test": "echo \"Error: no test specified\" && exit1", "start": "mvn spring-boot:run", "watch": "node_modules/.bin/webpack --watch -d" }
~~~ 이제 빌드를 할 때, 'npm run watch'로 하면 되고, 'npm run start'로 서버를 실행 할 수 있다.
해당버전은 OSX 대상이므로 윈도우는 위 부분을 수정해주어야 됨!!
빌드가 이루어 졌기 때문에 이지 우리가 만든 페이지를 확인할 수 있다.
MainPage: http://localhost:8080/main.html
Page1Page: http://localhost:8080/page1.html
해당 경로로 들어가면 작성한 jsx파일로 작성한 모습이 보인다.
PS
Template에 조언사항을 적어놓았습니다. 확인하시면 좀 더 쉽게 이해하실 수 있습니다.
Gyoogle 님의 글에서 OSX에서 사용할 때로 변경해 놓았습니다.
Window를 사용하시는 분은 Gyoogle에서 참고해주세요 :)
참고 사이트 : Gyoogle
에러가 발생할 시 대처법 : SpringBoot React 에러 해결방법
Template 다운로드 : SpringBoot React Template
Last updated
Was this helpful?