𝜇 Spring Boot 예제4 (회원관리)

@Autowired·2022년 1월 10일

Spring Boot

목록 보기

5/11

회원관리 수정 & 삭제 Rest API 방식으로 만들기!

사용 IDE : IntelliJ IDEA Ultimate

사용 DB : MySQL

사용 언어 & SDK : Java & Amazon correto 11

thymeleaf 사용을 가급적 줄인 예제입니다.

ajax로 조회는 프레임워크와 동일하므로 빼겠습니다.

정리본입니다 참고용으로만 봐주세요!

이전 글
θ Spring Boot 예제1 (회원관리)
𝜅 Spring Boot 예제2 (회원관리)
𝜆 Spring Boot 예제3 (회원관리)

삭제

순서
1. findAll.html에서 Controller로 memberId(pk로 쓰는 회원번호) 전달
2. Controller에서 Service로 전달
3. Service에서 jpa 호출 및 삭제 진행
4. 사용자가 지정한 작업 수행

findAll.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<script>
function deleteById(memberId) {
	console.log(memberId)
	const reqUrl = "/member/"+memberId
	$.ajax({
		type: "delete",
		url: reqUrl,
		// dataType: "json", 받아올 필요가 없으면 생략가능
		success: function () {
			console.log("ajax 성공")
			// 삭제 성공 시 회원목록 페이지를 다시 요청
			location.href = "/member/"
		},
		error: function () {
			alert("ajax 실패")
		}

	})
}

	// 아래도 함수선언 방법 중 하나임.
	// 함수이름 : deleteFn, 매개변수 : memberId
	const deleteFn = (memberId) => {
		console.log(memberId)
	}

	// 함수이름 : deleteFn2, 매개변수 : X
	const deleteFn2 = () => {
	
	}
</script>
<body>
	<h2>findAll.html</h2>
	<table>
		<thead>
			<tr>
				<th>번호</th>
				<th>이메일</th>
				<th>비밀번호</th>
				<th>이름</th>
				<th>조회</th>
				<th>삭제(get)</th>
				<!-- 이번 시간에는 아래 delete 방식으로 보내는걸 사용하는겁니다. -->
				<th>삭제(delete)</th>
			</tr>
		</thead>
		<tbody>
			<tr th:each="member: ${memberList}">
				<td th:text="${member.memberId}">번호</td>
				<td th:text="${member.memberEmail}">이메일</td>
				<td th:text="${member.memberPassword}">비밀번호</td>
				<td th:text="${member.memberName}">이름</td>
				<!-- detail 주소 처리방식 @{|/주소/${같이 보낼 데이터}|} -->
				<td><a th:href="@{|/member/${member.memberId}|}">조회</a></td>
				<td><a th:href="@{|/member/delete/${member.memberId}|}">삭제</a></td>
				<!-- 삭제 버튼 클릭 시 delete 함수 호출 -->
				<!-- 함수호출하면서 memeberId 넘겨야함 -->
				<!-- delelte 함수() : /member/memberId 주소로 요청하며, 요청 메서드는 delete -->
				<td><button th:onclick="deleteById([[${member.memberId}]])">삭제</button></td>
			</tr>
		</tbody>
	</table>
</body>
</html>

ajax로 값을 보냈으니 이제 Controller에서 받을 준비를 해봅시다.

Controller

// 회원삭제(/member/5)
@DeleteMapping("{memberId}")
public ResponseEntity deleteById2(@PathVariable Long memberId) {
	ms.deleteById(memberId);
	/*
	    단순 화면출력이 아닌 데이터를 리턴하고자 할 때 사용하는 리턴방식
	    ResponseEntity : 데이터 & 상태코드(200, 400, 404, 405, 500 등 오류코드)를 함께 리턴할 수 있음.
	    @ResponseBody : 데이터를 리턴할 수 있음.
	*/
	// 200코드를 리턴 (200은 OK라는 뜻으로 정상적으로 처리가 되었다 라는 뜻)
	// 상태코드가 OK(200)면 바로 ajax에서 success가 호출
	return  new ResponseEntity(HttpStatus.OK);
}

