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

프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

목표

서버 단계에서 업로드 한 이미지의 정보를 뷰로 전송

 저번 포스팅까지 사용자가 선택한 이미지를 저장하고, 썸네일 이미지를 생성하여 저장하는 작업까지 완료를 하였습니다. 이번 포스팅부턴 업로드한 이미지에 대한 정보를 뷰로 반환하는 작업을 할 것입니다

 

 작업을 시작하기 앞서 다음의 것들을 고려해보아야 합니다.

 

   1. 왜 이미지 정보를 뷰로 반환하려 하는가?

   2. 어떠한 정보를 보낼 것인가?

   3. 어떠한 방식으로 뷰에 데이터를 전송할 것인가?

 

 이번 포스팅에선 위의 고려사항들을 생각해보고 이미지 정보를 뷰로 전송하기 위한 기본적인 준비를 할 것입니다.

순서

1. 고려사항

 1.1 왜 정보를 보내려 하는가?

 1.2 어떠한 정보를 보낼 것인가?

 1.3 어떠한 방식으로 뷰에 데이터를 전송할 것인가?

2. AttachImageVO 

3. 라이브러리 추가

 

 

1. 고려사항

1.1 왜 정보를 보내려 하는가?

 

 첫 번째 목적은 업로드한 이미지 정보를 DB에 저장을 하기 위해서입니다. 상품 등록 과정에서 업로드한 이미지에 대한 정보도 함께 저장하기 위해서입니다. 

 

 두 번째 목적은 업로드한 이미지를 사용자가 미리 볼 수 있도록 하기 위해서입니다.

 

 

 1.2 어떠한 정보를 보낼 것인가?

 

 DB에 업로드 이미지 정보를 저장한다는 것은 결국 이미지를 화면에 출력시키기 위해서입니다. 그렇다면 이미지를 화면에 출력시키기 위해 필요로 한정보는 무엇일까요? 이미지가 저장된 경로와 파일의 이름 일 것입니다.

 

 뷰로 전송할 이미지 관련 정보는 곧 DB에 저장될 데이터 이기 때문에 이미지 정보를 어떠한 방식으로 보관할 것인지 정해야 합니다. 파일의 경로와 파일의 이름을 보관하는 방식엔 크게 두 가지 방식이 있다고 생각합니다.

 

 먼저 첫 번째 방식은 경로와 파일 이름 전체를 보관하는 것입니다. 이러한 방식의 경우 원본 이미지와 썸네일 이미지 두 개의 데이터를 보관하면 될 것입니다. 

 

ex)
C:\upload\2021\05\13\이미지이름.png
C:\upload\2021\05\13\썸네일이미지이름.png

 

 

 두 번째 방법은 파일 경로와 파일 이름 데이터를 따로 보관 및 관리하는 것입니다.

 

 파일 경로는 다시 나뉠 수 있는데 고정적인 경로와 유동 적인 경로입니다.  예를 들어서 이미지를 저장을 하게 되면 "c:\upload\" 경로의 경우 고정적입니다. 하지만 "\2021\05\03\" 경로의 경우 파일이 저장되는 날자에 따라 유동적으로 변합니다. 따라서 이미지에 대한 정보에서 유동적인 경로는 반드시 보관되어야 할 정보입니다.

 

 파일 이름의 경우 '썸네일 이미지'와 '원본 이미지' 이름을 두 개를 보관합니다. 하지만 썸네일 이미지 이름의 경우 "s_"+"원본 이름" 이기 때문에 이 규칙만 안다면 '원본 이미지' 이름만 보관을 하면 됩니다. 

 

 '원본 이미지'에 대한 데이터를 조금 더 세분화하면 'uuid'와 '원본 이름'입니다. 지금 우리가 구현하고자 하는 목표는 이미지를 출력시키는 것이기 때문에 이렇게 꼭 세분화할 필요는 없습니다. 하지만 만약 홈페이지 사용자가 파일을 다운로드할 수 있도록 하는 기능 구현의 경우, 사용자가 다운로드하였을 때 파일 이름에 uuid가 안 붙도록 코드를 작성해야 하는데 'uuid'와 '원본 이름' 따로 관리를 한다면 한결 편하게 코드를 작성할 수 있을 것입니다.

 

 따라서 두 번째 방식은 '유동적인 경로', 'uuid', '원본 파일 이름'을 보관합니다.

 

