Spring - [intelliJ,Thymeleaf] 간단한 댓글창 만들기(1)

 

 

 

[ @PostMapping으로 랜덤한 숫자 6개 업데이트하기 ]

Spring - [intelliJ,Thymeleaf] @PostMapping으로 랜덤 숫자 6개 업데이트하기

 

 

 

---

 

 

댓글을 저장하여
최근 댓글 10개만 화면에 출력된다.

 

 

1. 동작화면과 전체코드

 

 

 

동작화면

 

 

 

 

 

전체코드

GitHub - hyeong-ing/LuckyLotto: 로또 번호가 출력되는 웹사이트입니다.

 

 

 

 

---

 

 

 

 

2. 어떻게 만들지 생각하기 👨🏻‍💻

 

+ 이것저것 시도해보면서 만든거라, DI나 클린코드를 지키지 못했습니다.

 

 

데이터베이스를 사용해보고 싶었다. 그래서 간단한 댓글창을 만들기로 결정했다.

 

□ 댓글은 가장 최신인 10개만 출력된다.

     ▻  데이터베이스에서 꺼낼때 DESC를 사용하여 10개만 보이도록 한다.

 

□ 25자 이상은 초과하지 않도록 한다.

     ▻  글이 1자 이상 25자 이하로 저장되게 조건을 제시한다.

     

□ repository(DB)와 연결할 entity, Controller, 댓글을 처리할 Service를 만들면 될 것 같다.

 

 

 

 

 

---

 

 

 

 

 

3. 화면 만들기

 

□  댓글을 입력할 공간 만들기.

<form th:action="@{/save}" method="get">
    <input class="write" type="text" name="content" 
    		placeholder ="짧은 댓글 남기기 (25자이내)" maxlength="25">
    <button class="save" type="submit"> 저장 </button>
</form>

 

input 태그는 사용자에게 입력을 받고자 할 때 사용한다. type은 여러가지 있다. text, password, radio 등 있고 그 중 간단한 댓글을 저장하니 속성은 text로 해줬다. placeholder는 사용자가 창을 사용하기 전 아래처럼 글자가 보이도록 해준다.

 

input에 담긴 내용은 content라는 이름으로 보내지게 된다. form이 보내는 역할을 하는데 action에 적은 save가 있는 곳으로(컨트롤러) 전송하게 된다.

 

 

 

 

□ 댓글이 보여지는 공간 만들기.

<div class="commentBox">
    <li class="font" th:each="comment : ${comments}" th:text="${comment.content}">
        comment
    </li>
</div>

 

li 태그는 HTML 리스트에 포함되는 아이템을 정의할 때 사용한다. 검은색 작은 원이 표시된다${comment.contetn)로 화면에 표시할 내용을 가져왔다. 이 내용은 총 10개 댓글들을 가지고 있으므로, each 반복문을 통해 화면에 차례로 출력해준다. 

 

 

 

 

 

---

 

 

 

 

4. 구조 설명

 

궁극적으로 댓글을 작성하면 레포지토리에 저장이 되도록 만들고자 한다. 그러면 저장된 댓글을 받아 레포지토리까지 저장해줄 controller가 필요하다. controller는 save라는 앤드포인트로 댓글을 받을 것이다. 댓글에는 조건이 있었다. 1자 이상 25자 이하라는 조건이었다. 그렇기에 이 부분은 service를 통해 관리할 것이다. service에 조건문을 사용하여 해당 조건이 맞으면 레포지토리에 저장이 되도록한다.

레포지토리에 저장된 댓글 10개를 꺼내 화면에 출력할 것이다. 댓글 10개의 조건은 가장 최신에 작성된 것부터 차례로 10개라는 것이다. 그러면 조건 중 가장 최신에 작성된 것이라는 조건에 맞춰 레포지토리에 메서드를 작성할 것이다.(내림차순 DESC로) 나머지 조건으로 10개만 출력되는 것이 남아있다. 10개만 출력시키기 위해서 page를 사용하는데, 이때 이 메서드는 service에 작성한다. service에 return 값을 레포지토리에서 받아(내림차순) 10개만 출력시키는 것이다. 그 후 controller의 model을 통해 받아 화면에 출력되도록 할 것이다.

 

 

 

---

 

 

 

 

5. Entity와 Repository 작성하기.

 

□ Repository

package com.LottoWeb.LuckyLotto.DB;

import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaRepository;


import java.util.List;

public interface BoardRepository extends JpaRepository<Comment, Long> {

    Page<Comment> findAllByOrderByIdDesc(Pageable pageable);
}

 

Jpa는 데이터베이스의 다양한 함수를 간단하게 사용할 수 있게 해준다. 해당 프로젝트에서 이용한 Jpa기능은 댓글을 저장해주는 save와 댓글을 조회하는 page 그리고 쿼리 메서드를 통해  CRUD 지원이 있다.

 