Service

Service는 어제 만든 메서드를 그대로 사용하기 때문에 생략하겠습니다 :D

앞에서부터 쭉 잘 따라오셨다면 문제는 전혀 없을겁니다.
새로운걸 계속 배우기 때문에 어려운게 있을 수 있으나 금방 적응하면서 잘하실 수 있을겁니다!!
그럼 이제 업데이트(수정)으로 넘어가보겠습니다!

수정

이번에는 수정입니다 :D
일반적인 수정하는 방법과, Rest API방식으로 수정하는 방법을 정리해볼려고 합니다.
로그인 후 findAll로 가는거에서 mypage로 가게끔 변경 후 수정은 update.html에서 진행하게 했습니다.
Service에서 처리하는 방식은 같으나 주소 처리방식만 다르므로 같이 설명해보겠습니다!
Controller와 html을 미리 만들어놓고 설명하는걸로 하겠습니다 :D

Controller

// 로그인
@PostMapping("login")
public String login(@ModelAttribute MemberLoginDTO memberLoginDTO, HttpSession session) {
	if (ms.login(memberLoginDTO)) {
		session.setAttribute(LOGIN_EMAIL,memberLoginDTO.getMemberEmail());
		// return을 mypage로 가게끔 변경. 그 외 나머지는 변경한거 없음
		return "member/mypage";
	} else {
		return "member/login";
	}
}

// 수정화면 요청
@GetMapping("update")
public String updateForm(Model model, HttpSession session) {
	// jsp, html이 아닌 곳에서도 session에 담긴 값을 꺼내올 수 있음.
	// 상수로 선언한 변수로 session을 설정했기 때문에 이를 사용.
	String memberEmail = (String) session.getAttribute(LOGIN_EMAIL);
	// Object 타입으로 넘어오기 때문에 강제 형 변환을 해줘야함.
	// thymeleaf를 사용하려면 Update용 DTO를 하나 더 만들어야함.
	// 하지만, 가급적 사용하지 않기로 했기 때문에 그냥 Detail용 DTO 사용
	MemberDetailDTO memberDetailDTO = ms.findByEmail(memberEmail);
	model.addAttribute("member", memberDetailDTO);
	return "member/update";
}

// 일반 수정
@PostMapping("update")
public String update(@ModelAttribute MemberDetailDTO memberDetailDTO) {
	Long memberId = ms.update(memberDetailDTO);
	// 수정 완료 후 해당회원의 상세 페이지 출력
	return "redirect:/member/"+memberDetailDTO.getMemberId();
}

// 수정처리 (put)
@PutMapping("{memberId}")
// json으로 데이터가 전달되면 @RequestBody로 받아줘야함
public ResponseEntity update2(@RequestBody MemberDetailDTO memberDetailDTO) {
	Long memberId = ms.update(memberDetailDTO);
	return new ResponseEntity(HttpStatus.OK);
}

mypage.html & update.html 생성

mypage.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
	<h2>mypage.html</h2>
	<!-- common 안 담겨있는 값을 쓰는것, 상수로 선언한 변수 이름을 쓰는것이 아님! -->
	세션 : <p th:text="${session['loginEmail']}"></p>
	<!-- 정보수정 링크를 클랙하면 update.html에 DB에 저장된 정보를 form, input태그를 이용하여 출력, 이름만 수정 가능하도록 -->
	<a href="/member/update/">정보수정</a>

</body>
</html>

