0. 개발 환경 및 툴 버전
IntelliJ [Ultimate]
- 버전: 2022.1.3
- 빌드: 221.5921.22
- 2022년 6월 21일
- 인텔리제이 버전마다 UI가 다르니 참고.
JDK
- 1.8.0_333
Tomcat
- 9.0.63
Node.js
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
얘는 언제나 최신 버전 씁시다.
1. Spring Boot 프로젝트 생성
이제 DB 구성
2. DataBase 생성 및 연결 준비
DB 접속에 필요한 username과 password 기억해두시고
- 테이블 생성
CREATE TABLE demo_table
(
DEMO_ID VARCHAR(32) NULL,
DEMO_NAME VARCHAR(32) NULL
);
-application.properties 입력
#DB info
spring.datasource.driver-class-name=org.mariadb.jdbc.Driver
spring.datasource.url=jdbc:mariadb://localhost:본인포트/본인스키마
spring.datasource.username=본인username
spring.datasource.password=본인password
#mybatis
mybatis.type-aliases-package=com.example.demo.mapper
mybatis.mapper-locations=mapper/*.xml작성자 기준
spring.datasource.url=jdbc:mariadb://localhost:3306/demodb
본인username, 본인password 마저 입력.
#mybatis
type-aliases-pacage= *******
이따가 mapper로 만들어줄 건데 dao로 쓰시는 분들은 dao로 입력하세요
mapper-locations=mapper/*xml
xml 파일 있는 곳 resources 아래 mapper아래. xml 파일
여기까지 하고 연결 테스트하실 분들은 해보면 좋습니다. 검색ㄱㄱ
- 데이터 입력
대충 넣습니다.
3. 데이터 가져오기
이미지처럼 4개 만들어주세요
아까 application.properties 에 "mybatis.type-aliases-package=" 쪽에 기입한 대로 mapper폴더 이름 확인
controller는 나중에 만들어주고 아래 순서대로 만들어 줄게요
DemoVo.java
import lombok.Data;
@Data
public class demoVo {
private String demo_id;
private String demo_name;
}아까 만든 db스키마 대로 저장할 객체를 만들고 lombok의 @Data를 이용해 get,set 메소드 만들어주고
DemoMapper.java ※ interface
import com.example.demo.domain.DemoVo;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;
import java.util.List;
@Repository
@Mapper
public interface DemoMapper {
List<DemoVo> select();
void insert(DemoVo vo);
}우리가 원하는 형태의 작업을 만들어 줍니다. 간단하게 select랑 insert만 해볼게요
Demo_SQL.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.demo.mapper.DemoMapper">
<select id="select" resultType="com.example.demo.domain.DemoVo">
SELECT *
FROM DEMO_TABLE
</select>
<insert id="insert">
INSERT INTO DEMO_TABLE(
DEMO_ID
,DEMO_NAME
) VALUES(
#{demo_id}
,#{demo_name}
)
</insert>
</mapper>DemoService.java
import com.example.demo.domain.DemoVo;
import com.example.demo.mapper.DemoMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.List;
@Service
@Transactional
public class DemoService {
@Autowired
private DemoMapper mapper;
public List<DemoVo> select(){ return mapper.select(); }
public void insert(DemoVo vo){ mapper.insert(vo);}
}SQL.xml과 service로 어떻게 해서 어떻게 넘겨줄지를 구현해줍니다. xml에
<mapper namespace=" *** "> 부분 확인해주시고
<select id=" *** "> , <insert id=" *** ">에
DemoMapper에 만든 것 대로 연결
#{***} 부분은 DemoVo에 입력한 것과 이름 같게
이제 conroller를 구현해봅시다.
DemoController.java
import com.example.demo.domain.DemoVo;
import com.example.demo.service.DemoService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
public class DemoController {
@Autowired
private DemoService demoService;
@GetMapping("select")
public List<DemoVo> getSelectList(){ return demoService.select(); }
@GetMapping("insert")
public void insertDemoVo(){
DemoVo vo = new DemoVo();
vo.setDemo_id("내가만든dummy_id");
vo.setDemo_name("내가만든dummy_name");
demoService.insert(vo);
}
}바로 뿌려야 하니까 @RestController 쓰고
insert는 일단 테스트 하기 위해서 Get으로 썼어요 이따 React쪽 세팅되면 Post로 바꿉시다
4. 톰캣 연동
톰캣 설치한 경로 지정해주시고 아래 HTTP port: 기억해주세요
Application context: /
만 남겨줍니다.
이제 톰캣 실행해주시면 아래 화면이 나옵니다.
우리는 Get으로 select 줬으니까 입력 ㄱㄱ
아까 db에 저장했던 데이터들이 정상적으로 출력됩니다.
이제 insert 한번 하고 다시 select 해볼게요
정상적으로 insert 됨을 확인할 수 있네요
4. React 설치
https://blog.naver.com/tjddnjs5092/222650157261
[IntelliJ Spring Boot+React 제 1장] Spring Boot 프로젝트 생성 및 React 프로젝트 생성
Spring boot 프로젝트 생성. Spring Intializr 선택을 하였고 위와같이 세팅을 해주었습니다 Dependenc...
blog.naver.com
위 게시글을 참고하여 작성하였습니다.
시작 전에 node.js 설치하시고 IntelliJ에서 플러그인 연결해주셔야 아래 Terminal이 정상 작동합니다.
안되어 있으면 하고 오세요
npx create-react-app front이름은 자유롭게 지으셔도 됩니다. 작성자는 front
cd front
npm install
npm run-script build
npm startfront 폴더로 이동해주신 뒤에 차례로 npm install, npm run-script build 입력해줍니다.
build가 완료되면 npm start
이렇게 나옵니다 포트는 3000
App.js // App.css // index.css
App.js는 위 이미지처럼 드래그한 부분만 나머지 css는 내용을 모두 지워줄게요
"proxy": "http://localhost:8090",저는 8090에서만 받아올 거라 package.json 파일에 proxy를 8090에 두었습니다.
8090과 axios를 이용하여 통신하겠습니다.
https://axios-http.com/kr/docs/intro
시작하기 | Axios Docs
시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코
axios-http.com
CTRL + C 두 번 눌러서 3000 포트 닫아주시고
npm install axios터미널에 npm install axios 입력
DemoController.java
@GetMapping("select")
public List<DemoVo> getSelectList(){ return demoService.select(); }
@GetMapping("insert")
public void insertDemoVo(){
DemoVo vo = new DemoVo();
vo.setDemo_id("내가만든dummy_id");
vo.setDemo_name("내가만든dummy_name");
demoService.insert(vo);
}insert는 get으로 만든 김에 테스트 한번 더해보고 post로 고쳐보도록 하죠
App.js
import './App.css';
import axios from 'axios';
function App() {
function selecttestAxios(){
axios.get('/select')
.then(function (res){
console.log(res.data); // getSelectList 버튼을 누르면 데이터들이
});
}
function inserttestAxios(){
axios.get('/insert')
.then(function (res){
console.log("insert OK"); // Insert 버튼을 누르면 "insert OK"
});
}
return (
<div className="App">
<button onClick={() => selecttestAxios()}>getSelectList</button>
<button onClick={() => inserttestAxios()}>Insert</button>
</div>
);
}
export default App;npm start
+
Tomcat도 켜주시고
이제 DemoController의 insert를 Post요청으로 바꿔 실행해 보겠습니다.
DemoController.java
import com.example.demo.domain.DemoVo;
import com.example.demo.service.DemoService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
public class DemoController {
@Autowired
private DemoService demoService;
@GetMapping("select")
public List<DemoVo> getSelectList(){ return demoService.select(); }
@PostMapping("insert")
public void insertDemoVo(@RequestBody DemoVo vo){ demoService.insert(vo); }
}
App.js
import './App.css';
import axios from 'axios';
import {useState} from "react";
function App() {
const [id,setid] = useState(1);
function selecttestAxios(){
axios.get('/select')
.then(function (res){
console.log(res.data);
});
}
function inserttestAxios(){
axios.post('/insert',{
demo_id : id
,demo_name : "dummy"
})
.then(function (res){
console.log("insert OK");
setid(id+1);
});
}
return (
<div className="App">
<button onClick={() => selecttestAxios()}>getSelectList</button>
<button onClick={() => inserttestAxios()}>Insert</button>
</div>
);
}
export default App;전달하는 JSON은 DemoVo에 만들어준 변수와 같게 해줘야 잡히니 주의해주시고
Tomcat만 재실행
와~ 성공~~
MVC로만 CRUD를 해본 제 입장에서는 당장 사용해볼 만한 React DB 연동 법이 이것밖에 떠오르지 않더라고요.
여기까지만 뚫려도 이것저것 응용해내실 개발자분들이 많으실 텐데 개발하시는 거 파이팅입니다!
고생하셨습니다.
그럼 안녕~