'유동적 경로', 'uuid', '원본 파일 이름'

원본 파일 : c:\upload + '유동적 경로' + 'uuid' + '_' + '원본 파일 이름'
썸네일 이미지 : c:\upload + '유동적 경로' + 's_' + 'uuid' + '_' + '원본 파일 이름'

 

 저는 두 개의 방식 중 두 번째 방식으로 작업을 진행할 것입니다.

 

 

 

1.3 어떠한 방식으로 뷰에 전송할 것인가?

 

 우리가 지금 구현 중인 기능은 화면의 이동 없이 서버와 뷰가 정보를 주고받는 비동기 방식입니다. 이러한 비동기 방식의 서버에서 뷰로 데이터를 전송하기 위해선 Controller의 url 매핑 메서드에 @ResponseBody 어노테이션을 붙여 주거나 메서드의 반환 타입을 ResponseEntity 방식으로 하면 됩니다. (혹은 두 가지 동시에 사용 할 수도 있기는 합니다.)

 

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

 

 다른 점은 ResponseEntity의 경우 뷰로 전송될 HTTP의 세부 정보를 조작하여 뷰로 전송할 수 있다는 점입니다. HTTP는 크게 'status', 'header', 'body' 3개의 범주로 구성되어 있는데 ResponseEntity 클래스에는 'status'와 'header'의 속성들을 조작할 수 있는 메서드들을 제공하고 있습니다.

 

※ 크롬의 경우 서버와 뷰(웹 브라우저)가 주고받는 Http 데이터를 볼 수 있는데 '크롬 개발자 도구 창(f12)' => 상단 'Network' 클릭 => 'Network' 창 리스트 중 자신이 세부적인 정보를 보고자 하는 http 통신 클릭을 하면 아래와 같이 세부 정보를 볼 수 있습니다.

 

그림 1-1

 

 저는 두 방식 중 ResponseEntity 방식으로 구현해보겠습니다.

 

 

2. AttachImageVO 

 위에서 저는 이미지에 대한 정보중 '경로', 'uuid', '파일 이름'에 대한 데이터를 DB에 보관할 것이라고 하였습니다. 따라서 앞서 말한 3가지 데이터를 뷰로 전송을 해주어야 합니다. 저는 이 데이터들을 클래스에 정의하여서 해당 클래스의 객체를 뷰에 전송할 것입니다. 따라서 뷰로 전송될 객체의 클래스를 작성하겠습니다.

 

 'com.vam.model' 패키지에 "AttachImageVO" 클래스를 생성하고 아래와 같이 변수를 선언합니다. 작성한 변수들 중 앞서 언급한 3가지 정보 이외의 변수 'bookId'를 추가해주었습니다. 이 변수는 이미지 정보가 어떠한 상품의 이미지인지에 관한 정보인 '상품 id'를 위한 변수입니다.

 

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

 

그림 2-1

 

 추가한 변수들에 대한 getter/setter/toString 메서드를 추가해줍니다.(Lombok 사용 중일 경우 클래스 선언부에 @Data 어노테이션 추가)

 

그림 2-2

 

 

 

3. 라이브러리 추가

 이미지에 관한 정보가 담긴 AttachImageVO 객체를 뷰에 전송하도록 코드를 작성할 것인데, 뷰에서는 해당 객체 데이터가 JSON 타입으로 전달받아야만 해당 데이터를 활용할 수 있습니다. 그렇기 때문에 ajax 코드에서도 전달받을 데이터 타입을 지정하는 'datatype'속성의 속성 값을 'json'으로 지정했었습니다.

 

그림 3-1

 

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

 

 pom.xml에 아래의 두 개의 Jackson-databind 라이브러리를 추가해줍니다.( jackson-databind의 경우 카테고리 리스트 출력 구현 때 추가를 해주었기 때문에 'jackson-dataformat-xml'만 추가해주시면 됩니다.)

 

		<!-- 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>

 

그림 3-2

 

REFERENCE

• 코드로배우는 스프링 웹 프로젝트(남가람북스)

 

DATE

• 2020.05.17