9 77
11 33 11 77 54 11 25 25 33

11 11 11 33 33 25 25 77 54

3 4
ohhenrie
charlie
baesangwook
obama
baesangwook
ohhenrie
clinton

2
baesangwook
ohhenrie

혼자서 토이 프로젝트로 게시판을 구현하고 있었는데,

유독 막혔던 부분이 있었다.

바로 댓글 수정 기능이었다.

혼자서 뚝딱 만들어가고 있던건 아니고 참고했던 강의, 책등이 있었는데

거기서 공통적으로 패스했던 부분이 댓글수정 이었다.

게시글 수정 같은 경우에는 동기 식으로 폼을 세터로 기존에 존재했던 내용들을 지정해준 뒤에 객체로 전달하면 폼안에 내용이 그대로 들어있는 상태로 편하게 수정 할 수 있었는데

댓글 같은 경우에는 동기식으로 수정을 구현하기 어려웠고, 내가 알고있는것들 안에서 해결 할 수 있는 방법을 찾고 싶었으나 , 대체적으로 다들 Ajax 를 활용하여 비동기식으로 댓글 기능을 구현 하셨어서.. 내가 당장 쏙 빼먹을만한 무언가를 찾기가 힘들었다.

시작해보기

댓글 리퀘스트 Dto 작성

일단 나는 댓글저장,수정 같은 경우에는 Dto 자체를 넘겨주지 않고 입력 수정용 RequestDto 를 따로 만들어서 넘겨주었다.

