46일차(3)/React(11) : React 에서 만든 결과물 배포하기(build)
[ React에서 만든 결과물을 얻어내서 tomcat 서버에서 사용해 보기 ]
1. tomcat에서 일부 페이지에서만 사용하는 경우 ← 이쪽을 실습해볼 예정
2. tomcat에서 모든 기능을 react를 활용해서 구현하는 경우(SPA) (이건... 규모가 너무 커짐)
- 이번에는 npm start / npm run build 를 해볼 것!
my_app 생성
import puff from './images/puff1.png';
import './css/custom.css';
import React from 'react';
function App() {
//margin-left를 상태값으로 관리하도록 하고 초기값 100을 부여
const [left, setLeft]=React.useState(100);
//import한 이미지에 적용할 css정보를 담고 있는 object
//object 안에서 상태값을 활용하고 있다.(즉 상태값이 변경되면 자동 update된다.)
const puffStyle={
marginLeft:`${left}px`
};
return (
<div className="App">
<h1>React js 로 만든 나의 App</h1>
<img src={puff} alt="이미지" style={puffStyle} onClick={()=>{
//이미지를 클릭하면 상태값을 변경시켜서 움직이도록 한다.
setLeft(left+100);
}} />
</div>
);
}
export default App;
- 앱을 만들기 위한 환경 구성
- src 안에 폴더 2개 : images / css 생성
- images 안에 사용할 샘플이미지 넣기
- npm start
css 폴더 안에 custom.css 생성
/* src/css/custom.css */
img{
width:100px;
height: 100px;
background-color: yellow;
border-radius: 50%;
}- 기본으로 적용할 css
- App 안의 이미지를 클릭했을때 오른쪽으로 100px씩 움직이도록 만들 예정
- 왼쪽 마진을 state에 넣어주고 이미지 클릭시마다 달라지도록 state 값을 재설정해줌
- 이미지를 클릭하면 오른쪽으로 100px씩 이동한다.
- 이 앱을 eclipse로 가져오려면?
- 이 페이지의 root에 넣어주려고 한다.
- build 하기 전에 json에 설정해주어야 할 것이 있다.
- tomcat의 어떤 페이지에서 돌릴지 페이지를 설정하는 것!
- webapp/my_app 에서 돌려보려고 한다.
- 없던 폴더 (build) 가 하나 만들어진다.
- 빌드 폴더가 배포할(deployed) 준비가 되었다고 나온다!
- build 폴더 안에 있는 것들이 배포된다.
- index.html 파일안에 만들어진 내용. 용량을 줄이기 위해 개행기호를 전부 빼버림
- js 등 다른 파일도 알아보기 어렵게 수정되어 있다.
- build 폴더를 통째로복사해서 my_app 안에 넣어주면 된다.
- 페이지는 index.html에서 시작된다.
- 단, 집어넣기 전에 앞에서 한 homepage 설정이 잘 되어있어야 한다!
- 테스트 환경에서 개발하고 완성되면 build 해서 가지고 오면 된다.
- 빌드하기 전에 어디로 가져올것인지 주소를 설정하는 것이 중요하다!!!
- homepage로 지정한 주소로 배포되었다.
- 만약 jsp 페이지로 바꾸고싶다면?
- 해당 폴더 안에 puff.jsp 만들기
- index.html 안의 1줄로 된 내용을 puff.jsp에 붙여넣는다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/Step04_Final/my_app/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"/><link rel="apple-touch-icon" href="/Step04_Final/my_app/logo192.png"/><link rel="manifest" href="/Step04_Final/my_app/manifest.json"/><title>React App</title><script defer="defer" src="/Step04_Final/my_app/static/js/main.138f862f.js"></script><link href="/Step04_Final/my_app/static/css/main.37e0f3b6.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>- 맨 위의 <%@ %> 부분은 남기고, html 부분에 붙여넣기!
- 그러면 .jsp로 되어있지만 컨텐츠는 React로 만든 페이지가 생성되어 활용되게 된다.
- 이렇게 생성한 React 페이지는 build 폴더 안에 자체적으로 img, css 등을 다 가지고 있다.
외부 자원에 의존하지 않는다.
'국비교육(22-23)' 카테고리의 다른 글
| 47일차(2)/React(13) : SPA(Single Page Application) 예제 (0) | 2022.12.13 |
|---|---|
| 47일차(1)/React(12) : jsp 웹페이지 React 로 재작성하기 (회원가입 폼) (0) | 2022.12.13 |
| 46일차(2)/React(10) : import, export 활용 예제(module) (0) | 2022.12.12 |
| 46일차(1)/React(9) : 함수형 컴포넌트 작성 / ajax 요청으로 DB 데이터 출력 (0) | 2022.12.12 |
| 45일차(2)/React(8) : 모듈화된 CSS 적용하기 / form 요소 활용 (0) | 2022.12.11 |