[Spring Boot + React] 개발환경 연동 (build)

728x90

수동 빌드

1. 리액트를 빌드

npm run build

리액트 빌드하는 명령어

serve -s build

react를 확인하려고 만든 가짜 서버

2. 빌드 된 파일 확인

build로 생성된 폴더 확인

static 폴더, favicon.ico, index.html 사용 할 예정

build - staitc 폴더 내부
css, js가 알아서 다운그레이드 되어 생성됨

index.html 파일
빌드가 되면 압축되어 하나의 파일로 만들어지며, js, css 파일의 위치 확인

+ final project 꿀팁

final project는 리액트가 아닌 inline 방식으로 템플릿을 만들었기 때문에
빌드를 할 때마다 적용해줘야 함
그래서 리액트의 index.html(빌드될 파일)에 템플릿을 적용할 구문을 적어 빌드가 될때마다 알아서 적용이 되게 만듦

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="icon" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="Web site created using create-react-app"/>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f5a9e259185c0eb74a0cdd1200970cdc"></script>
<title>React App</title>
<script defer="defer" src="/static/js/main.abac7ade.js"></script>
<link href="/static/css/main.c4ade672.css" rel="stylesheet">
</head>

<th:block th:replace="~{./layout/user_layout :: function(~{:: .fragment})}">
<body class="fragment">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</th:block>

</html>

3. spring boot 확인 후 build된 파일 넣기

spring boot 폴더에 집어 넣는 작업
templates 폴더에 index.html 파일 복사
재빌드 할 경우 오버라이딩 하면 됨
static 폴더에 빌드된 static, favison.ico 넣기

4. Controller 연결

index.html을 연결해 줄 HomeController에 들어가 getMapping으로 연결
HomeController는 영향 안받는 전역 컨트롤러 (프로젝트마다 명칭 달라질 수 있음)
원래는 @getMapping("/index") 이렇게만 적어줘도 되나, 라우트를 엉키게 만들어서 하나하나 다 연결해줬다..^^

+ 리액트로 라우트 설정시

route는 한 가지에서 뻗어나와야 하며, 컨트롤러에서 index를 연결했을 때 나오는 main page가 있어야 함
위의 사진(final project)은 수정을 하지 않았지만
수정하게 된다면 /tab - /about, /history, /contact 를 감싸고 있고, /about이 main page가 될 듯

+ 수정1

기존의 @getMapping시 main만 연결해놔서 about, schedule에서 새로고침하면 에러 발생

1. /tab으로 about, history, contact 묶어줌

- App.js

{/* 회사 소개 페이지 */}
      <Route path='/tab' element={<Tab />}>
        <Route path='about' element={<About_Y4J />} />
        <Route path='history' element={<Y4J_history />} />
        <Route path='contact' element={<Y4J_contact />} />
      </Route>

- Tab.js

import { Fragment } from "react";
import { Link, Outlet } from "react-router-dom";
import styled1 from './css/Tab.module.css';

const Tab = () => {

    return(
        <Fragment>
        {/* TAB */}
            <div className={styled1.logo_name}>
                {/* <p>Y4J</p> */}
            </div>
            <div className={styled1.company_tab}>
                <ul>
                    <Link to={'/tab/about'}><li>ABOUT</li></Link>
                    <Link to={'/tab/history'}><li>HISTORY</li></Link>
                    <Link to={'/tab/contact'}><li>CONTACT</li></Link>
                </ul>
                <Outlet/>
            </div>
        </Fragment>
    )
}

export default Tab;

2. controller에서 @getMapping() 재설정

// react build 파일 연결
	@GetMapping({"/tab/*", "/artist/*",
		         "/artist/nj/artistDetail_newjeans/*", "/artist/bp/artistDetail_Bp/*", "/artist/ive/artistDetail_ive/*",
		         "/artist/ldh/artistDetail_ldh/*", "/artist/csb/artistDetail_csb/*"
				})
	public String about() {
		return "index";
	}

+ 수정2

아예 하나로 묶어서 그것만 매핑할 수 있는 방법은 없을까?

@GetMapping("/") 이걸 이미 쓰고 있어서 방법은 없을 것 같음

= 리액트 부분에서는 뻗어나올 메인 페이지가 없음

자동 빌드

재빌드 할 때마다 파일을 넣어주고, 수정해줘야 하기 때문에 그 작업을 자동으로 할 수 있게끔 만들어주는 자동 빌드는 추후 수정 예정