[Spring]6. Spring Boot&React 연동

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하기