250228 Spring Boot 10 - 블로그 만들기(5)

1. 포스트에 달린 댓글들 가져오기

1) comments.js 파일에 코드 추가

 

* axios에 콜백을 등록해주면 axios가 가지고 있다가 응답이 오면 콜백을 실행시켜준다.

 

※ async / await : 비동기 방식을 사용하는 코드를 동기 방식을 사용하는 것처럼 작성할 수 있도록 해준다.

위에서 promise를 활용해 만든 비동기 통신 함수를 async / await 방식으로 수정해보았다.

- 콜백의 코드들을 콜백이 아닌 것 처럼 작성할 수 있는 방법.

- 비동기통신을 사용하는 함수를 호출할 때 앞에 await를 붙인다.

- await를 붙인 함수가 들어있는 함수는 앞에 async를 붙인다.

 

 

 

2. 가져온 댓글들을 화면에 출력하기

 

 

 

 

3. 새로운 댓글 등록 기능 구현

 

 

 

4. 댓글 삭제/수정 버튼 기능 구현

1) comments.js 파일에 있는 makeCommentElements() 함수 수정

* data-id라는 커스텀 속성을 만들어서 필요한 값을 저장함.

* commentText, btnDelete, btnUpdate라는 클래스를 별도로 지정함.

 

2) comments.js 파일에  deleteComment() 함수 추가

 

3) comments.js 파일에  updateComment() 함수 추가 - 강사님이 알려주신거 기반으로 내가 작성해 봄

 

* makeCommentElements 함수에서 일부분을 수정하였음

댓글 [삭제], [수정] 버튼이 들어있는 div의 내용을 수정하기 위해서 commentBtnDiv 라는 클래스를 추가하였다.

 

* updateCommentReq 함수

 

 

 

※ JS의 querySelector는 조건을 만족하는 요소가 여러개 있을 경우 제일 순서가 먼저 나오는 요소를 리턴한다.

 

※ (타임리프를 사용할 경우) html 파일안에 <script> 태그에서 백틱 안에 ${}을 사용하면, 문자열이 추가 되는 것이 아니라 타임리프 문법대로 작동한다. html 파일 안에 있는 코드들은 html을 그려내기 위한 템플릿과 같은 역할이기 때문이다. 따라서 자바스크립트 문법대로 사용하려면 별도의 자바스크립트 파일을 만들어야한다.