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

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

목표

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

 이번 포스팅에서는 이미지 정보를 AttachImageVO에 담아서 뷰로 전송을 하고 정상적으로 데이터를 전달받았는지 확인하는 것을 목표로 합니다.

 

 

 

순서

1. 이미지 정보 객체에 저장

2. RequestEntity 리턴

3. RequestMapping produces 속성 추가

4. ajax success 속성 추가(뷰)

5. 테스트

 

 

1. 이미지 정보 객체에 저장

 저번 포스팅에서 생성하고 작성한 AttachImageVO를 활용할 차례입니다. 이미지 한 개만 처리하는 경우 AttachImageVO를 인스턴스화 하여 각 정보를 바로 담으면 됩니다. 하지만 현재의 업로드를 수행하는 url 메핑 메서드의 경우 여러 개의 이미지 파일을 전달받고 처리할 수 있도록 설계되어 있습니다. 따라서 ArrayList자료구조를 활용할 것입니다. 

 

 혹시 ArrayList에 대해 잘 모르신다면 요소의 개수에 따라 길이가 유동적으로 변하는 배열이라고 이해하시면 될 거 같습니다. for문 안에서 AttachImageVO를 인스턴스화 하여 각 정보를 저장한 다음 해당 객체를 ArrayList 요소에 저장을 할 것입니다.

 

 먼저 for문 밖 상단에, List타입의 참조 변수를 선언하고 ArrayList 생성자로 초기화해줍니다.

 

		/* 이미저 정보 담는 객체 */
		List<AttachImageVO> list = new ArrayList();

 

그림 1-1

 

 

 for문 내부에 AttachImageVO 타입의 참조 변수를 선언하고 생성자로 초기화해줍니다. 

 

그림 1-2

 

 setter 메서드를 사용하여 각 정보를 AttachImageVO 객체에 저장합니다.

 

	vo.setFileName(uploadFileName);
	vo.setUploadPath(datePath);
	vo.setUuid(uuid);

 

그림 1-3

 

 이미지 정보가 저장된 AttachImageVO객체를 List의 요소로 추가해줍니다. (for문 안)

 

			list.add(vo);

 

그림 1-4

 

이로써 뷰로부터 이미지를 전달받은 만큼 AttachImageVO 객체가 생성되어 각 정보를 저장 한 , 후 해당 객체가 List의 요소로 추가 되게 됩니다.

 

 

2. ResponseEntity 리턴

 업로드를 수행하는 url 매핑 메서드의 리턴 타입을 아래와 같이 변경해줍니다. 의미는 반환 타입이 ResponseEntity 객체이고 Http의 Body에 추가될 데이터는 List <AttachImageVO>라는 의미입니다.

 

ResponseEntity<List<AttachImageVO>>

 

그림 2-1

 

 구현부 최 하단에 아래와 같이 ResponseEntity 참조 변수를 선언하고 생성자로 초기화합니다.

 

		ResponseEntity<List<AttachImageVO>> result = new ResponseEntity<List<AttachImageVO>>(list, HttpStatus.OK);

 

그림 2-2

 

위에서 작성한 생성자를 통해서 Http의 바디에 추가될 데이터는 List <AttachImageVO>이고 상태 코드가 OK(200)인 ReseponseEntity 객체가 생성됩니다. 

 

 구현부 마지막에 return문을 추가하여 생성한 ResponseEntity 객체를 반환합니다.

 

return result;

 

그림 2-3

 

이로써 업로드를 수행하는 url 매핑 메서드를 완성하였습니다. 해당 메서드의 전체적인 과정을 요약하면 다음과 같습니다.

 

1. 이미지 파일 저장

2. 썸네일 이미지 파일 생성 및 저장

3. 각 이미지 정보 List 객체에 저장

4. ResponseEntity를 통해서 뷰(view)로 http 상태 코드가 200이고 http Body에 이미지 정보가 담긴 List 객체를 전송

 

 4의 과정에 약간의 설명을 덫 붙이자면 뷰(view)에서 ajax를 통해 요청할 때 JSON타입의 데이터를 요청을 하였습니다. 따라서 뷰로 List객체를 반환하는 과정에서 List객체를 JSON 형식의 문자열로 변환을 해주어야 합니다. 이때 클래스 패스(classpath)에 Jackson이 존재해야만 JSON형식으로 스프링이 변환을 시켜줍니다. 

 

 클래스패스(classpath)에 Jackson을 추가시켜주기 위해서 우리는 Jackson-databind 라이브러리를 추가시켜주었습니다. Jackson-databind 라이브러리는 jackson-annotations, jackson-core, jackson-datatbind를 클래스 패스에 자체적으로 추가시켜주기 때문입니다. 

 

 

3. RequestMapping produces 속성 추가

 완성한 업로드 url 매핑 메서드는 이미지 파일 이름이 영어인 경우 업로드 요청을 하였을 때 정상적으로 업로드를 수행 후 뷰로 업로드한 이미지 정보를 반환하게 됩니다. 하지만 이미지 파일 이름이 한글인 경우 업로드는 정상적으로 수행을 하겠지만 뷰로 반환되는 이미지 정보의 파일 이름(fileName) 데이터가 깨져 있을 수가 있습니다.

 

 이를 방지하기 위해선 서버에서 뷰로 반환하는 데이터가 UTF8로 인코딩 되어야 합니다. 이를 위해서 RequestMapping 어노테이션에 produce 속성을 추가하여 전송되는 JSON데이터가 UTF8인코딩이 된 채로 전송되도록 속성값을 부여해주어야 합니다. RequestMapping 어노테이션의 produces 속성은 서버에서 뷰로 전송되는 Response의 Content-type을 제어 할 수 있는 속성입니다.

 

 업로드 url 매핑 메서드의 RequestMapping 어노테이션을 아래와 같이 변경해줍니다.

 

//기존
	@PostMapping("/uploadAjaxAction")
    
// 변경 후
	@PostMapping(value="/uploadAjaxAction", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)

 

그림 3-1

 

 

4. ajax success 속성 추가

 뷰에서 서버에서 전송한 이미지 정보를 전달받기 위해 기존 ajax 코드에 success 속성을 추가합니다. success 속성 값으로 콜백 함수를 부여한 뒤 전달받은 객체 데이터를 console에 찍히도록 코드를 작성하였습니다.

 

// 기존
		$.ajax({
			url: '/admin/uploadAjaxAction',
	    	processData : false,
	    	contentType : false,
	    	data : formData,
	    	type : 'POST',
	    	dataType : 'json'
		});		
        
// 변경 후
		$.ajax({
			url: '/admin/uploadAjaxAction',
	    	processData : false,
	    	contentType : false,
	    	data : formData,
	    	type : 'POST',
	    	dataType : 'json',
	    	success : function(result){
	    		console.log(result);
	    	}
		});	

 

그림 4-1

 

 

5. 테스트

 서버를 구동시켜 이미지 업로드를 하였을 때 정상적으로 등록한 이미지의 정보가 뷰로 반환되는지 확인합니다.

 

 

그림 5-1

 

그림 5-2

 

그림 5-3

 

 

REFERENCE

• 코드로배우는 스프링 웹 프로젝트(남가람북스)
• https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/http/ResponseEntity.html

 

DATE

• 2020.05.18