Spring 비동기 처리 에러 이슈 (한글 깨짐,인코딩)

 

중간 프로젝트 의 작업 내용을 Spring으로 이관하는 작업 도중

비동기 처리로 구현하였던 검색 키워드 부분을 Spring 내에서도 비동기 처리가 구현이 될 수 있도록

ajax 메서드와 비동기 처리 과정을 코드 작성 중이었는데 ..!

이와 같이 검색하려는 상품의 이름은 한글이 ??? 로 깨져서 나오고 View 페이지 에서는 상품의 이름을 undefined 못찾는 오류가 발생하였다.

Ajax - Json 데이터를 받았을때 영어나 숫자는 나오지만 한글이 깨져 '?' 로 나오는 오류

 

 

 

열심히 구글링을 통해 여러가지 해결방안을 시도해 보았다 ...!

 

 

 

✔️ 해결방안 1. contentType, pageEncoding

 

 

• contentType

해당 속성은 브라우저가 즉 HTTP가 해당 주소를 받아올 때 페이지의 인코딩을 의미한다. 다시 말하면 의미 HTTP의 헤더에 그대로 이 내용이 들어가게 된다. charset을 통해 페이지를 요청하는 것이며, 웹서버에서 응답하여 클라이언트가 페이지를 받았을 때의 인코딩 방식이다.

 

좀 더 쉽게 말하면 "브라우저가 받아볼 인코딩 형식" 이다.

 

• pageEncoding

JSP 파일 자체의 인코딩 방식을 뜻한다. 해당 문서의 캐릭터 셋이다. 이 파일은 UTF-8로 되어 있는 페이지라는 것을 말한다. 흔히 우리가 생각하는 인코딩 설정이 이것에 해당한다.

 

 

✔️ 해결 방안 2. ajax() 메서드 안에 contentType 설정하기

 

contentType => 화면에서 받는 Document에 (String) 문자열 데이터 출력시 사용 설정

페이지에 VIEW에 인코딩하는 것은 아니다. 화면에 보여지려고 할 때 인코딩을 해서 출력해주는것

 

 

 

✔️ 해결방안 3. ajax() 데이터 타입 dataType 맞추기

 

.

서버에서 반환되는 데이터 형식을 지정한다. Controller 에서 produces랑 맞추는 부분이다.

생략했을 경우는, jQuery이 MIME 타입 등을 보면서 자동으로 결정한다.

지정 가능한 값은 다음과 같다.

• "xml": XML 문서
• "html": HTML을 텍스트 데이터로. 여기에 script 태그가 포함된 경우 처리가 실행된다.
• "script": JavaScript 코드를 텍스트 데이터로. cache 옵션 특히 지정이 없으면 캐시가 자동으로

비활성화된다. 원격 도메인에 대한 요청의 경우 POST는 GET으로 변환된다.

• "json": JSON 형식 데이터로 평가하고 JavaScript의 개체로 변환한다.
• "jsonp": JSONP로 요청을 부르고 callback 매개 변수에 지정된 함수 회수 값을 JSON 데이터로 처리한다. (jQuery 1.2 추가)
• "text": 일반 텍스트.

 

 

 

---

여기서 잠깐 !

dataType 과 contentType 의 차이점

 

contentType은 보내는 데이터의 타입이다.

application/json; charset-utf-8이 흔히 쓰인다.

디폴트는 application/x-www-form-urlencoded; charset=utf-8 이다.

 

dataType은 서버에서 어떤 타입을 받을 것인지를 의미한다.

json, html, text 등등...

jQuery가 이것을 이용해 success나 done 함수의 파라미터로 받아 처리한다.

 

{"success":true} 의 결과를 받기 원한다면

var data = {"name":"Hong"}
$.ajax({
    dataType : "json",
    contentType: "application/json; charset=utf-8",
    data : JSON.stringify(data),
    success : function(result) {
        alert(result.success); // result 는 반환받은 JSON으로 만들어진 객체다.
    },
});

 

 

 

<div> SUCCESS ! </div> 결과를 받기 원한다면

var data = {"name":"Hong"}
$.ajax({
    dataType : "html", //서버에서 html타입을 반환받는다.
    contentType: "application/json; charset=utf-8",
    data : JSON.stringify(data),
    success : function(result) {
        $("#id").html(result); // 반환받은 html을 추가한다.
    },
});

 

 

---

 

✔️ 해결방안 4. produces ( Controller 에서 적용 )

 

 

@RequestMapping안에 produces="application/json;"를 추가할 경우

아래 소스와 같이 Request를 받고 result라는 값을 return한다고 가정 했을때

"API result"라는 결과값은 json형태로 response하게 된다.

 

 

 

✔️ 해결방안 5. response.setCharacterEncoding("UTF-8")

response.setCharacterEncoding("UTF-8")

서블릿에서 화면에 데이터를 출력하기 위해서는 out.println을 사용을 하는데 위의 코드없이 out.print("안녕");를 한다면 '안녕'이 출력되는 것이 아니라 ????과 같은 물음표가 출력이 됩니다.

이러한 문제점을 해결하기 위한 방법은 response.setCharacterEncoding("UTF-8"); 를 추가하는 것입니다.

JSP에서 Controller로 다시말해 C -> V 로 script 화면에 전달해줄때 Document 에 대해서 인코딩 한다는 뜻 !

 

 

 

✔️ 해결 방안 6 . bean 설정파일에 @ResponseBody 어노테이션의 설정에 인코딩

 

<bean
		class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
		<property name="messageConverters">
			<list>
				<bean
					class="org.springframework.http.converter.StringHttpMessageConverter">
					<property name="supportedMediaTypes"> 
						<list>
							<value>text/html;charset=UTF-8</value>							
						</list>
					</property>
				</bean>
			</list>
		</property>
	</bean>

 

 

 

HandlerAdapter는 기본적으로 스프링 MVC에서 매우 유연한 방식으로 HTTP 요청의 처리를 용이하게하는

인터페이스이다. 요청을 받으면 -> 웹 -> 네트워크 -> 웹 -> OS 으로 이동하는데

웹 과 네트워크 사이 웹 -> (이 부분) -> 네트워크 -> (이 부분) -> 웹 여기 부분에 해당하는 어댑터 역할을 한다.

메서드를 특정 URL에 매핑하는 HandlerMapping 과 함께 사용된다 .

DispatcherServlet은 다음 사용 HandlerAdapter를 이 메소드를 호출 한다. 서블릿은 메소드를 직접 호출하지 않는다. 기본적으로 자체와 핸들러 객체 사이의 다리 역할을 합니다.

 

• AnnotationMethodHandlerAdapter

이 어댑터 클래스는 @RequestMapping 어노테이션으로 어노테이션 이 있는 메서드를 실행하는 데 사용된다 . HTTP 메서드 및 HTTP 경로를 기반으로 메서드를 매핑하는 데 사용된다.

이 어댑터의 매핑 클래스는 DefaultAnnotationHandlerMapping으로, 유형 수준에서 @RequestMapping 어노테이션 을 처리하는 데 사용 되며 AnnotationMethodHandlerAdaptor 는 메서드 수준에서 처리하는 데 사용된다. 이 두 클래스는 DispatcherServlet 이 초기화 될 때 프레임 워크에 의해 이미 등록되어 있다.

그러나 다른 핸들러 어댑터가 이미 정의되어있는 경우 구성 파일에서도 정의해야한다.

 

 

 

6번 해결 방안으로 겨우 해결 !!