여기서 쿼리 메서드는 findAllByOrderByIdDesc로, 모든 것을 조회하고 기준은 아이디로 하며 내림차순으로 나열한다 라는 의미를 가지고 있다. 그리고 Page<Comment> 형태로 반환한다.

 

 

 

□ Entity

package com.LottoWeb.LuckyLotto.DB;

import jakarta.persistence.*;
import lombok.*;


@Entity //데이터베이스와 매핑한다.
@Getter
@NoArgsConstructor (access = AccessLevel.PROTECTED) //파라미터가 없는 디폴트 생성자 생성
@Table(name = "Comment_List")
public class Comment {

    @Id //엔티티의 주요 식별자
    @GeneratedValue(strategy = GenerationType.IDENTITY) //엔티티의 식별자의 값을 자동으로 생성
    private Long id;

    // 해당 엔티티 필드가 데이터베이스의 컬럼에 매핑될 때 제약을 걸었다.
    // 25자 길이!
    @Column(length = 25)
    private String content;

    // 댓글 content로 받아온 것을 필드에 넘기는 생성자.
    public Comment(String content) {
        this.content = content;
    }

    /*
    @Builder
    public Comment(Long id, String content) {
        this.id = id;
        this.content = content;
    }
    */

}

 

엔티티를 작성했다. 엔티티는 데이터의 집합으로 어떤 정보들인 인스턴스(댓글이 하나면 엔티티 성립 불가)가 두 개 이상이 되어야한다. 그리고 유일한 식별자가 있어야한다. 반드시 속성을 포함해야한다. 여기서 유일한 식별자로 Id를 부여했다. 이는 중복될 수 없는 것을 식별자로 골라야한다. 이름이나, 댓글을 식별자로 고르면 중복될 수 있기 때문에 안된다. 그리고 속성으로 content를 넣었다. 즉 Comment 엔티티에 content인 댓글 속성을 가지고 있는 것이다. 

 

해당 코드는 아주 간단하고 쉬운 코드다. 그저 댓글을 꺼내 조회만 하기 때문에 @setter나 @Builder는 사용하지 않았다. 데이터베이스에 JPA를 상속했기때문에 JPA 리플렉션 사용하여 댓글을 조회하는데는 문제가 없다. 그런데 만약 댓글을 수정하거나, 더 다양한 속성이 생성된다면 @Builder로 관리해주면 좋다. @setter는 수정이 무분별하게 일어날 수 있어서 추천하지 않는다고 한다.

 

 

 

 

---

 

 

 

 

 

6. 댓글 저장하기

 

 

□ Controller 작성하기.

@GetMapping("/save")
 public String saveComment(@RequestParam("content") String content) {
     boardService.saveComment(content);
     return "redirect:/board";
 }

 

save 엔드포인트를 통해 saveComment 메서드와 연결해주었다. 아까 html을 작성했을때, 댓글을 content로 보냈다. 이 content를 받아서 boardService로 보내는 역할을 하는 것이 @RequestParam이라고 생각하면 된다. @RequestParam은 댓글 content를 받고 String 타입의 content에 넣어 boardService 클래스의 saveComment 메서드로 보낸다. 실제로 받아오는 이름과 값의 이름이 일치하는 경우 ("content")는 생략가능하다.

 

@RequestParam을 사용하면 HttpServletRequest의 request.getParameter로 받아줘야하는 것을 쉽게 작성할 수 있게 된다. 만약 @RequestParam을 사용하지 않는다면...?

@GetMapping("/save")
public saveComment(HttpServletRequest request) {
    String content = request.getParameter("content");   
    boardService.saveComment(content);   
    return "redirect:/board";
 }

 

현재 프로젝트에서 파라미터가 하나 밖에 없지만, 만약 여러개의 경우 @RequestParam이 엄청 효율적일 것이다.

 

 

 

□ Service 작성하기.

public void saveComment(String content) {
    if( content.length() >= 1 && content.length() <= 25 )
        boardRepository.save(new Comment(content));
}

 

댓글이 레포지토리로 저장되기 전, 조건에 맞는지 확인한다. if문을 사용하여 content의 길이가 1 이상 25 이하면 Comment 객체를 생성하여 content를 레포지토리에 저장하도록 작성했다. 앞서서 Entity인 Comment 클래스를 만들어뒀다. Comment 클래스의 생성자가 content(댓글)를 인자로 받아 필드에 저장하여 데이터베이스에 매핑한다.

 

 

 

 

 

---

 

 

 

7. 댓글 조회하기.

 

□ Service 작성하기.

public Page<Comment> get10Comments() {
    Pageable pageable = PageRequest.of(0,10);
    return boardRepository.findAllByOrderByIdDesc(pageable);

}

 

