준비중..
18 Ajax, 데이터 삭제하기
# 데이터 삭제하기
## 미션
---
ajax 기법으로 데이터를 삭제하시오.
## 개념
---
#### ⭐️ 진행 흐름
## 튜토리얼
---
#### ⭐️ 뷰 페이지
1) 삭제 버튼 추가: "articles/show.mustache"
```
...
<tfoot>
<tr>
<th></th>
<td>
<a class="btn btn-info" href="/articles/edit/{{id}}">수정</a>
<button class="btn btn-danger" id="article-destroy-btn">삭제</button> <!-- 삭제 버튼 추가 -->
</td>
</tr>
</tfoot>
...
<Script src="/js/app/article.js"></script> <!-- article.js 삽입 -->
{{>layouts/footer}}
```
2) 삭제 기능 추가: "js/app/article.js"
```
// article 객체 생성
var article = {
// 초기화(이벤트 등록) 메소드
init: function() {
// 스코프 충돌 방지! (https://mobicon.tistory.com/189)
var _this = this;
// 버튼 선택
...
const destroyBtn = document.querySelector('#article-destroy-btn');
// 버튼 클릭 시, 동작 할 메소드를 연결!
...
if (destroyBtn) { // destroyBtn이 있다면 수행!
destroyBtn.addEventListener('click', _this.destroy);
}
},
// article 생성 메소드
create: function() {
...
},
// article 갱신 메소드
update: function() {
...
},
// article 삭제 메소드
destroy: function() {
// url에서 id를 추출!
var split = location.pathname.split('/');
var id = split[split.length - 1];
// 데이터 삭제 요청을 보냄
// fetch(URL, HTTP_REQUEST)
fetch('/api/articles/' + id, {
method: 'DELETE', // DELETE 방식! HTTP 요청.
}).then(function(response) { // 응답 처리!
// 요청 성공!
if (response.ok) {
alert('글이 삭제 되었습니다.');
window.location.href='/articles'; // 목록 페이지로 이동!(리다이렉트)
} else { // 요청 실패..
alert('글을 삭제할 수 없습니다.');
}
});
}
};
// 객체 초기화
article.init();
```
#### ⭐️ API 컨트롤러
3) 삭제 메소드 구현: "api/ArticleApiCtroller"
```
...
public class ArticleApiController {
@Autowired // 해당 객체를 자동 연결! 스프링 컨테이너에서 뒤적 뒤적..!
private ArticleRepository articleRepository;
// 서비스 레이어 추가! 서비스 레이어란?
private final ArticleService articleService;
...
@DeleteMapping("/api/articles/{id}") // HTTP의 DELETE 메소드로 "/api/articles{id}" 요청이 온다면,
public Long destroy(@PathVariable Long id) {
return articleService.destroy(id); // 서비스 객체가 destroy()를 수행!
}
}
```
#### ⭐️ 서비스 클래스
4) 삭제 메소드 추가: "service/ArticleService"
```
...
@Service
public class ArticleService {
private final ArticleRepository articleRepository;
...
@Transactional
public Long destroy(Long id) {
Article target = articleRepository.findById(id)
.orElseThrow(
() -> new IllegalArgumentException("해당 Article이 없습니다.")
);
articleRepository.delete(target);
return target.getId();
}
}
```
#### ⭐️ 확인하기
5) 삭제 확인
## 훈련하기
---
- 데이터 삭제 과정을 설명하시오.
- article.js의 코드를 보면 중복된 내용이 많다. 이를 리팩토링 하시오.
## 면접 준비
---
- 데이터 CRUD와 HTTP 요청 메소드. 이들을 연관지어 설명?
- 데이터 수정 및 삭제 시, 트랜잭션 처리를 해야한다. 왜?