# 9. React 구성하기

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

환경 = OSX , JAVA8, Visual Studio code

VScode에 대해 환경을 설치하는 방법은 [gradle\_error\_solution](https://github.com/Djunnni/Springboot-Summary/blob/master/Appendix/gradle_error_solution.md) 하단에 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 환경 추가

1. 터미널에서 'npm init' >> package.json 생성 (질문들이 나오는데 전부 enter)
2.  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. 서버 코드 개발

1.  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>

&#x20;${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](http://localhost:8080/main.html)
* Page1Page: [http://localhost:8080/page1.html](http://localhost:8080/page1.html)

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

## PS

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

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

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

* 참고 사이트 : [Gyoogle](https://kim6394.tistory.com/226)
* 에러가 발생할 시 대처법 : [SpringBoot React 에러 해결방법](https://github.com/Djunnni/Springboot-Summary/blob/master/Appendix/react_error_solution.md)
* Template 다운로드 : [SpringBoot React Template](https://github.com/Djunnni/Springboot-Summary/blob/master/Template/springboot-react-template.zip)
