[package.json] proxy 추가

package.json 파일에 

 "proxy": "http://localhost:9080",  <--- 추가함

설명 >>
/rest/tb/selTkimTableList.do?tableCond=TBL_TEST 가 실행되는 실제 주소는
http://localhost:9080/rest/tb/selTkimTableList.do?tableCond=TBL_TEST 이고,
cross domain 에러나서
App.js 파일에 ["proxy": "http://localhost:9080",] 추가해서 사용함
fetch 시에는 http://localhost:9080 만큼을 제외하고 입력함

 

{
  "name": "twokimss-ui",
  "version": "0.1.0",
  "private": true,
    "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.14.17",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "ag-grid-community": "^30.2.1",
    "ag-grid-react": "^30.2.1",
    "axios": "^1.6.1",
    "history": "^5.3.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.18.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
   "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "proxy": "http://localhost:9080",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

사용방법

http://localhost:3000/ 에서

npm run start

App.js

import './App.css';
import AppBar from '@mui/material/AppBar';
import Toobar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Carlist from './compt/CarList';


function App(){
   
    return(
       <div className="App">
        <AppBar position='static'>
            <Toobar>
                <Typography>
                    Carshop
                </Typography>
            </Toobar>
        </AppBar>
        <Carlist></Carlist>
       </div>
    );
}

export default App;

참조책 : 실전! 스프링 부트와 리액트로 시작하는 모던 웹 애플리케이션 개발

완료된 모습

CarList.js >>

import React, {useEffect, useState} from 'react';

function Carlist(){
    const [cars, setCars] = useState([]);

    useEffect(() => {
        console.log("3333333333");

            fetch("/rest/tb/selTkimTableList.do?tableCond=TBL_TEST")
            .then(resp => resp.json())
            .then(data => setCars(data.list))
            .catch(err => console.log(err))
            ;

            //return 하나씩 확인할때
            // let objPromise = fetch(`/rest/tb/selTkimTableList.do?tableCond=TBL_TEST`);
            // console.log("objPromise========>", objPromise);
            // let objJson = objPromise.then(response => response.json());
            // console.log("objJson========>", objJson);
            // objJson.then(
            //     data => {
            //         setCars(data.list);
            //     console.log("data.list========>", data.list);
            // })
            // .catch(err => console.error(err))
            // ;

        }, []
    );


    return(
        <div>
            <table>
                <thead>
                    <tr>
                        <th width="20%">DB_TYPE</th>
                        <th width="20%">TABLE_NAME</th>
                        <th width="20%">TABLE_NAME_DESC</th>
                        <th width="20%">FILE_GRP_SEQ</th>
                        <th width="20%"> FILE_GRP_SEQ</th>
                    </tr>
                </thead>
                <tbody>
                {
                    cars.map((car,index) =>
                        <tr key={index}>
                        	<td>{car.DB_TYPE}</td>
                            <td>{car.TABLE_NAME}</td>
                            <td>{car.TABLE_NAME_DESC}</td>
                            <td>{car.FILE_GRP_SEQ}</td>
                            <td>{car.FILE_SEQ}</td>
                        </tr>
                    )
                }
                </tbody>
            </table>
        </div>
    );
}

export default Carlist;

설명 >>
/rest/tb/selTkimTableList.do?tableCond=TBL_TEST 가 실행되는 실제 주소는
http://localhost:9080/rest/tb/selTkimTableList.do?tableCond=TBL_TEST 이고,
cross domain 에러나서
App.js 파일에 ["proxy": "http://localhost:9080",] 추가해서 사용함
fetch 시에는 http://localhost:9080 만큼을 제외하고 입력함

참조책 : 실전! 스프링 부트와 리액트로 시작하는 모던 웹 애플리케이션 개발

 

자바소스는  :  D:\devreact\workspace\webnormal 에 새로 만들어서 테스트 할생각이었는데,

화면단 공부에 집중하려고, 기존에 사용하던 java 아무거나 call 해서 쓰기로 함

MyRestController.java >>

package com.twokimss.web.tablemng.controller;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.lang3.ObjectUtils;
import org.apache.ibatis.javassist.bytecode.stackmap.TypeData.ClassName;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import com.twokimss.web.tablemng.service.impl.MyRestServiceImpl;

@RestController
public class MyRestController {

    private Logger logger = LoggerFactory.getLogger(ClassName.class);

    @Autowired
    private MyRestServiceImpl myRestServiceImpl;   	
    
    
	@SuppressWarnings("rawtypes")
	@RequestMapping(value = "/rest/tb/selTkimTableList.do", method = {RequestMethod.POST, RequestMethod.GET })
	public Map selTableList(HttpServletRequest request) throws Exception {

		logger.debug("/rest/tb/selTkimTableList.do=====>>>>start");
		
		///http://localhost:9080/rest/tb/selTkimTableList.do?tableCond=TBL_TEST
		HashMap<String,Object> result = new HashMap<String,Object>();
		

		myRestServiceImpl.selTkimTableList(this.makeCondData(request), result);
		
		Object oResult = result.get("ds_list");

		
		HashMap<String,Object> mapRtn = new HashMap<String, Object>();
		mapRtn.put("rtnCd", "0");
		mapRtn.put("rtnMsg", "성공");
		mapRtn.put("list", oResult);
		
		return mapRtn;
	}	
	
	@SuppressWarnings({ "rawtypes", "unchecked" })
	private Map makeCondData(HttpServletRequest request) {
        Map mapSearch = new HashMap<String,Object>();

        Set<String> keySet = request.getParameterMap().keySet();
        int i=1;
        for (String key : keySet) {

            logger.debug(i+"  key======={}", key);
            logger.debug(i+"  value====={}", request.getParameter(key));

            mapSearch.put(key, request.getParameter(key));

            i++;
        }
        logger.debug("mapSearch========{}", mapSearch);


        List listSearch = new ArrayList();
        listSearch.add(mapSearch);


        Map inListInfo = new HashMap<String,Object>();
        inListInfo.put("dsSearch", listSearch);

        return inListInfo;
	
	}
    
}

 

MyRestServiceImpl.java >>


package com.twokimss.web.tablemng.service.impl;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.apache.ibatis.javassist.bytecode.stackmap.TypeData.ClassName;
import org.apache.ibatis.session.SqlSession;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Service;



@Service("myRestServiceImpl")
public class MyRestServiceImpl  {

    private static final Logger logger = LoggerFactory.getLogger(ClassName.class);


    @Autowired
    @Qualifier("sqlSessionOracle")
    private SqlSession sqlSessionOracle;


    private final static String baseDomain = "com.twokimss.tablemng.database.mapper.";

	
	/////////////////////////////////////////////////////////////
	// 일반웹용
	////////////////////////////////////////////////////////////
	@SuppressWarnings({ "unchecked", "rawtypes" })
	public void selTkimTableList(Map inListInfo, HashMap<String, Object> result) throws Exception {
		List<Map> listCond = (List<Map>)inListInfo.get("dsSearch");
		Map mapCond = listCond.get(0);
		
		logger.debug("selTkimTableList>>{}", mapCond);
		String queryId = baseDomain + "TkimTableMngMapper.selTkimTableList";

		
		logger.debug("queryId>>"+queryId);
		
		List<Map> list = sqlSessionOracle.selectList(queryId, mapCond);
		logger.debug("list out data >>>{}", list);
		result.put("ds_list", list);

	}	

}