[Spring Boot] Spring Boot - react 연동 준비 (2023.06.07)

 

Spring Boot - React  연동 준비

 

 

1. 데이터베이스 테이블 준비

 

 

 

auto_increment

자동으로 숫자 들어가도록 하고 싶을 때 사용!
해당하는 값은 채우지 않으면 됨

 

 

2. 프로젝트 생성

 

 

 

 

3. application.properties 작성 >> 기본 설정

 

#context-root : 서버상에서 동작하는 프로젝트를 구별하기 위한 경로
#무조건 slash로 시작 
server.servlet.context-path=/shop
#server port number
server.port=8090

#view(jsp) : prefix, suffix
spring.mvc.view.prefix=/WEB-INF/Views/
spring.mvc.view.suffix=.jsp

# EX. DB연결정보  
spring.datasource.url=jdbc:mysql://localhost:3306/Boot?useSSL=false&characterEncoding=UTF-8&serverTimezone=UTC
spring.datasource.username=fullstack
spring.datasource.password=12345
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

 

4. 기본 구조 만들기

 

4-1. 패키지 생성

 

4-2. mapper 매칭을 위한 폴더 생성 

 

4-3. 클래스 파일 생성

 

1) 데이터 (모델)

 

package com.smhrd.shop.domain;

import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;

@AllArgsConstructor
@NoArgsConstructor
@Getter
@Setter
public class Product {

	private String ptype;
	private String pcode;
	private String pname;
	private int price;
	private String color;
	private String img;

}

 

2) ProductController, ProductService, Product mapper 인터페이스 및 XML 파일 생성

 

 

2-1) ProductController

 

package com.smhrd.shop.controller;

import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;

import com.smhrd.shop.service.ProductService;

@RestController
//CORS : Cross-Origin
@CrossOrigin("http://localhost:3000")
public class ProductController {
	//1. 모든 상품 정보 불러오기
	//2. 특정 상품 1개에 대한 정보 불러오기
	//뷰를 반환하지 않고 모델만 반환할 것! (뷰는 react로 보여줄 예정) >> RestController
	
	@Autowired
	private ProductService service;
	
	//1. 모든 상품 정보 불러오기
	@GetMapping("/")
	public JSONArray productList() {
		JSONArray array = service.productList();
		return array;
	}
	
	//2. 한개 상품 정보 불러오기
	@GetMapping("/{pcode}")
	public JSONObject productOne(@PathVariable("pcode") String pcode) {
		JSONObject obj = service.productOne(pcode);
		return obj;
	}
}

 

리액트와 연동하기 위해 Cross-Origin 어노테이션 추가

 

2-2) ProductService

 

jsonArray가져로면 라이브러리 설치 필요

      <dependency>
          <groupId>co
m.googlecode.json-simple
</groupId>
          <artifactId>json-simple</artifactId>
          <version>1.1.1</version>
      </dependency>

 

package com.smhrd.shop.service;

import java.io.File;
import java.io.IOException;
import java.util.List;

import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.io.Resource;
import org.springframework.core.io.ResourceLoader;
import org.springframework.stereotype.Service;

import com.smhrd.shop.converter.ImageToBase64;
import com.smhrd.shop.converter.imageConverter;
import com.smhrd.shop.domain.Product;
import com.smhrd.shop.mapper.ProductMapper;

@Service
public class ProductService {
	
	@Autowired
	private ProductMapper mapper;
	
	@Autowired
	private ResourceLoader resourceLoader; //특정 경로에 있는 파일 가져오기
	
	//product 전체 정보 불러오기
	public JSONArray productList() {
		List<Product> list = mapper.productList();
		
		//현재 list안의 img는 파일명만 가지고 있음(실제파일X). 
		//실제 프론트에 넘겨줄 때는 이미지 자체를 넘겨주어야 함!
		//부트 서버에 이미지 저장 >> 이미지 자체를 리액트로 넘길 예정 
		//Product에 있는 이미지를 통해서 실제 파일 이름을 가지고 실제 파일을 가지고 와야함 (static/img/...)
		//스프링에서 리액트로 파일을 응답해줄 때 파일의 형태가 굉장히 중요함!
		//파일 자체를 넘길 수는 없음
		//어떻게 보내야 하냐, 컴퓨터가 알아들을 수 있는 문자(바이트) 형태로 변경해야 함
		//이미지 자체는 문자로 바꾸는 것!
		//최종적으로는 Product의 img 필드 값(파일 이름)을 이미지를 byte로 변환된 문자열로 바꾼걸로 수정해야함
		
		//JsonArray에 JsonObject가 들어있는 형식으로 응답
		//List >> JsonArray
		JSONArray jsonArray = new JSONArray();
		//List안의 Product >> JsonObject
		imageConverter<File,String> converter = new ImageToBase64();
		for(Product p : list) {
			//1. img 필드값 수정 (파일이름 >> 이미지 바이트 문자열 형태로 변환)
			//1-1. 변환할 파일 실제 경로 정의
			String filePath = "classpath:/static/img/" + p.getImg();
			Resource resource = resourceLoader.getResource(filePath); //파일에 대한 메타 데이터 반환
			String fileStringValue = null;
			try {
				fileStringValue = converter.convert(resource.getFile());
			}catch(IOException e) {
				e.printStackTrace();
			}
			
			//가지고 온 product img를 변환된 바이트 문자열로 변경
			p.setImg(fileStringValue);
			
			//2. Product 객체를 JSONObject 형태(key:value)로 변환
			JSONObject obj = new JSONObject(); //비어있는 jsonObject 생성
			obj.put("product", p); //jsonObject에 데이터 베이스에 저장된 product 객체 저장
			jsonArray.add(obj); //JsonArray에 JsonObject 추가
		}
		return jsonArray;
	}
	
