2020/06/02 - [프로그래밍/기타] - VS Code로 React + SpringBoot 개발환경 세팅 (2/2)
VS Code로 React + SpringBoot 개발환경 세팅 (2/2)
2020/06/02 - [프로그래밍/기타] - VS Code로 React + SpringBoot 개발환경 세팅 (1/2) VS Code로 React + SpringBoot 개발환경 세팅 (1/2) 스프링부트 환경 먼저 구성하고 시작. 앞글 참고... 2020/05/28 - [프로..
1nnovator.tistory.com
지난번 VS Code로 리액트와 스프링부트 개발환경을 세팅해보고 간단한 코드를 적어보았다.
https://lemontia.tistory.com/912
[react, springboot] react 와 spring boot 로 구성하기, 묶어 build 하기
Springboot 프로젝트를 생성한다. 여기서는 Intellij 를 이용해 생성했고, Gradle과 Java 버전 11을 사용했다. 이 과정은 생략하겠다. react를 설치하는 방법은 다양하지만 여기서는 Create react app 을 ��
lemontia.tistory.com
그 과정에서 참고했던 글이 있는데, 저 글 마지막에서는 리액트와 스프링부트를 한 번에 패키징하는 방법을 알려주고 있다.
그런데 그 과정 중에...
package com.msys.reactboot.web;
import org.springframework.boot.web.servlet.error.ErrorController;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
/**
* WebController
*/
@Controller
public class WebController implements ErrorController {
@GetMapping(value = { "", "/error" })
public String index() {
return "index.html";
}
@Override
public String getErrorPath() {
return "/error";
}
}
이런 코드를 작성해주는 과정이 있다.
원 글 쓰신 분께서 써놓으셨듯
백엔드단에서 매핑되는 컨트롤러를 찾지 못하여 404 에러가 발생하게 된다.
간단하게 스프링에서 MVC 구조의 흐름을 보면
1. 웹에서 어떤 요청이 발생하면
2. 해당 요청을 DispatchServelet에서 가로챔 (/)
3. HandlerMapping에게 매칭되는 컨트롤러를 찾는다.
- 있다면, 해당 컨트롤러 리턴
- 없다면, 404 error 발생
… (Service, DAO를 포함한 여러 흐름들은 생략)
4. Controller의 Return Type 중 String 은
반환할 View의 이름 (우리가 참고한 예제의 경우 index.html )
이렇게 흘러간다.
즉, 우리가 작성한 코드는 매핑되지않은 경우에 'index.html'을 리턴시켜주는 코드이다.
< 그럼 index.html은 어떤 역할을 하는 파일일까? >
알아보려면 index.html 안에 뭐가 있는지를 살펴보아야하겠다.
index.html 은 React 단의 public에 위치하고 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/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="%PUBLIC_URL%/logo192.png" />
<!--
생략
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
생략
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
생략
-->
</body>
</html>
그리고 파일 내부에는 이런 내용이 코딩되어있는데, 대충 봐도 별게 없다.
유의깊게 봐야할 부분은 <body> 태그 안에 있는
<div id="root"></div>
이 부분이다.
지금은 기억해두고, 넘어가도록 하자.
진짜 우리가 작성하게되는 화면단 코드는 /src 에 위치하게 된다.
이 곳에 index.js와 App.js가 위치하고 있는 것을 볼 수 있다.
< index.js 와 App.js >
index.html과 직접적으로 연관있게 생긴 index.js를 먼저 살펴보자.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();얘도 뭔가 큰 일을 하는 것 같진 않지만...
ReactDOM.render 라는 함수가 보인다.
정확한 동작원리는 나도 모르겠지만, 공식문서는 이렇게 설명하고 있다.
뭐라는지 잘 모르겠지만...정리해보자면
ReactDOM.render 함수 첫번째 파라미터를 두번째 파라미터에 렌더링해라!
인듯하다.
그러면 ReactDOM.render( ~~ , document.getElementById('root') ) 에서 익숙한 부분이 있지않은가?
두번째 파라미터 document.getElementById('root')... 띠요옹
아까 index.html에서 id가 'root'인 div 하나가 있었다.
첫번째 파라미터에서 <React.StrictMode> 는 지금은 관련없으니, 넘어가도록 하고
<App /> 부분이 중요하다.
저 부분이 바로 App.js 이기 때문이다.
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css'
import './App.css';
import TopMenuComponent from './menu/TopMenuComponent';
function App() {
return (
<div className="App">
<TopMenuComponent>
</TopMenuComponent>
</div>
);
}
export default App;
맞는 표현일지 모르겠지만...
App.js가 결과적으로는 표현해줄 화면을 정의하고 있다.
< 정리하면 >
index.html 에는 'root' 라는 div가 하나 있다.
index.js 에서는 'root' 에 App.js 를 렌더링 시킨다.
App.js 에서는 실제로 사용자에게 보여줄 화면을 정의한다.
이런 과정을 통해 React는 화면에 App.js 를 표출해주게 되며,
또 표출해주는 방식과 구조는 Virtual DOM 등등 여러 개념이 등장하게 된다.
고건 나중에 또 공부해보는걸루...
'프로그래밍 > Javascript' 카테고리의 다른 글
| 노션 페이지를 React로 웹에 띄워보자 (react-notion) (5) | 2020.11.21 |
|---|---|
| 구조분해 할당(비구조화 할당) (Destructuring assignment) (0) | 2020.06.29 |
| VS Code로 React + SpringBoot 개발환경 세팅 (2/2) (0) | 2020.06.02 |
| VS Code로 React + SpringBoot 개발환경 세팅 (1/2) (0) | 2020.06.02 |
| [javascript] 소수점 자리수 지정(자르기) - toFixed() (0) | 2019.04.03 |