스프링 부트에서 비동기 처리하기

✔️아이디 중복확인 비동기 처리하기

아이디 중복확인 비동기 처리를 하기위해 버튼을 만들고 온클릭 이벤트를 설정해주었다

<td>아이디</td>
	<td><input type="text" name="mid" required>&nbsp;<input type="button" value="중복확인" onclick="check()"></td>
		</tr>

이제 이 체크라는 이벤트를 작동하게 하기 위한 함수 정의를 해줘야한다 기존에는 AJAX를 사용해서 비동기처리를 했었는데 AJAX를 사용하는 방식이 예전 방식이라 fatch를 사용하여 비동기 처리를 실행해 보았다

function check(){
		let mid = document.querySelector("input[name='mid']").value; 
        //아이디를입력하는 인풋타입을 함수에 가져와야한다
		
		if(mid==""){ 
        //아이디를 입력하지 않았거나  알려줄 알림창을 띄운다
			alert('아이디를 입력하세요!');
			return;
		}
		//비동기 처리 실행
        //요청 url을 작성한다
        //특수 문자를 사용하거나할수도 있기때문에 안정적 전송을 위해서 인코딩해서 아이디를 전달
		fetch("check?mid="+encodeURIComponent(mid))
        //then= 이게 수행됬다면 그후에 이걸해줘
		.then(response => response.text())
		.then(result => {
			if(result == 'true'){// 중복이 아니라면 
				alert('사용 가능!');
			}
			else{ // 중복이라면
				alert('사용 불가능...');
			}
		})
		.catch(err => { // 혹시모를 에러 발생시 알려줄 알림창 띄우기
			alert('오류 발생');
		});
	}

then()을 사용해서 if에 해당하는 행동을 수행한다 

즉 아이디가 중복이니? 그럼 불가능 알림띄워주고  중복이 아니면 사용가능 알림띄워줘의 흐름인 것이다

조인 컨트롤러를 따로 만들어 주고 비동기를 실행할 핸들러 매핑을 설정한다

public class JoinController {
	@Autowired //의존성 주입
	private MemberService memberService;
	
    @ResponseBody
    //데이터를 보내기 위해 사용함
    //@ResponseBody가 있는 해당 메서드가 비동기 처리 메서드가 된다
	@GetMapping("/check")//사용할 핸들러 매핑 지정
	public String check(MemberDTO dto) {//mid를 실행시킬 멤버DTO 가져와서 비밀 번호만 설정해주기
		dto.setMpw("1234");
		
		if(memberService.getMember(dto) == null) {//DB에 있는지 확인후 결과 반환
			return "true";
		}
		return "false";
	}

 @ResponseBody를 사용하는 컨트롤러를 RestController 라고 한다 레스트컨트롤러는 컨트롤러를 상속받았으며 따라서 리스폰스바디를 사용하지 않고 @RestController를 사용하여 컨트롤러 전체를 비동기로 진행할수 있게 된다 

@RestController // 컨트롤러 전체를 비동기 처리
public class JoinController {
	@Autowired
	private MemberService memberService;
	
	@GetMapping("/check")
	public String check(MemberDTO dto) {
		dto.setMpw("1234");
		
		if(memberService.getMember(dto) == null) {
			return "true";
		}
		return "false";
	}

✔️비동기로 데이터 묶음 주고 받기

앞에서는 문자열로 주고 받는 비동기를 알아보았다 이제 데이터를 주고 받는 비동기에 대해 알아보자

<tr>
	<td>비밀번호</td>
	<td><input type="password" name="mpw" required>&nbsp;<input type="button" value="확인" onclick="teemo()"></td>
</tr>

비밀번호에 티모라는 온클릭 이벤트를 지정해주었다 티모를 실행시키기 위한 함수를 정의해주겟다

fatch는 기본적으로는 GET 방식을 사용한다 따라서 POST 방식을 사용하기 위해서는 컨트롤러에서 인자로 맵을 받아야한다

프론트가 사과와 바나나라는 값을 준다고했을때 백에서는 사과와 바나나라는값에 키위를 추가해서 응답하고자 한다

여기서 겟매핑 대신 포스트 매핑을 사용해서 매핑이름이 같은 체크여도 다른 기능이 실행되도록 지정했다

여기서 데이터의 묶음이란 JSON데이터를 말한다 따라서 맵에 @RequestBody를 붙여서 맵에 저장된 데이터를 가져온다

@PostMapping("/check")
	public Map<String,String> check(@RequestBody Map<String,String> data) {
    // 데이터 묶음으로 보내기 위한 인자로 맵받아오기
    
		// 프론트(페이지,클라이언트,브라우저,view)에서
		// apple은 사과
		// banana는 바나나
		// 라는 데이터 전송
		System.out.println(data); //현재데이터 로그 출력
		
		// 백(서버,개발자,JAVA,Controller,서비스,핵심관심)에서
		// kiwi는 키위
		// 라는 데이터를 추가하고
		// 응답
		data.put("kiwi", "키위"); // 추가한 데이터
		return data; // 반환할 데이터
	}
}

티모 함수 정의하기

function teemo(){
// 프론트에서 보내준 데이터
		const apple="사과";
		const banana="바나나";
        
		//비동기 처리 로직
		fetch("check",{
			method: "POST",//메서드의 타입을 지정
			headers: {"Content-Type": "application/json"}, //헤더에 들어갈 내용 타입 설정
			body: JSON.stringify({ // json에 담을 내용
				apple: apple,
				banana: banana
			})
		})
        //제이슨데이터 받은 뒤 실행
		.then(response => response.text())
		.then(result => {
			console.log(result);
		})
		.catch(err => {
			alert('오류 발생');
		});
	}