728x90
1. 수동 빌드
1.1. 1. 리액트를 빌드
<html />npm run build
- 리액트 빌드하는 명령어
<html />serve -s build
- react를 확인하려고 만든 가짜 서버
1.2. 2. 빌드 된 파일 확인
- build로 생성된 폴더 확인
- static 폴더, favicon.ico, index.html 사용 할 예정
- build - staitc 폴더 내부
- css, js가 알아서 다운그레이드 되어 생성됨
- index.html 파일
- 빌드가 되면 압축되어 하나의 파일로 만들어지며, js, css 파일의 위치 확인
+ final project 꿀팁
더보기
- final project는 리액트가 아닌 inline 방식으로 템플릿을 만들었기 때문에
빌드를 할 때마다 적용해줘야 함 - 그래서 리액트의 index.html(빌드될 파일)에 템플릿을 적용할 구문을 적어 빌드가 될때마다 알아서 적용이 되게 만듦
<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>
1.3. 3. spring boot 확인 후 build된 파일 넣기
- spring boot 폴더에 집어 넣는 작업
- templates 폴더에 index.html 파일 복사
재빌드 할 경우 오버라이딩 하면 됨 - static 폴더에 빌드된 static, favison.ico 넣기
1.4. 4. Controller 연결
- index.html을 연결해 줄 HomeController에 들어가 getMapping으로 연결
- HomeController는 영향 안받는 전역 컨트롤러 (프로젝트마다 명칭 달라질 수 있음)
- 원래는 @getMapping("/index") 이렇게만 적어줘도 되나, 라우트를 엉키게 만들어서 하나하나 다 연결해줬다..^^
1.5. + 리액트로 라우트 설정시
- route는 한 가지에서 뻗어나와야 하며, 컨트롤러에서 index를 연결했을 때 나오는 main page가 있어야 함
- 위의 사진(final project)은 수정을 하지 않았지만
수정하게 된다면 /tab - /about, /history, /contact 를 감싸고 있고, /about이 main page가 될 듯
1.6. + 수정1
- 기존의 @getMapping시 main만 연결해놔서 about, schedule에서 새로고침하면 에러 발생
1. /tab으로 about, history, contact 묶어줌
- App.js
<javascript />
{/* 회사 소개 페이지 */}
<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
<javascript />
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() 재설정
<java />
// 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("/") 이걸 이미 쓰고 있어서 방법은 없을 것 같음
= 리액트 부분에서는 뻗어나올 메인 페이지가 없음
2. 자동 빌드
- 재빌드 할 때마다 파일을 넣어주고, 수정해줘야 하기 때문에 그 작업을 자동으로 할 수 있게끔 만들어주는 자동 빌드는 추후 수정 예정
728x90
'Devops' 카테고리의 다른 글
| [인프런] 개발자를 위한 쉬운 도커 - 실무 적용, 컴포즈(Compose), 컨테이너 빌드 파이프라인 자동화 (0) | 2024.02.19 |
|---|---|
| [인프런] 개발자를 위한 쉬운 도커 - 컨테이너 애플리케이션 구성, 도커 네트워크, 스토리지와 볼륨 (0) | 2024.02.13 |
| [인프런] 개발자를 위한 쉬운 도커 - 이미지 레지스트리, 빌드 (0) | 2024.02.13 |
| [인프런] 개발자를 위한 쉬운 도커 - 가상화 기술, 이미지와 컨테이너 (0) | 2024.01.31 |
