STS3 쇼핑몰 프로젝트[24] 상품 이미지 업로드(이미지 정보 뷰 반환) - 6

순서

1. 고려사항

2. AttachImageVO

3. Jackson-databind 라이브러리 추가

1. 고려사항

왜 정보를 보내는가?

업로드한 이미지 정보를 상품 등록 과정에서 함께 DB에 저장하기 위해서입니다.

또한 업로드한 이미지를 사용자가 미리 볼 수 있도록 하기 위함입니다.

어떤 정보를 보낼 것인가?

DB에 업로드한 이미지 정보를 저장한다는 것은 결국 이미지를 화면에 출력하기 위함입니다.

따라서 이미지를 화면에 출력시키기 위해 이미지가 저장된 경로와 파일의 이름이 필요합니다.

 

뷰로 전송할 이미지 정보는 곧 DB에 저장될 데이터이기 때문에 어떤 방식으로 보관할 것인지 정해야 합니다.

 

저는 파일 경로와 파일 이름 데이터를 따로 보관 및 관리하는 방법으로 진행했습니다.

어떤 방식으로 뷰에 전송할 것인가?

제가 구현한 기능은 화면의 이동 없이 서버와 뷰가 정보를 주고받는 비동기 방식입니다.

 

이러한 비동기 방식의 서버에서 뷰로 데이터를 전송하기 위해선 Controller의 URL 매핑 메서드에 @ResponseBody 어노테이션을 붙여주거나, 메서드의 반환 타입을 ResponseEntity로 하면 됩니다.

 

@ResponseBody와 ResponseEntity 모두 서버에서 뷰로 전송하는 HTTP Body에 뷰로 전달하고 싶은 데이터를 포함시켜 보낸다는 점은 동일합니다.

 

차이점은 ResponseEntity의 경우, 뷰로 전송될 HTTP의 세부 정보를 조작하여 전송할 수 있다는 것입니다.

 

HTTP는 크게 'status', 'header', 'body' 3개의 범주로 구성되어 있는데, ResponseEntity 클래스에선 'status'와 'header'의 속성을 조작할 수 있는 메서드들을 제공하고 있습니다.

 

저는 두 방식 중 ResponseEntity 방식으로 구현했습니다.

2. AttachImageVO

이미지에 대한 정보 중 '경로', 'uuid', '파일 명'에 대한 데이터를 DB에 보관하고, 뷰로 전송해주기 위해 전송될 객체의 클래스를 작성합니다.

 

'com.swan.model' 패키지에 'AttachImageVO' 클래스를 생성하고 아래와 같이 변수를 설정합니다.

작성한 변수들 이외에 이미지 정보가 어떤 상품의 이미지인지에 관한 정보인 'product_id'를 추가했습니다.

/* 경로 */
private String uploadPath;
	
/* uuid */
private String uuid;
	
/* 파일 이름 */
private String fileName;
	
/* 상품 id */
private int product_id;

이후 추가한 변수들에 대한 기본 생성자, getter/setter/toString 메서드도 생성합니다.

package com.swan.model;

public class AttachImageVO {

	/* 경로 */
	private String uploadPath;
	
	/* uuid */
	private String uuid;
	
	/* 파일 이름 */
	private String fileName;
	
	/* 상품 id */
	private int product_id;
	
	public AttachImageVO() {}

	public AttachImageVO(String uploadPath, String uuid, String fileName, int product_id) {
		super();
		this.uploadPath = uploadPath;
		this.uuid = uuid;
		this.fileName = fileName;
		this.product_id = product_id;
	}

	public String getUploadPath() {
		return uploadPath;
	}

	public void setUploadPath(String uploadPath) {
		this.uploadPath = uploadPath;
	}

	public String getUuid() {
		return uuid;
	}

	public void setUuid(String uuid) {
		this.uuid = uuid;
	}

	public String getFileName() {
		return fileName;
	}

	public void setFileName(String fileName) {
		this.fileName = fileName;
	}

	public int getProduct_id() {
		return product_id;
	}

	public void setProduct_id(int product_id) {
		this.product_id = product_id;
	}

	@Override
	public String toString() {
		return "AttachImageVO [uploadPath=" + uploadPath + ", uuid=" + uuid + ", fileName=" + fileName + ", product_id="
				+ product_id + "]";
	}
	
	
}

3. Jackson 라이브러리 추가

이미지에 관한 정보가 담긴 AttachImageVO 객체를 뷰에 전송할 수 있도록 코드를 작성했습니다.

 

뷰에선 해당 객체 데이터가 JSON 타입으로 전달받아야 해당 데이터를 활용할 수 있기 때문에 AJAX 코드에 전달받을 데이터 타입을 지정하는 dataType 속성 값을 'json'으로 지정했었습니다.

따라서 스프링에서 Java 객체 데이터를 JSON 타입의 데이터로 변환하여 뷰로 전송해줘야 하는데, 이를 위해 Jackson-databind 관련 라이브러리를 추가해줘야 합니다.

 

pom.xml에 두 개의 Jackson-databind 라이브러리를 추가합니다.

<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-databind</artifactId>
	<version>2.12.1</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.dataformat/jackson-dataformat-xml -->
<dependency>
	<groupId>com.fasterxml.jackson.dataformat</groupId>
	<artifactId>jackson-dataformat-xml</artifactId>
	<version>2.12.1</version>
</dependency>