코딩/Spring

[Spring]6. Spring Boot&React 연동

Code.Jaram 2023. 9. 20. 08:49

Spring_06_Spring Boot&리액트 연동

 

[sqlDeveloper에서 mysql 사용하기]

  • Mysql Community 다운로드-sqlDeveloper 폴더에 넣기

https://dev.mysql.com/downloads/connector/j/8.0.html

 

 

[sqlDeveloper]

  • Oracle 환경설정-데이터베이스-타사 JDBC 드라이버-항목추가-Mysql.jar파일 선택

*mysql 파일 경로: C:\Users\smhrd\Desktop\sqldeveloper-23.1.0.097.1607-

no-jre\sqldeveloper

 

  • MySQL로 데이터베이스 접속

 

  • 데이터 베이스 선택

  • Player 테이블 생성

  • 선수정보 삽입

 

[Spring Boot]

  [PlayerController]

  • @RestController로 Mapping: view로 리액트를 사용하기 때문에 데이터만 응답

  • PlayerService 호출, PlayerList 호출

 

 [PlayerService]

  • @Service mapping

  • PlayerMapper 선언

 

  [PlayerMapper.interface]

  • PlayerList 추상메소드 만들기: select의 결과값 List<Player>

 

 [PlayerMapper.xml]선수정보 전체 조회

  • mapper를 찾는 namespace: Mapper의 경로 작성
  • Player 전체조회: id값 메소드이름, resultType Player entity

 

 [Player]선수정보 entity

  • Mysql에서 생성한 테이블 컬럼과 동일하게 필드 생성

  • lombok으로 생성자 만들기

 

  • 선수 이미지 static 폴더에 넣기

 

[com.smhrd.player.converter]

  • 이미지를 byte 문자열로 변환하는 패키지

 

 

 [PlayerImageConverter.interface]

  • 이미지 데이터를 byte 문자열로 변환하기 위해 필요한 추상메소드 상속하게 하는 클래스
  • 타입 지정 <F,S>: F(실제 파일), S(byte 문자열)

  • 매개변수는 F(파일)로 지정하고, 타입은 S(byte 문자열)인 추상메소드 : 예외처리 추가

 

  [ImageToBase64]이미지 파일을 byte 문자열로 변환

  • 이미지 파일을 byte 문자열 형태로 변환할 때 base64(이미지 기본 인코딩 방식)를 활용하여 인코딩하는 클래스
  1. 파일 가져오기: Commons IO 라이브러리

 

  • Commons IO 라이브러리(2.11.0) [pom.xml]에 추가하기

  • readFileToByteArray: 파일을 byte 형태로 읽는 메소드

 

 

 2. base64로 byte 배열을 문자열로 인코딩: 인코딩한 결과값을 Controller로 반환

 

 

 [PlayerService]데이터 가공하기: 파일이름→실제 파일→byte 문자열→JSON 파일

  • ImageToBase64 객체 호출

 

 

  • Mapper에서 가져온 선수정보 리스트를 JSON으로 변환하기

 

  (1)파일이름을 실제파일로 바꾼 후 byte 문자열로 변환하기: for-each문을 사용

 

   ①파일 이름 불러오기: classpath(src/main/resource 경로)/폴더경로/파일경로

  • 파일경로: 선수정보리스트에서 ImgSrc 속성 가져오기(getImgSrc())

 

 

  ②실제 파일 불러오기

  •  Autowired 방식으로 resourceLoader(파일 읽는 객체) 호출하기
  • resourceLoader객체를 통해 기존에 구한 파일경로에 있는 실제 파일 불러오기

 

 

③converter(ImageToBase64)를 통해 이미지 파일을 byte 문자로 변환

  •  resourceLoader를 통해 불러온 파일을ImageToBase64의  converte 메소드로 변환하기
  • try-catch문으로 오류에 대한 설정하기

 

 

   (2)선수정보 ImgSrc 필드값 변경: setter을 이용하여 byte문자열로 변환된 값으로 필드값 변경

 

  (3)byte 문자열 형태를 JSON 형태로 변환하기

 

  • JSON.simple 라이브러리 설치: JSON.simple(1.1.1) [pom.xml]에 추가

 

  • JSONArray 객체 호출하기

 

  • JSONArray에 byte 문자열 형태로 변환한 이미지가 담긴 선수정보 리스트 추가하기

 

  • 변환된 이미지 데이터가 담긴 JSON 객체 return

 

[PlayerController]리액트로 JSON 응답하기

  • Service에서 리턴한 JSON 파일을 리액트 서버로 전송하기

-RequestMapping 주소값을 통해 리액트에서 JSON 파일을 응답받을 수 있음

 

 

 

  • 리액트 서버 거절된 경우 CrossOrigin으로 리액트 서버 허용하도록 설정

 

(JSON 요청결과)

 

  1. Spring에서 보낸 이미지 데이터 받기

[React]

[Player.jsx]

  • Axios 비동기통신으로 Spring RequestMapping 주소값에 접근하기
  • 통신 성공 시 Spring에서 응답한 선수정보(res.data)를 선수리스트 state에 저장하기

(console창)React 서버로 받아온 선수정보리스트 확인

 

[List.jsx]

  • Spring에서 보낸 byte 문자열로 변환된 이미지 데이터를 출력

 

(리액트 화면)선수정보리스트 메인

 

2. Spring으로 선수의 이름데이터 보내기

[React]

[Item.jsx]

  • Spring으로 선수프로필 정보를 출력하기 위한 주소값에 이름보내기

 

[Spring]

  • React에서 해당 주소값을 요청했을 때 보낸 이름을 매개변수로 받아오기

 

[React]

[detail.jsx]

  • Spring에서 보낸 선수이미지 받아오기

(선수개인 프로필)

 

3. Spring에서 React에서 보낸 이름에 해당하는 선수정보만 보내기(JsonObject)

 

[PlayerController]

  • PlayerService로 name 전송하기

 

[PlayerService]

  • Mapper로 name 전송하기

  • ImagetToBase64 객체 호출하기
  • Mapper에서 가져온 선수정보 JSON으로 변환하기

 

1)Player entity에서 ImgSrc 가져오기

2)resourceLoader로 실제파일로 불러오기

 

3)converter로 이미지를 byte 문자열로 변환하기

 

4)byte문자열로 변환된 값으로 ImgSrc 필드값 변경하기(setter)

 

5)JsonObject에 이미지경로가 byte문자열로 변환된 선수정보 담고 return하기