Jpa에서 제공하는 함수 pageable를 사용하여 댓글을 나타낼 것이다. 메서드 이름은 get10Comments, 반환타입은 Page<Comment>가 된다. 한 페이지에 댓글 10개만 나타내도록 할거니까 PageRequest.of(int page, int size)로 page가 가져올 페이지 그리고 한 페이지에 포함될 개수를 의미한다. 현재 코드에서 반환타입을 Page로 설정했다. 그런데 해당 프로젝트는 여러 페이지를 보여주는 것이 아니기 때문에 List 타입을 반환해도 상관없다. (아예 pageable을 사용하지 않아도 된다.)

 

 

 

□ Controller 작성하기.

@GetMapping("/board")
public String boardPage(Model model) {
    model.addAttribute("comments", boardService.get10Comments());
    return "board";
}

 

첫 화면이 들어가면 저장한 댓글이 나타나도록 만들기 위해 타임리프의 Model을 통해 댓글을 받아올 것이다.  방금 Service 클래스에 get10Comments( ) 메서드를 정의했다. 메서드로 받아온 값(데이터) comments를 뷰인 타임리프로 전달한다.

 

@GetMapping("/save")
 public String saveComment(@RequestParam("content") String content) {
     boardService.saveComment(content);
     return "redirect:/board";
 }

 

댓글이 저장되자마자 화면에 바로 보이도록 하고 싶다. 그러면 redirect:를 사용하여 /board로 엔드포인트를 보내도록 한다. 그러면 위 코드 @GetMapping("/board")로 앤드포인트를 받아 새로운 comments를 받아 타임리프로 전달하게한다.

 

 

□ html 살피기.

<div class="commentBox">
    <li class="font" th:each="comment : ${comments}" th:text="${comment.content}">
        comment
    </li>
</div>

 

board.html 코드를 다시 살펴보겠다. 댓글을 조회하기 위해 데이터를 comments로 보냈고, comments의 여러 댓글을 each 함수를 통해 comment라는 변수로 각 항목을 사용했다. 그런데 여기서 th:text="${comment.content}"가 있다. comment 클래스에 있는 content 필드를 가져오는 것이다.

 

좀 더 쉽게 설명해겠다. comments는 10개의 뭉텅이 댓글이다. 그걸 comment 변수로 1comment 2comment... 이렇게 부여된다고 생각하면 된다. 그리고 그 나열된 것들 안에 실제 댓글을 넣어주는 것이다. 비유를 들자면 comments가 좌석 한 줄이 되고, comment는 좌석 하나 하나에 앉는 사람이 되고, comment.content는 그 사람의 이름표 혹은 인적 사항이 되는 것이라고 보면 쉬울 것 같다. 일단 나는 그렇게 이해했다.

 

 

 

---

 

 

[ 데이터베이스 H2 설치 및 연동, JPA 연동하기 ]

Spring - [intelliJ,Thymeleaf] MAC, H2를 이용하여 간단한 댓글창 만들기(2)

 

 

🪽

"틀린 내용이 있을 수 있습니다."

 

 

 

[ 블로그에 쓴 내용들의 출처는 아래에 적어둘테니

들어가서 읽어보시면 더욱 도움이 되실 듯 합니다 ]

 

 

 

 

- paging 출처

JPA Paging (페이지 나누기)

 

 

 

- Pageable 출처

[JPA] Spring Data Jpa + Pageable로 Pagination 쉽게 구현하기

 

 

 

- 엔티티 출처 

[DB] 데이터베이스 엔터티(Entity)란 무엇인가?

 

 

 

- NoargsConstructor 출처

@NoargsConstructor(AccessLevel.PROTECTED) 와 @Builder

 

 

 

- NoargsConstructor 출처

롬복 @All/NoArgsConstructor 제대로 알고 사용해보자.

 

 

 

- @builder 출처

[Java] 빌더 패턴(Builder Pattern)을 사용해야 하는 이유

 

 

 

- Entity 출처

[SpringBoot] Entity란? + @Table, @NoArgsConstructor, @AllArgsConstructor

 

 

 

 

- Entity와 Repository 출처

[Spring] Spring Entity, Repository 설명

 

 

 

- Getter 출처

[OOP] Getter와 Setter는 지양하는게 좋다

 

 

 

- Jpa 출처

[Spring JPA] JPA 란?

 

 

 

- Jpa 출처

[JAVA] - JPA란? 간단하고 쉽게 이해하기(예제코드 완벽정리)

 

 

 

- save 출처

내가 repository.save()를 통해서 객체를 저장시켰던 이유

 

 

 

- save 출처

Spring Data JPA - Save Method 동작 방식

 

 

 

- CRUD 출처

[Spring] JPA의 기본 CRUD를 사용해보자 !

 

 

 

- findAllByOrderByIdDesc 출처

JPA - findAllByOrderByIdDesc