update.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
// 함수 이름이 memberUpdate, 매개변수가 없는 형태 -> function memberUpdate() 와 같은 뜻
const memberUpdate = () => {
	console.log('수정 함수 호출')
	// DOM API를 이용하여 memberId, 이메일, 비밀번호, 이름을 가져와서 각각 javascript 함수에 담으시오.
	const id = document.getElementById("memberID").value
	const email = document.querySelector("#memberEmail").value
	// jQuary 문법으로 id값 가져오기.
	const password = $("#memberPassword").val()
	const name = $("#memberName").val()
	// 위 코드 전부 똑같은 역할을 수행하는 코드임. (value값 가져오기)
	// const name = "[[${member.memberName}]]"
	// 위 코드는 DB에서 가져온 내용을 다시 넣는것이므로 업데이트에서는 사용 불가.

	// javascript object에 담아서 ajax 컨트롤러에 보냄.
	// stringigfy : 데이터를 JSON타입으로 만들겠다는 코드
	const updateData = JSON.stringify({
		memberId: id,
		memberEmail: email,
		memberPassword: password,
		memberName: name
	})
	console.log(updateData) // 콘솔에 찍어보면 json타입으로 담긴것을 볼 수 있다.
	const reqUrl = "/member/"+id
	$.ajax({
		// put(전체 덮어쓰기), patch(수정이 필요한 것만 바꿈)
		type: "put",
		data: updateData,
		url: reqUrl,
		// json타입으로 데이터를 보낼때는 아래 코드를 꼭 써야함.
		contentType: "application/json",
		success: function () {
			location.href = "/member/"+id;
  			// 수정 성공 시 /member/{memberId} 로 가겠다.(회원 상세조회)
		},
		error: function () {
			alert("ajax 실패")
		}
	})
}
</script>
</head>
<body>
<h2>save.html</h2>
<form action="/member/update" method="post">
    <input type="hidden" name="memberId" id="memberID" th:value="${member.memberId}" placeholder="회원번호" readonly>
    <input type="text" name="memberEmail" id="memberEmail" th:value="${member.memberEmail}" placeholder="이메일" readonly>
    <input type="text" name="memberPassword" id="memberPassword" th:value="${member.memberPassword}" placeholder="비밀번호">
    <input type="text" name="memberName" id="memberName" th:value="${member.memberName}" placeholder="이름">
    <input type="submit" value="수정">
    <input type="button" value="수정(put방식)" th:onclick="memberUpdate()">
    <!-- 누를 시 바로 가지는게 아닌 무언가 동작 후 가게하고싶을 때 타입을 버튼으로 사용 -->
</form>
</body>
</html>

Service

JPA에서 지원하는 기능 중 하나인데, save 메서드, 즉 회원가입 정보를 저장하는 메서드를 사용 시
자동으로 DB에서 기존의 데이터가 있는지 비교 후 있을 시 업데이트 쿼리를 수행합니다
그래서 업데이트 쿼리를 일일히 쓸 필요 없이 save 메서드를 부르는 것만으로도 업데이트까지 가능합니다!!
일반 방식과 Put방식 (Rest API) 방식은 같은 메서드를 사용하기 때문에 하나만 있습니다 :D
그럼 함께 보시죠!

Service (Interface)

// Interface에 아래 코드 추가.
Long update(MemberDetailDTO memberDetailDTO);

ServiceImpl

@Override
public Long update(MemberDetailDTO memberDetailDTO) {
	// update 처리 시 save 메서드 호출
	// 기존에 있는 정보면 알아서 업데이트 쿼리 수행
	// MemberDetailDTO -> MemberEntity로 변환해줘야함.
	// 바꾸고자 하는 대상 클래스에 해당 메서드가 생성되어야함.
	MemberEntity memberEntity = MemberEntity.toUpdateMember(memberDetailDTO);
	Long memberId = mr.save(memberEntity).getId();
	return memberId;
}

여기까지 잘 오셨다면 수정까지는 문제없이 잘 동작할겁니다.

마치며

회원관리 예제를 잘 따라오시느라 수고 많으셨습니다.
회원관리 예제1 부터 이렇게 길어질지는 몰랐었는데 이 글을 보고있다면 잘 따라오신거라 믿습니다 :D
다음 시간에는 회원관리 예제에 쓴 Test 코드에 대해 알아볼려고 합니다!
만약 더 추가되는 내용이 있다면 새로운 정리글에서 만나도록 해요!!
다음 시간에 건강한 모습으로 만나요 :D