프로젝트

목표 리액트로 작성된 프론트단에서 게시글을 작성한 뒤 등록 버튼을 누르면 작성한 데이터들을 서버인 스프링으로 전송한다. 기본설정 commons-fileupload commons-fileupload 1.4 commons-io commons-io 2.11.0 pom.xml에 추가한다. React 1) 입력 전 2) 입력 후 위처럼 게시판 종류, 제목, 내용, 파일들을 입력하고 등록버튼을 통해 스프링에 데이터를 전송할 것이다. React(프론트) 전체 코드 import FloatingLabel from 'react-bootstrap/FloatingLabel'; import Form from 'react-bootstrap/Form'; import React, {useState} from 'react'; impo..

Version check Spring boot 2.74 MySql 8.0.33 Maven 기본 설정 1. Maven 추가 org.springframework.boot spring-boot-starter-data-jpa mysql mysql-connector-java 8.0.33 runtime mysql은 사용 버전에 따라 다르게 작성해줘야 한다. mysql에서 SELECT VERSION(); 을 입력하면 현재 사용하고 있는 버전이 출력된다. 2. application.properties 작성 # jpa common spring.jpa.show-sql=true spring.jpa.database-platform=org.hibernate.dialect.MySQL5InnoDBDialect spring.jpa...

Maven 설정 com.googlecode.json-simple json-simple 1.1.1 (https://mvnrepository.com/artifact/com.googlecode.json-simple/json-simple) React에서 JSON 전송 { axios( { url: '/login', method: 'post', data: [ {email:'test@naver.com',aaa:'aaa222'}, {email:'test2@naver.com',aaa:'aaa333'}], baseURL: 'http://localhost:8080', //withCredentials: true, } ).then(function (response) { console.log(response) console.lo..

목표 Spring Boot와 React간 JSON을 전송해본다. SpringBoot -> React로 JSON 전송하기 @RestController public class HelloController { @PostMapping(value="/api/login", consumes="application/json;") public Member login(@RequestBody HashMap map) { System.out.println(map); Member member=new Member("chaeros","1234","채로스",28); return member; } } React에서 Spring Boot로 /api/login URL을 통해 post방식으로 접속했을 때, 매개변수 HashMap 자료형의 m..

목표 Front-End로는React, Back-End로는 Spring Boot를 쓰려고한다. 이 때, 둘 사이에서 데이터를 주고 받을 수 있도록 연동시킨다. 연동 과정 1. 스프링 부트 프로젝트 생성 Spring Web Dependency가 추가된 상태로 이클립스로 File->New->Spring Starter Project를 실행한다. 자신의 취향대로 설정하면 된다. 나는 Maven에 Java11을 선택하겠다. Spring Web을 추가하고 Finish 프로젝트를 실행시키고 위와 같은 화면이 콘솔창에 출력되면 프로젝트가 성공적으로 생성된 것이다. localhost:8080 에 접속하면 위와 같은 화면이 출력된다. 다른 화면이 출력되길 원한다면 src->main에 index.html 파일을 생성해주면 된..

리액트와 스프링 연동을 위해 리액트 설정을 하는 와중, create-react-app의 종속 설정을 꺼내기 위해 npm run eject 명령어를 실행했는데 아래와 같은 오류가 발생했다. git과 관련된 오류로 현재 폴더를 커밋해줘야 문제가 해결된다. 커밋 방법은 아래와 같다. git add . git commit -m "쓰고싶은 내용" 전과 달리 성공적으로 npm run eject 명령어가 실행되는 것을 확인할 수 있다.