public record ArticleCommentRequest( //JPA BUDDY 를 이용해 DTO 생성
        Long articleId
        ,
        String content) implements Serializable {

    public static ArticleCommentRequest of(Long articleId, String content) {
        return new ArticleCommentRequest(articleId, content);
    }


    public ArticleCommentDto toDto(UserAccountDto userAccountDto) { //로그인 세션
        return ArticleCommentDto.of(
                articleId,      
                userAccountDto,
                content
        );
    }

댓글 입력과 수정 삭제 등등은 모두 로그인 된 상태에서만 동작하기 때문에, 현재 로그인 되어있는 계정의 정보를 집어 넣어준다.

계정 Dto 작성

public record BoardPrincipal(
        String username,
        String password,
        Collection<? extends GrantedAuthority> authorities,
        String email,
        String nickname,
        String memo
)  implements UserDetails {
    public static BoardPrincipal of(String username, String password, String email, String nickname, String memo) {
       
        Set<UserAccountRole> roleTypes = Set.of(UserAccountRole.USER);

        return new BoardPrincipal(
                username,
                password,
                roleTypes.stream()
                        .map(UserAccountRole::getValue)
                        .map(SimpleGrantedAuthority::new)
                        .collect(Collectors.toUnmodifiableSet())
                ,
                email,
                nickname,
                memo
        );
    }
    public static BoardPrincipal from(UserAccountDto dto) {
        return BoardPrincipal.of(
                dto.userId(),
                dto.userPassword(),
                dto.email(),
                dto.nickname(),
                dto.memo()
        );
    }

    public UserAccountDto toDto() {
        return UserAccountDto.of(username,password, email, nickname, memo);
    }

UserDetails 인터페이스를 구현한 세션용 dto 를 만든다.
저장 데이터는 계정 테이블에 존재하는 컬럼들을 넣어주면 된다. (저 RoleType은 당장 필요 없을듯..)

@RequiredArgsConstructor
@Transactional
@Service
public class UserSecurityService implements UserDetailsService {
    private final UserAccountRepository userAccountRepository;

    @Override
    public UserDetails loadUserByUsername(String userId) throws UsernameNotFoundException {
            Optional<UserAccount> _account = userAccountRepository.findById(userId);
            if (_account.isEmpty()) {
                throw new UsernameNotFoundException("사용자를 찾을수 없습니다.");
            }
            UserAccount account = _account.get();
            List<GrantedAuthority> authorities = new ArrayList<>();
            if ("admin".equals(userId)) {
                authorities.add(new SimpleGrantedAuthority(UserAccountRole.ADMIN.getValue()));
            } else {
                authorities.add(new SimpleGrantedAuthority(UserAccountRole.USER.getValue()));
            }
        PasswordEncoder passwordEncoder = new BCryptPasswordEncoder();
        return new BoardPrincipal(account.getUserId(), account.getUserPassword(), authorities, account.getEmail(), account.getNickname(), account.getMemo());
        }

저 BoardPrincipal 없이도 단순히 UserDetailsService 구현으로 반환값을 new User 로 주면 될거같긴한데.. 안해봐서 모르겠다. (이 클래스는 로그인 되었을때 로그인된 계정 정보를 넘겨주는 역할을 한다)

컨트롤러와 서비스 클래스 작성

 @GetMapping("/{articleId}")
    public String article(@PathVariable Long articleId, ModelMap map , ArticleCommentRequest dto,
                          CommentForm commentForm){
        ArticleWithCommentResponse article =  ArticleWithCommentResponse.from(articleService.getArticle(articleId));
        map.addAttribute("article",article);
        map.addAttribute("articleComments", article.articleCommentsResponse());
        map.addAttribute("dto",dto);
        return "articles/detail";
    }
    

댓글은 보통 한 페이지에 댓글만 달랑 있는게 아니라 게시글 밑에 댓글이 존재하니 Get 메소드로 게시글 하나를 조회할때 리퀘스트 Dto 도 같이 넘겨준다.
코멘트 폼은 @Valid 전용으로 넣어준 값인데.. 활용이 되는듯 안되는듯 (에러가 생기면 전 페이지로 돌아가고 문구가 출력되어야 하는데 되돌아가기만 한다.)

    @PreAuthorize("isAuthenticated()")
    @PostMapping("/{articleId}")
    public String writeArticleComment(@PathVariable Long articleId,ArticleCommentRequest dto,
                                      @Valid CommentForm commentForm,
                                      BindingResult bindingResult,
                                      @AuthenticationPrincipal BoardPrincipal principal){
        if (bindingResult.hasErrors()) {
            return "redirect:/articles/"+articleId;
        }
        articleCommentService.saveArticleComment(dto.toDto(principal.toDto()));
        return "redirect:/articles/"+articleId;
    } //현재 접속한 사용자의 정보를 받아와 DTO로 넘겨주고 , 댓글을 작성함
    
    
    @PreAuthorize("isAuthenticated()")
    @PostMapping("/update/{articleId}/{articleCommentId}")
    public String updateArticleComment(@PathVariable Long articleCommentId
            ,@PathVariable Long articleId
            ,@Valid CommentForm commentForm, BindingResult bindingResult,ArticleCommentRequest request){
        if (bindingResult.hasErrors()) {
            return "redirect:/articles/"+articleId;
        }
        articleCommentService.updateArticleComment(articleCommentId,request.content());
        return "redirect:/articles/"+articleId;
    }

post 메소드로 댓글을 저장할때 쓸 메소드를 선언해준다. 댓글이 달리고 바로 보고있던 게시글을 다시 출력하게 게시글 아이디와 , 검증용 BindingResult 도 추가해준다.
@AuthenticationPrincipal 어노테이션을 붙여서 UserDetails 서비스에서 아까 리턴해준 값들을 들고온다.

수정은 단순히 입력값만 String 값으로 넣어준다.

    public void saveArticleComment(ArticleCommentDto dto) {
        try {
            Article article = articleRepository.getReferenceById(dto.articleId());
            UserAccount userAccount = userAccountRepository.findById(dto.userAccountDto().userId()).orElseThrow();
            ArticleComment articleComment = ArticleComment.of(article,userAccount,dto.content());
            articleCommentRepository.save(articleComment);
        } catch (EntityNotFoundException e) {
            log.warn("댓글 저장 실패. 댓글 작성에 필요한 정보를 찾을 수 없습니다 - {}", e.getLocalizedMessage());
        }
    }
    
    public void updateArticleComment(Long id,String content) {
        try {
            ArticleComment articleComment = articleCommentRepository.getReferenceById(id);
            if (content != null) { articleComment.setContent(content);}
        } catch (EntityNotFoundException e) {
            log.warn("댓글 업데이트 실패. 게시글을 찾을 수 없습니다 - dto: {}", e.getLocalizedMessage());
        }
    }

ArticleCommentRequest 에서 변환된 Dto에서 엔티티를 뽑아내서 댓글 Repository 에 저장 혹은 기존에 있던 댓글을 뽑아내와서 수정한다.

솔직히 여기까지는 큰 문제가 없다.

타임리프로 뷰에서 기능을 구현하는게 가장 골치아프다고 해야되나 ..

댓글 작성 뷰 작성과 기능 구현

<p class="comment">댓글</p>
        <div>
            <p class="comment2" sec:authorize="isAnonymous()">로그인 후 댓글을 작성할 수 있습니다.</p>
        </div>
        <div>
            <form sec:authorize="isAuthenticated()"
                  th:action="@{|/articles/comments/${article.id}|}" th:object="${dto}" method="post">
                <div class="input-group" style="width:auto">

                    <label for="content" class="form-label mt-4" hidden>댓글 작성</label>
                    <input type="text" th:field="*{content}" class="form-control" id="content" name="content"
                           placeholder="1자에서 100자 이내로 입력해주세요.">
                    <div class="field-error" th:errors="*{content}">
                        오류2
                    </div>
                    <button type="submit" class="btn btn-outline-dark">작성</button>
                    <br>
                </div>
            </form>

순서대로 설명해보자면 .. 로그인 되어있지 않은 상태에서는 로그인 후에 댓글을 작성할 수 있다는 문구를 출력해준다.

로그인 되어있는 상태라면, 댓글 작성 url 을 포스트 메소드로 걸어놓고, 내용 입력 태그에 타임리프 문법으로 content 라는 값에 입력할 필드라는 th:field 를 입력해준다.

(그 밑 th:errors 는 Bingding Results 가 에러를 가질때 에러 문구를 출력할 자리인데.. 댓글폼은 동작을 안하더라 ㅠㅠ)

여기까지도 딱히 큰 문제는 없다.. 진짜 문제는 댓글 수정 ..

댓글 수정 같은 경우에는 , 타임리프로 each 문을 돌려서, 모델맵으로 넘겨준 댓글 리스트에서 댓글을 하나씩 뽑아와서 출력하게 했고, 그 댓글 닉네임 출력부분 옆에, 로그인 상태이고 댓글 작성자가 로그인된 아이디와 같다면 수정 삭제 버튼이 출력되도록 했다.

내가 구현하고 싶었던건 , 수정 버튼을 누르면 댓글 하나가 내용이 폼 입력칸으로 바뀌면서 기존에 입력되있던 값을 갖고와서 원하는부분만 수정하는쪽으로 하고싶었지만,

그렇게 하려면 Jquery 를 이용해서 비동기식으로 다들 하시는거 같았다. 근데 나에겐 너무 복잡했고 이미 동기식으로 처리를 다 해놓은 나는 그렇게 하려면 바꿔야할게 너무 많았다고 생각했다.

그래서 생각했던게, 부트스트랩 콜랩스를 이용해서 수정 버튼을 누르면 입력칸이 밑으로 뾰로롱~ 펼쳐져서 수정을 하면 좋겠거니~ 라고 생각했다.

그래서 이렇게까지 구현을 했었다.

근데 이렇게 하니까 문제점이 뭘까 ..?

내가 수정이 가능한 모든 댓글에 입력칸이 등장했다...........

문제가 뭘까 하고 온갖 방법을 시도해보았었다. 하지만 결국엔 해결을 못하고 있다가

th:id 라는 문법이 있다는걸 발견했다.

그리고 가장 큰 문제는 내가 타임리프 문법속 each 문에 다른것들과 똑같이 콜랩스를 적용시켜도 콜랩스는 그 각각 칸으로 적용되는게 아닌 딱 그 태그 하나만 실행이 되는것 같았다. 결론적으론 프론트 문제였다.

온갖 검색을 동원한 결과..

<button th:attr="data-bs-target=|#c${articleComment.id}">
...
<div class="collapse" th:id="c + ${articleComment.id}">

이런 식으로 각 댓글 div 마다 댓글id 를 고유값으로 입력하게 하여서 one to many 에서 one to one 으로 변경을 해주었다.

그 결과 이렇게 각각 칸마다 수정을 할 수 있게 콜랩스 기능이 동작했다!

마무리

타임리프로 이렇게 댓글 수정을 구현 하는 글은 찾지 못했고,

도저히 못해결 하겠어서 고민하다가.. 스택오버플로우에 나처럼 비슷하게 콜랩스를 각 객체마다 넣고싶은데, 그게 안돼서 고민하시던 몇몇분들의 글을 참고해서 해결해보았다.

수정 관련 html 소스는 길고 또 너무 드러워서 .. (가독성이 안좋음..) 개인 기록용으로 글을 남기지만 혹시 필요한 분이 계시면 언제든 도와드리니 댓글 남겨주세용

Dto 수정하기

기존 Dto 같은 경우에는 게시글에 Hashtag String으로 있기 때문에, 안건으로 게시글을 작성하거나 Response로 받아올 때 String으로 받아오도록 되어있었다.

그렇기 때문에 이제는 hashtag Set을 담아오도록 수정해야 한다.

그전에 HashtagRepository를 생성해주고, JpaRepository를 Extends 해준 뒤에, HashtagDto 부터 만들어보자.

HashtagDto 작성

public record HashtagDto(Long id, String hashtag) {
        public static HashtagDto of(String hashtag) {
            return new HashtagDto(null, hashtag);
        }

        public static HashtagDto of(Long id, String hashtag) {
            return new HashtagDto(id, hashtag);
        }

        public static HashtagDto from(Hashtag entity) {
            return new HashtagDto(
                    entity.getId(),
                    entity.getHashtag()
            );
        }
        
        public Hashtag toEntity() {
            return Hashtag.of(
                    id,
                    hashtag
            );
        }

필요에 따라서 record로 작성할 수 있고, 세터가 필요하다면 class 로 작성할 수 있다.

record 로 편하게 작성하는 쉬운 방법이 있다.

바로 유료 플러그인인 JpaBuddy 를 활용하는 것이다.

JpaBuddy

유료 플러그인이지만 한 달 동안 무료체험이 가능하다. (나 같은 경우에는 필요하다면 유료로 결제할 마음도 있을 만큼 유용하다.)

이렇게 인텔리제이상에 새로 만들기 탭에 강아지 모양 메뉴가 새로 생긴다. 온갖 기능이 있지만 지금 내 레벨에서는 Dto 생성할 때 활용하기 굉장히 좋았다.

이렇게 엔티티를 설정하면 레코드 형식으로 Dto를 생성해준다.

연관된 Dto들 수정해주기

이제 HashtagDto까지 생성해주었으니, 게시글을 등록할 때 전달해줄 RequestDto와 출력할 때 필요한 Response Dto들을 수정해준다.

이경우에는 크게 수정할 것들 없이 기존에 String Hashtag 이렇게 되어있는 것들을 HashtagDto 타입을 가진 HashSet으로 변경해주면 된다.

게시글을 등록할 때 사용하는 RequestDto 같은 경우에는, 여러 가지 방안을 생각할 필요가 있다.

해시태그 복수 등록

단순히 하나만 등록한다고 하면, #안녕 이런 식으로 등록할 수 있지만, 복수 등록할 때는 #안녕 #안녕하 #안녕하세 #안녕하세요 이렇게 입력을 했을 때 4개의 해시태그를 등록할 수 있도록 설계하면 좋을 것이다.

그래서 RequestDto 같은 경우에는 세터를 사용할 수 있게 레코드 형식이 아닌 클래스로 작성을 해줌으로써, String Hashtag를 입력받아오고, StringTokenizer로 '#' 별로 토큰을 생성해 HashtagDto.of(st.nextToken()) 을 활용했고, replaceAll로 공백을 제거해준 뒤에 입력시켜주었다.

비즈니스 로직 설계

해시태그 같은 경우에는 따로 해시태그를 사용하는 곳이 대부분 게시글에서 사용된다고 생각했기 때문에, 따로 hashtagService를 만들어주지 않고 ArticleService에 hashtag 관련 로직들을 설계해주었다.

이 경우에는 사실 ManyToMany로 임시 중간 테이블이 생성되는 상태이기 때문에 , 단순히 따로 HashtagService를 생성해서 해시태그를 저장해 줄 필요 없이 이미 맵핑이 되어있는 상태이기 때문에, 게시글만 저장해도 자동으로 hashtag까지 저장이 된다.

하지만 괜찮을까?

이렇게 순서대로 따라 하다 보면, 오류가 생긴다.

바로 중간 임시 테이블 (게시글이 post고 태그가 tag 면 post_tag라는 테이블이 자동으로 생성될 것이다.) 이 각각 연결관계마다 고유 id를 갖고 있지 않기 때문에 오류가 발생할 것이다.

대표적으로 한 게시물에 해시태그를 두 개 이상 등록하려 시도했을 때 오류가 발생할 것이고, 설계 자체가 잘못되었다고 생각하면 될 것 같다. (글쓴이가 어디서 글 보고 이게 잘못된 설계라고 생각하고 온 게 아니라 글쓴이가 직접 시행착오 겪어보니 구조 자체가 이상했었다..)

해시태그의 본질은 내가 여러 해시태그를 등록했을 때 그 해시태그가 등록된 게시물을 조회할 수 있어야 하는데 복수 등록에 오류가 발생한 는 게 가장 컸고

그다음으로 중간 관계 맵핑이 엔티티가 아닌 ManyToMany 임시 테이블이다 보니, 게시글을 삭제할 때 해시태그도 같이 삭제된다는 게 크다.

거기에 ManyToMany 관계를 맺어주는 것은 실무에서 사용하기엔 한계가 있다는 글을 자주 보았다.

Spring-boot JPA @ManyToMany 실무에서 사용하면 안 되는 이유

바로 위의 이유와 비슷한 것 같다. 세밀하게 테이블을 다룰 방법이 없기 때문에, ManyToMany를 없애고 중간 엔티티를 따로 만들어줘서 맵핑을 관리하도록 하는 방향으로 선택했다.

중간 엔티티 만들어주기

기존에 게시글에선 Hashtag타입이 담긴 hashset, 해시태그에선 Article타입이 담긴 Articles로 ManyToMany 관계를 맺어주는 구조에서,

해당 부분을 지우고, ArticleHashtag 엔티티를 생성해줘 해당 엔티티 필드에 Article과 Hashtag를 @JoinColumn으로 각각 게시글과 해시태그의 PK를 참조하는 방식으로 관계를 맺어주었다.

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @ManyToOne(cascade = CascadeType.ALL)
    @JoinColumn(name = "article_id")
    private Article article;

    @ManyToOne(cascade = CascadeType.ALL)
    @JoinColumn(name = "hashtag_id")
    private Hashtag hashtag;

영속성 설정을 꼭 해주자. 중간 엔티티는 게시글과 해시태그에서 참조를 받기 때문에 ManyToOne으로 설정해주면 된다.

각각 엔티티 연관관계를 수정해주고, Dto 또한 수정해주자

    @OneToMany(mappedBy = "article")
    @ToString.Exclude 
    @Setter
    private Set<ArticleHashtag> hashtags = new HashSet<>();

    @OneToMany(mappedBy = "hashtag")
    @ToString.Exclude
    private Set<ArticleHashtag> articles = new HashSet<>();

이렇게 기존에 각각 해시태그와 게시글 타입의 HashSet에서 중간 엔티티 타입을 넣어주고 관계를 맺게 해 준다. 중간 엔티티에서 각각의 엔티티를 참조하므로 OneToMany 관계가 된다.

그리고 필요에 따라서 Dto를 수정해주어야 한다. 중간 관계 엔티티를 따로 생성해주었기 때문에, 게시글을 불러올때 따로 hashtagDto 를 가져오도록 구성할 필요 없이

비즈니스 로직에 중간관계 엔티티에서 게시글 아이디를 입력하면 게시글과 해시태그를 같이 가져오도록 추가시킨 후에 map에 해시태그를 addattribute 하는 방식으로 설계하면 된다.

리스폰스 Dto에 불필요하게 껴있는 hashtagDto 타입의 hashSet들을 지워주면 된다.

비즈니스 로직 재설계

일단 게시글을 등록하는 것부터 수정해주자.

 public void saveArticle(ArticleDto dto, Set<HashtagDto> hashtagDto) {
        Article article =articleRepository.save(dto.toEntity());
        for (HashtagDto hashtag : hashtagDto) {
                Hashtag hashtag1= hashtagRepository.findByHashtag(hashtag.hashtag())
                .orElseGet(()-> hashtagRepository.save(hashtag.toEntity()));
                articlehashtagrepository.save(ArticleHashtag.of(article,hashtag1));
        }
    }

ArticleRequest는 게시글 내용과 문자열 타입의 Hashtag를 입력했을 때, 게시글은 Dto로 가져와주고, Hashtag는 '#'별로 나눠서 Set에 추가해 HashtagDto가 담긴 HashSet으로 반환해준다.

사실 웃긴 건 기존에 내가 작성했던 코드는 이러했다.

ㅋㅋ(할 말 잃음) 이렇게 작성하니 영속성 관련 오류가 발생했었는데 위의 코드로 수정하니 오류가 사라졌다.

일단 게시글 먼저 저장해주고 맵핑을 해주면 된다.

hashtag를 반복문을 통해 이미 존재하는 해시태그라면 해당 엔티티를 가져오고, 존재하지 않는다면 저장한 후 반환시켜 그것을 중간 엔티티에 각각 저장한 후에 중간 엔티티까지 레포지토리에 저장하면

게시글과 해시태그가 등록이 되고, 그 각각 엔티티들을 맵핑한 중간 엔티티가 저장되어 양호한 관계를 맺게 된다.

컨트롤러 수정해주기

게시글을 등록할 때 게시글 DTO와 해시태그 DTO 셋을 가져오도록 변경했기 때문에 컨트롤러 또한 리퀘스트 Dto에서 해시태그 셋과 게시글 Dto를 뽑아 매개 값으로 입력하도록 변경해주어야 한다.

    @PostMapping("/post")
    public String articleSave(@Valid ArticleForm articleForm,BindingResult bindingResult,
        ArticleRequest dto,
        @AuthenticationPrincipal BoardPrincipal boardPrincipal) {
            if(bindingResult.hasErrors()){
                return "articles/post/article_form";
            }
        articleService.saveArticle(dto.toDto(boardPrincipal.toDto()),dto.getHashtags());
        return "redirect:/articles";
    }
    

해시태그 등록을 해보자

이렇게 도메인과 비즈니스 로직을 재설계하고 컨트롤러까지 해당 구조에 맞게 변경을 해주었다면, 내가 직접 뷰에서 입력을 했을 때 DB들이 잘 들어가는지 직접 실행해보자

이렇게 입력하고 저장을 해보자.

잘 저장되는 모습이다. (리스폰스 Dto가 수정된 후 뷰 템플릿 수정은 단순히 해당 해시태그가 출력되는 부분에 th:each로 값을 넣어주면 된다.)

중간 테이블에도 저장이 잘 된다.

이젠 복수 저장을 해볼까?

이렇게 안녕부터 안녕하세요 까지 총 4개의 해시태그를 등록했다.

정상적으로 등록이 되는 모습이다.

이렇게 중간 엔티티 또한 하나의 게시글에 4개의 해시태그가 등록됨으로써 총 4개의 PK가 생성된 모습이다.

게시글 수정/삭제 구현

게시글을 수정하고 삭제할 때는 단순하다. 중간 엔티티를 삭제하지말고 각각 게시글 id와 해시태그 id 값을 null로 변경한 후에 수정할 때는 변경 값을 먼저 저장하고, 또 새 엔티티를 저장해주면 된다.

삭제 시에는 단순하게 중간 엔티티 값을 null로 변경한 후에 게시글을 삭제하면 된다.

또한 수정할 때도 기존에 입력되었던 해시태그 값도 #해시태그 #해시태그 1 같은 패턴으로 받아오면 보기 편하기 때문에 컨트롤러에서 StringBuilder 같은 것을 활용하여 각각 해시태그들을 불러온 후에 #와 공백을 붙여서 addattribute 해주면 된다.

이렇게 해당 글의 수정 버튼을 누르면 값을 완전히 받아오고

이렇게 변경하고 입력하면

수정이 된다.

중간 테이블에는 기존 값들이 null로 변경된 후 새로운 해시태그와 관계가 맺어진 모습이다.

마치며

해시태그 기능 구현은 단순히 방법 정도만 제시해주고 내가 직접 구현할 때 참고할만한 자료가 크게 없었다.

해당 기능을 구현한 글들이 어느 분의 개발 실력 향상에 도움이 되었으면 하는 마음과 내가 해결했던 문제들을 기록하고자 하는 마음에 글을 작성하게 되었다.