1️⃣ undefined 400 에러
일정 삭제를 클릭하니 계속 400 에러가 발생돼서 undefined 가 뜬다.
F12를 눌러 Network ⇒ modify 확인해봤다.
원인)
콘솔에서 확인해보니 스크립트(script) 태그는 일반적으로 HTML <head> 또는 <body> 섹션 내에 배치되어야 하는데 잘못 작성한 간단한 오류였다.
해결)
위치를 여기에서
head 태그 안으로 이동시켜서 또 바보같은 오류해결.
2️⃣ 파라미터값이 제대로 안넘어가는 에러
400에러를 해결하고나니 이번엔 파라미터값이 제대로 안넘어가고 계속 0만 넘어가는 문제가 생겼다.
alert로 값을 찍어봐도
계속 0만 넘어가는 것을 확인.
일정보관함 mapper에서 select all을 해줬어야 하는 문제.
생각보다 너무 간단한 문제였는데 삽질을 하고 있었다;
3️⃣ 일정 삭제 기능 구현
TravelController
/travelDel 경로로의 GET 요청이 있을 때 이 메서드가 호출된다.
메서드는 @RequestParam 어노테이션을 사용해 URL의 파라미터 중에서 'travelID' 라는 이름을 가진 파라미터를 받게 되고, 이 travelID 를 삭제할 일정 데이터의 고유 식별자로 사용하였다.
그리고 메서드 내부에 service.travelDel(travelID)를 호출하여 travelID를 이용해 여행 데이터를 삭제하는 작업을 수행한다.
TravelDAO
1. int 라는 반환값은 삭제된 레코드 수를 나타낸다.
2. 그리고 메서드는 삭제할 일정 데이터의 고유 식별자인 travelID 라는 정수형 파라미터는 받게 된다. 다시 한번 풀어말하면, 삭제할 레코드를 식별하기 위한 것이다.
3. session.delete("TravelMapper.travelDel", travelID) 부분은 MyBatis의 SQL 세션을 사용하여 데이터베이스에서 여행 데이터를 삭제하는 부분이다. TravelMapper.travelDel은 MyBatis의 매퍼에서 정의된 SQL 문의 ID이다. travelID는 SQL 문에 전달할 파라미터로 사용되고, 앞에서 말했듯 이를 통해 어떤 일정의 데이터를 삭제할지 결정된다!
TravelService
TravelServiceImpl
int n = dao.travelDel(travelID); : dao 객체의 travelDel 메서드를 호출해서 데이터베이스에서 일정 데이터를 식별한다.
return n; : 삭제 작업이 성공하면 n 이라는 정수값을 반환하게 되는데 삭제된 레코드 수이다. 작업이 성공적으로 수행되면 양수 값을 반환하게 된다. ( 삭제 작업의 결과 )
TravelMapper.xml
travelList.jsp
- $(".deleteBtn").on("click", function() { ... }); : 클래스가 "deleteBtn"인 모든 요소에 대한 클릭 이벤트 리스너를 추가
- var travelID = $(this).attr("data-travelID"); : 삭제 버튼에서 data-travelID 속성을 가져와 travelID 변수에 할당
- var confirmed = confirm("정말 삭제하시겠습니까?"); : 사용자에게 "정말 삭제하시겠습니까?"라는 확인 메시지를 표시하고 확인 또는 취소를 클릭한 경우 confirmed 변수에 true 또는 false를 할당
- if (confirmed) { ... } : 사용자가 확인을 클릭한 경우, location.href를 사용하여 선택된 travelID를 가진 travelDel 페이지로 이동한다.
- c:forEach: ${travelList}의 요소를 반복하면서 일정 카드를 생성한다.
- "삭제" 버튼: 삭제 버튼은 .deleteBtn 클래스를 가지며 클릭 이벤트에 대한 JavaScript 코드와 data-travelID 속성을 통해 해당 일정의 travelID를 전달한다. 클릭한 경우 JavaScript 코드에서 확인 메시지를 표시하고 확인한 경우 해당 일정을 삭제하는 페이지로 이동한다.
여기까지 완료 !
'Project 여담 > 4주차' 카테고리의 다른 글
| 10/27 : unable to start within 45 seconds / 회원 탈퇴 Transaction 처리 / 탈퇴 프로세스 에러 해결 (0) | 2023.10.27 |
|---|---|
| 10/25 : 일정보관함 목록 테스트 / 일정 삭제하기 로직 구현 (0) | 2023.10.25 |
| 10/24 : travel 패키지 분리 / travelList.jsp / 일정 상세보기 로직 구현 (0) | 2023.10.24 |
| 10/23 : 일정보관함 로직 구현 / loginCheckInterceptor 적용 (0) | 2023.10.23 |
