재원블로그 재원블로그

댓글 수정과 삭제 프론트 부분을 구현하였다. detail.html 작성자 : 수정 삭제 댓글 하나마다 수정, 삭제 버튼이 존재하는데 이를 구별하는 것이 매우 어려웠다. 댓글 목록 을 이용하여 replies에 addEventListener를 사용하고 이벤트 핸들러에 매개변수를 받아 target을 이용하려고 했으나, 댓글이 여러개 있을 때 첫번째 댓글을 제외하고는 작동하지 않았다. 그래서 티스토리의 댓글 작동 방식을 개발자 도구를 이용하여 확인한 결과 onclick을 사용하고 있었다. onclick에 replyID를 매개변수로 주면 되겠다 싶어 th:onclick을 이용하여 구현하였다. main.js function replyUpdateClicked(replyID) { window.open("/update/..

댓글 프론트 부분을 구현하였다. 댓글의 추가만을 구현하였고, 수정과 삭제는 다음에 구현할 것이다. detail.html 재원블로그 수정 삭제 작성자 : 작성자 : 작성 detail.html의 body 부분이다. 간단한 부분인데 자바스크립트가 계속 새로운 createReply 부분을 인식하지 못하는 문제가 발생했다. 원인은 ul 에서 th:each 부분 때문이었다. ul 부분을 div로 감싸주지 않으면 그 밑의 태그들은 전부 인식하지 못하였다. 그래서 ul 부분을 div로 감싸니 그제서야 createReply 부분들을 인식할 수 있었다.

각 게시물을 세부적으로 보는 detail 페이지와 수정하는 update 페이지를 추가하고 update, delete를 구현하였다. update.html 재원블로그 수정 삭제 update.html를 구성할 때 문제는 id를 어떻게 전달하냐였다. 이를 해결하기 위해서 input의 hidden 속성을 이용하여 화면에는 뜨지 않게 하고, thymeleaf에서 값을 렌더링하도록 하여 자바스크립트에서 사용할 수 있도록 하였다.

화면단을 부트스트랩을 이용해 꾸미고 DTO를 추가하고, thymeleaf를 이용하여 메인 화면에 게시글 목록을 렌더링한다. main.js let createButtonClicked = document.getElementById("createButtonClicked"); let createPost = document.getElementById("createPost"); if (createButtonClicked !== null) { createButtonClicked.addEventListener('click', function() { window.location.href = "/create" }); } if (createPost !== null) { createPost.addEventListener('c..

updatePost, deletePost 를 만들고 댓글 엔티티인 Reply, reply의 CRUD 코드를 작성하였다. PostService @AllArgsConstructor @Service public class PostService { private PostRepository postRepository; @Transactional public void createPost(String title, String content) { Post newPost = new Post(title, content); postRepository.save(newPost); } @Transactional public void updatePost(String title, String content, Long id) { Po..

프로젝트를 생성하고 게시물을 등록하는 곳까지 구현하였다. 백엔드에는 Spring Boot, JPA, H2database를 사용하고, 프론트엔드에는 HTML, CSS, JavaScript 를 사용했다. 또한 데이터를 페이지에 렌더링하기 위해 서버 사이드 렌더링 방식을 채택하였고, 이를 위해 Thymeleaf를 사용하였다. controller - PostApiController - MainController domain - Post - PostRepository service - PostService domain @NoArgsConstructor @Getter @Entity public class Post { @Id @GeneratedValue(strategy = GenerationType.IDENTITY)..

댓글 수정 기능을 개선하다 이 개념이 헷갈려 많은 삽질을 하였다. 먼저 함수 선언식은 function name(a) { ... } 이런 식으로 함수를 만들고, 함수 표현식은 let name = function(a) { ... } 이런 식으로 함수를 만든다. 함수 선언식은 예를 들어 func(); function func() { ... } 처럼 함수가 만들어지기 전에 사용해도 문제가 없다. 왜냐하면 자바스크립트 내부적으로 선언식으로 작성된 함수를 먼저 만들어 놓기 때문이다. 하지만 함수 표현식으로 예를 들어 func(); let func = function() { ... } 와 같이 사용하면 오류가 난다. 왜냐하면 이는 func라는 변수를 만들어 그 안에 어떤 특수한 값이 들어간 것처럼 인식하기 때문이다...

IntelliJ에서 실수로 커밋을 드롭했거나, 파일을 실수로 삭제했거나 하면 프로젝트를 우클릭하여 Local History에서 Revert를 하면 된다.