2주 프로젝트 - 11일차

글을 작성할 때 부족한 점이 많지만 기록을 하기위해 적었습니다. 수정해야할 부분이 있다면 추후 수정할 예정입니다

 

 

---

2주 프로젝트 11일차 2023-04-21 금

 

오전 내내 댓글 구현을 하기 위해서 잡고 있었다.  결국 조금 도움을 받아 오후에 댓글 기능을 완성 했다.

 

이해가 되고 코드를 작성하면 쉽게 할 수 있을것 같은데 이해가 잘안됬었을때 하려고 하니까 맨땅의 헤딩 하는 것 처럼 매우 어렵게 느껴졌다.

 

컨트롤러, 서비스, Dto, 등 이 필요하다.

 

// controller

@GetMapping(value = "/ex02/{boardId}")
    public String boardView(Model model, @PathVariable("boardId") Long boardId){
        System.out.println("에러 " + boardId);
        BoardFormDto boardFormDto = boardService.getBoardDtl(boardId); // 추가
        Board board = boardFormDto.createBoard();

        List<Reply> replies = replyService.replyList(board);
        ReplyFormDto replyFormDto = new ReplyFormDto();
        replyFormDto.setBoard(board);


        model.addAttribute("BoardFormDto", boardFormDto);
        model.addAttribute("replyFormDto",replyFormDto);
        model.addAttribute("replies", replies);
        // 조회수 코드 추가
        boardService.updateView(boardId); 
        return "contentview";
    }

// Repository

package com.hbrg.repository;

import com.hbrg.entity.Board;
import com.hbrg.entity.Reply;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

public interface ReplyRepository extends JpaRepository<Reply, Long>{
    List<Reply> findByBoard(Board board);

 

// service

package com.hbrg.service;

import com.hbrg.entity.Board;
import com.hbrg.entity.Reply;
import com.hbrg.repository.BoardRepository;
import com.hbrg.repository.ReplyRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

@Service
@Transactional
@RequiredArgsConstructor
public class ReplyService {

    private final ReplyRepository replyRepository;
    private final BoardRepository boardRepository;

    @Transactional(readOnly = true)
    public List<Reply> replyList(){

        return replyRepository.findAll();
    }
    @Transactional(readOnly = true)
    public List<Reply> replyList(Board board){
        return replyRepository.findByBoard(board);
    }


    public void addReply(Reply reply){
        replyRepository.save(reply);
    }

 

작성을 하였고 

html 을 작성.( 이전에 댓글에 대한 코드가 없어서 해결한 뒤의 코드만 있음)..ㅜㅜ

 

<div class="form-group">
  <label for="commentList"><strong>댓글 목록</strong></label>
  <div class="comment-list-container">
      <ul id="commentList">
          <li class="reply-list" th:each="reply: ${replies}">
              <img th:src="@{/img/panda.png}" alt="판다캐릭터">
              <span class="reply-author">(익명)</span>
              <span th:text="${reply.reContent}" style="display:none;"></span>
              <textarea class="form-control" style="border: none; resize: none;" readonly th:text="${reply.reContent}"></textarea>
              <div class="btn-group" style="float: right;">
                  <!-- 수정 버튼 -->
                  <button type="button" class="btn btn-primary btn-sm btn-comment-action"
                          th:data-reid="${reply.reId}"
                          th:data-recontent="${reply.reContent}"
                          onclick="editReply(this)">
                      <img src="/img/edit.png" alt="Edit" width="16" height="16">
                  </button>
                  <!--th:value="${replyFormDto.board}"-->
                  <!-- 삭제 버튼 -->
                  <form th:action="@{'/hbrg/' + ${reply.reId} +'/delete' }" method="post"
                  th:object="${BoardFormDto}">
                      <input type="hidden" value="delete"/>
                      <input type="hidden" name="boardId" th:value="${BoardFormDto.boardId}"/>
                      <button type="submit" class="btn btn-danger btn-sm btn-comment-action">
                      <img src="/img/delete.png" alt="Delete" width="16" height="16">
                  </button>
                  </form>
              </div>
          </li>
      </ul>
  </div>
</div>
<form role="form" method="post" enctype="multipart/form-data" th:object="${replyFormDto}">

  <!-- 댓글 부분 -->
  <div class="form-group">
      <label for="inputComment"><strong>댓글</strong></label>
      <div class="comment-container">
          <input type="hidden"  th:field="*{board}" th:value="${replyFormDto.board}">
          <input type="text" th:field="*{reContent}" name="comment" class="form-control comment-input" id="inputComment" />
          <button type="submit" class="btn btn-primary btn-comment btn-sm">댓글달기</button>
      </div>
  </div>
</form>

 

이렇게 구현을 했다.. 이전 html 사진은 없어서 해결한 뒤의 사진밖에 없음..

 

 

댓글을 쓰면 댓글이 입력되는걸 볼 수 있다.

 

---

2주 프로젝트 - 11일차 느낀점

 

댓글 기능을 3일 정도 잡고 있었는데 왜 안되는지.. 어떻게 코드를 쓰는지 잘 몰랐고, 로직? 에대해 완전히 이해를 하지 못한채 진행을 하다보니 매우 어렵게 느껴졌다. 그래서 조원들이랑 다같이 이해 하고자, 유튜브에 강의를 찾아 기초적인 부분을 이해하려고 강의를 들었다. 유튜브에서 이해하기 쉽게 설명을 잘 해주었다. 전에 수업을 진행 했을 때는 이렇게 제대로 이해 할수 있게 설명을 해주지는 않았다. 그런점이 조금 아쉬웠고, 유튜브 강의를 보고 이해를 완전히 하지는 않았지만, 조금은 이해를 했다? 개념을 어느정도 이해를 하고 코딩을 하니 쪼금은 달라졌다. 하지만 응용을 하려고 하니 다시 머리가 하얘졌다.ㅋㅋ

그래도 댓글 구현 하는게 생각보다 길지는 않고 이해만 잘했다면 코드 작성하는데 어려움을 느끼지 않았을 것이다... 

댓글을 쓰면 댓글목록에서 내가 쓴걸 불러오는 방식이다. 

 

코딩을 하려면 이해를 잘해야 할 것같다. 

 

그래도 오래 걸렸지만 3일 정도에 코드를 작성했고 기능 구현을 성공해서 마음은 한결 나아졌다.

 

계속해서 진행 중이다! 홧팅