Spring에 해당하는 글 2

Spring x react 연동하기

취미생활/react|2018.11.27 16:26

에디터 vscode 기준


2018/11/23 - [취미생활/알쓸기능] - vscode spring 프로젝트 생성하기


이전 vscode에 설치한 spring에 react를 연동시켜보았다.

이글은 전적으로 이동련님 블로그에서 보고 배웠다.


1. react 라이브러리 설치 


터미널 Ctrl + Shift + '


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


package.json에 의존성 추가확인



2. webpack 설정


루트에 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' ] } ] } };


3. Controller 작성


 지난번 HomeController.java 파일에 추가함. 

class import - Alt + Shift + o 


	@GetMapping("/{name}.html")
    public String page(@PathVariable String name, Model model){
        model.addAttribute("pageName", name);
        return "page";
    }



4. 폴더생성

src/main/jsx 

src/java/webapp/css

src/java/webapp/jsp




5. .../jsp/page.jsp 


	<%@ page language="java" contentType="text/html; charset=utf-8"
	%>
	
	
		
			${pageName}
		
		 
		
			


 .../css/custom.css

.main { font-size: 24px; border-bottom: solid 1px black; }
.page1 { font-size: 14px; background-color: yellow; }


.../jsx/MainPage.jax


import '../webapp/css/custom.css';
 
import React from 'react';
import ReactDOM from 'react-dom';
 
class MainPage extends React.Component {
 
    render() {
        return 
메인 페이지
; } } ReactDOM.render(, document.getElementById('root'));




6. webpack watch


개발시 -d , 운영시 -p


node_modules\.bin\webpack --watch -d


태그 : react, Spring

댓글(0)

vscode spring 프로젝트 생성하기

취미생활/알쓸기능|2018.11.23 16:07

- 확장기능 설치 

1. Ctrl + Shift +x


2. 확장프로그램 설치 

- Java Extension Pack (Microsoft) 

- Spring Boot Extension Pack (Pivotal)




- jdk 설정


1. Ctrl + ,


2. Edit in settings.json 클릭

3. User Settings 에 경로설정


"java.home":"C:\\java\\jdk1.8"



- 프로젝트 생성


1. Ctrl + Shift +p

2. Spring Initalizr: Generate Maven Project Spring 선택

3. java

4. 패키지주소

5. 프로젝트명

6. 버전선택

7. 의존성 선택


DevTools – 클래스 소스 변경시 재시작

Web – Tomcat을 기반으로 서블릿 API를 사용수있음.



- pom.xml 추가

 //jsp
	
		org.apache.tomcat.embed
		tomcat-embed-jasper
		provided
	
//jstl
	
		javax.servlet
		jstl
		provided
	



- application.properties 삭제 application.yml 생성

spring:
  http:
    encoding:
      charset:    UTF-8
  mvc:
    view:
      prefix:     /jsp/
      suffix:     .jsp
server:
  tomcat:
    uri-encoding: UTF-8


HomeController.java 생성


package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class HomeController{

    @RequestMapping("/")
    @ResponseBody
    public String index(){
        return "Hello Spring";
    }

}


프로젝트 실행 F5


결과확인







출처 : https://start.goodtime.co.kr/2018/09/%EC%8A%A4%ED%94%84%EB%A7%81-%EB%B6%80%ED%8A%B8-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B0%9C%EB%B0%9C-%EC%85%8B%EC%97%85-2018/


댓글(0)