9. React 구성하기

Previous8. Maven -> Gradle 변경작업 Next10. SpringSecurity 인증 후 로그인 객체는 어떻게?

Last updated 5 years ago

Was this helpful?

9. React 구성하기

이번에는 SpringBoot와 React를 이용해 볼 예정이다.

환경 = OSX , JAVA8, Visual Studio code

VScode에 대해 환경을 설치하는 방법은 하단에 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 대상이므로 윈도우는 위 부분을 수정해주어야 됨!!

빌드가 이루어 졌기 때문에 이지 우리가 만든 페이지를 확인할 수 있다.

해당 경로로 들어가면 작성한 jsx파일로 작성한 모습이 보인다.

PS

Template에 조언사항을 적어놓았습니다. 확인하시면 좀 더 쉽게 이해하실 수 있습니다.

Gyoogle 님의 글에서 OSX에서 사용할 때로 변경해 놓았습니다.

Window를 사용하시는 분은 Gyoogle에서 참고해주세요 :)

Previous8. Maven -> Gradle 변경작업 Next10. SpringSecurity 인증 후 로그인 객체는 어떻게?

Last updated 5 years ago

Was this helpful?

이번에는 SpringBoot와 React를 이용해 볼 예정이다.

환경 = OSX , JAVA8, Visual Studio code

VScode에 대해 환경을 설치하는 방법은 하단에 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;

@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:
Page1Page:

해당 경로로 들어가면 작성한 jsx파일로 작성한 모습이 보인다.

PS

Template에 조언사항을 적어놓았습니다. 확인하시면 좀 더 쉽게 이해하실 수 있습니다.

Gyoogle 님의 글에서 OSX에서 사용할 때로 변경해 놓았습니다.

Window를 사용하시는 분은 Gyoogle에서 참고해주세요 :)

참고 사이트 :
에러가 발생할 시 대처법 :
Template 다운로드 :