메모장

Spring 비동기 처리 (별도의 lib 없이) 본문

Spring/개념정리

Spring 비동기 처리 (별도의 lib 없이)

Itchild 2024. 8. 7. 13:27
728x90
반응형

 

 

Spring Legacy Project 에서

별도의 lib 없이 진행할 수 있는 비동기처리

 

예시 ) 빈하트 누르면 불들어오는거 , 페이지 이동 없이 정보가 처리되는것 등등 ,,,

 

✔️ 비동기 처리

 

자바스크립트로 빈번하게 사용되는 기능들을 조금 더 함축적인 코드를 통해 사용하게 만든 라이브러리가

jQuery 이다 ! 그리고 그 안에 이벤트 등록 방식 중 하나인 .ajax() 메서드를 사용하여 비동기 처리를 구현하자

 

.ajax() 메서드 비동기 요청시 JSON데이터를 주고 받아보자 == Map 과 유사하다.

 

전체적인 코드를 먼저 보자 !

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비동기 처리</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
</head>
<body>

<img alt="디폴트 이미지" src="images/default.jpg" id="photo">

<script type="text/javascript">
	var cnt = 1; // scope 이슈 확인할것
	
	$("#photo").on("click",function(){
		console.log("cnt : "+cnt);
		
		var testData={count:cnt, apple:1234, banana:'kiwi'}; // JSON 데이터
		
		$.ajax({
			url : "test02.do",
			type : "POST",
			data : testData,
			success : function(result){
				console.log("성공: "+result);
				cnt=result;
				if(cnt%2==0){
					console.log("여기오면 성공 :  "+result);
					$("#photo").prop("src","images/gora.jpg");
				}
				else{
					$("#photo").prop("src","images/default.jpg");
				}
			},
			error : function(){
				console.log("로그 : 에러발생...");
			}
		});
	});
</script>

</body>
</html>
 

 

jQuery 와 ajax() 메서드 개념정리는 복습 겸 위의 링크를 참고 바랍니다.

 

 

jQuery 사용시 CDN 필수 !

 

 

 

var testData={count:cnt, apple:1234, banana:'kiwi'};

데이터에 문자열도 보낼 수 있고, 숫자 데이터도 당연히 보낼 수 있다.

json 데이터 켜서 데이터 잘 전달 하고 있다.

 

 

 

이제 정보를 주고 받을 컨트롤러를 만들어 준다. 

package com.spring.view.controller;

import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class TestController {

	@RequestMapping(value="/test02.do", method=RequestMethod.POST)
	@ResponseBody
	public String test02(@RequestParam Map<String,Object> map) {
		System.out.println("count : "+map.get("count"));
		System.out.println("apple : "+map.get("apple"));
		System.out.println("banana : "+map.get("banana"));
		Integer count = Integer.parseInt((String) map.get("count"));
		count++;
		return count.toString();
	}
	
	@RequestMapping(value="/test.do", method=RequestMethod.POST)
	@ResponseBody
	public String test(@RequestParam("count")int count, @RequestParam("apple")int apple, @RequestParam("banana")String banana) {
		System.out.println("count : "+count);
		System.out.println("apple : "+apple);
		System.out.println("banana : "+banana);
		count++;
		return String.valueOf(count);
	}
	
}
 

 

 

에러 상황 (404 에러)

- 왜 이런 상황이면 404 에러가 뜰까 ?

404 에러메세지는 page not found 다. ( 페이지를 찾을 수 없는 상태 )

그 말인 즉슨 , 테스트 .do 요청을 했는데 테스트.do가 없을때 나오는 에러

output 이 String 이라 "KIM" 이란 문자열로 보내야지 라는 단순한 생각은 404 에러 메세지가 발생한다 !

이 상황에선 KIM 이라는 파일을 찾아 가는데 그러한 페이지가 없어서 404 에러가 떴다.

 

현재 코드는 @Controller 어노테이션 객체를 사용중이라서

그러면 + @RequestMapping 을 사용중 인 것이고

=> VR가 동작중이라는 것이다.

그래서 KIM 라는 페이지가 없다.

 

우리는 비동기 처리 중이니 페이지 이동을 원하는 것이 아니기 때문에,

ViewResolver 가 동작되는 것이 싫다(페이지의 이동이 일어나기 때문에 !!) , VR 필요가 없는 것이다.

VR 야 ~ 이거 그냥 데이터 니까 페이지 이동은 없어 ! 알고있으렴 ~

 

 

 

그럴때 붙여주는 친구 ! @ResponseBody

@RequestParam 어노테이션을 사용하여 파라미터로 받은 "count" , "apple", "banana"

 

나 파라미터 받을게 있어 근데 그게 count 이름인데 int 거든 ?

int count 로 받을 거야

그러면 카운트를 ++ 시켜줘

string.valueof(count); 전달 가능한게 문자열이다보니 valueof를 사용하였다.

 

@RequestParam 이거는 길어질 수 밖에 없다.

이것을 더 줄여 보자 !

 

 

json이 아까 자바 map이랑 비슷하다고 했는데 !

나 @RequestParam 으로 받아올건데 map<String,Object> map 으로 !

키가 String 이고 값은 뭐가 올지 모르니 최상위 클래스로 Object

인자를 줄여 볼 수 있다.

 

map에서 get으로 받아와야 한다. 무엇을 받아온다 ? "count"

map.get("count");

 

"count"를 받아오기 위해서 다운캐스팅 해야한다 !

여기서 @RequestParam 은 문자열 형식으로 받아오기 때문에 !!

다운캐스팅으로 String 타입으로 맞춰준 후 그것을 Integer 타입으로 형변환 해준다.

count ++;

 

여기서 이제는 count 자체가 Integer 자체가 객체라서 보낼 수 있다 !

래퍼 클래스와 관련 있는데 ...! 래퍼 클래스에 대한 자세한 내용은 링크를 참고 할 것 !

 

 

int count 라면 원시타입 이라 메서드의 주체가 될 수 없다.

그러나 지금은 객체의 count 라서 메서드의 주체가 될 수 있다 !!

객체화를 시켜줄때, 메서드의 주체로 써야 할 때 => 래퍼 클래스 (오토 박싱, 언박싱)

 

 

SUCCESS의 인자로 들어갈 예정 이다.

count 키값 이구 값을 cnt로 돌렸다.

jQuery 안에서 선언 한다면 클릭 할 때마다 초기화된다.

그래서 우리는 매번 기본값 1이 되는게 아니기 때문에 (스코프 이슈 때문에 제이쿼리 밖에 선언)

 

만약에 cnt%2 == 0 {

 

}

cnt를 보내주면 자바에서 1씩 시켜줄거야

얘를 짝수면 gora.jpg 홀수면 default.jpg

 

 

 

콘솔 F12

 

 

짝수 일때의 사진

 

 

 

 

홀수일 때의 기본값 사진

 

 

 

728x90
반응형

'Spring > 개념정리' 카테고리의 다른 글

다국어 처리  (0) 2024.08.07
Spring 비동기 처리 에러 이슈 (한글 깨짐,인코딩)  (0) 2024.08.07
[ null 업데이트 이슈 ]  (1) 2024.08.07
Spring 예외 처리 페이지  (1) 2024.08.07
@RequestMapping 에서 사용되는 옵션 종류  (0) 2024.08.07
'Spring/개념정리' Related Articles more