	public JSONObject productOne(String pcode) {
		Product product = mapper.productOne(pcode);
		
		imageConverter<File,String> converter = new ImageToBase64();
		
		String filePath = "classpath:/static/img/" + product.getImg();
		Resource resource = resourceLoader.getResource(filePath);
		String fileStringValue = null;
		try {
			fileStringValue = converter.convert(resource.getFile());
		}catch(IOException e) {
			e.printStackTrace();
		}
		
		product.setImg(fileStringValue);
		
		JSONObject obj = new JSONObject();

		obj.put("product", product);
		
		return obj;
	}
}

 

 

2-3) Product mapper 인터페이스

 

package com.smhrd.shop.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;
import org.json.simple.JSONObject;

import com.smhrd.shop.domain.Product;

@Mapper
public interface ProductMapper {

	//Product 전체 정보 불러오기
	public List<Product> productList();
	
	//Product 한 개 정보 불러오기
	public Product productOne(String pcode);
	
}

 

2-4) Product mapper.XML

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
  
  <!-- mapper는 파일이 여러개일 수 있음 이를 구분하기 위해 namespace 작성
  namespace는 mapper 있는 경로 그대로 작성 -->
  <mapper namespace="com.smhrd.shop.mapper.ProductMapper">
  	<select id="productList" resultType="com.smhrd.shop.domain.Product">
  		select * from product;
  	</select>
  	
  	<select id="productOne" resultType="com.smhrd.shop.domain.Product">
  		select * from product where pcode = #{pcode}
  	</select>
  </mapper>

 

 

4-4. img 파일 변환을 위한 클래스 파일 생성

 

//현재 list안의 img는 파일명만 가지고 있음(실제파일X).

//실제 프론트에 넘겨줄 때는 이미지 자체를 넘겨주어야 함!

//부트 서버에 이미지 저장 >> 이미지 자체를 리액트로 넘길 예정

//Product에 있는 이미지를 통해서 실제 파일 이름을 가지고 실제 파일을 가지고 와야함 (static/img/...)

//스프링에서 리액트로 파일을 응답해줄 때 파일의 형태가 굉장히 중요함!

//파일 자체를 넘길 수는 없음

//어떻게 보내야 하냐, 컴퓨터가 알아들을 수 있는 문자(바이트) 형태로 변경해야 함

//이미지 자체는 문자로 바꾸는 것!

//최종적으로는 Product의 img 필드 값(파일 이름)을 이미지를 byte로 변환된 문자열로 바꾼걸로 수정해야함

 

1) 이미지 파일 서버에 올리기

resources > static 폴더 아래에 올리기

 

 

이미지 파일 가져오기 위한 클래스 작성

 

4-2) 패키지 생성

 

4-3) 클래스 생성

imageConverter

file을 String으로 바꿔주는 추상 메서드 작성

 

package com.smhrd.shop.converter;

import java.io.IOException;

//F : 파일
//S : 파일을 어떤 형태로 변환할 지 지정 (바이트 형태의 문자열 : String)
public abstract class imageConverter<F, S> {
	//<> : Generic, 사용자가 필요할 때 형태를 지정할 수 있음
	
	//실제 변환할 때 오버라이딩 할 추상 메서드 정의
	public abstract S convert(F f) throws IOException;
}

 

ImageToBase64

imageConverter의 converter를 오버라이딩 

Base64 라는 클래스 활용하여 변환

 

commons-io 라이브러리 설치 >> File 다룰 때 사용하는 라이브러리

      <dependency>
          <groupId>commons-io</groupId>
          <artifactId>commons-io</artifactId>
          <version>2.4</version>
      </dependency>

 

package com.smhrd.shop.converter;

import java.io.File;
import java.io.IOException;
import java.util.Base64;

import org.apache.commons.io.FileUtils;

public class ImageToBase64 extends imageConverter<File, String> {

	@Override
	public String convert(File f) throws IOException {
		
		//파일을 문자열로 변환하는 코드
		//1. 파일 가지고 와서 바이트 배열 형태로 읽기
		byte[] fileContent = FileUtils.readFileToByteArray(f);
		
		//2. 바이트배열 형태를 인코딩하여 문자열로 변경(Base64)
		String result = Base64.getEncoder().encodeToString(fileContent);
		
		return result;
	}
}

 

 

결과화면

 

---

 

테스트를 위해 postman이라는 툴 사용

 

https://www.postman.com/

 

 

Postman API Platform | Sign Up for Free

 

 

 

add Request