[java] Vaadin을 사용하여 게시판 구현하기

29 Nov 2023

java

본 문서에서는 Java 기반의 Vaadin 프레임워크를 사용하여 게시판을 구현하는 방법을 알아보겠습니다.

1. 프로젝트 구성 및 의존성 추가

Vaadin을 사용하기 위해 먼저 Maven 또는 Gradle을 사용하여 프로젝트를 생성합니다. 이후, pom.xml 또는 build.gradle 파일에 Vaadin 의존성을 추가합니다.

Maven:

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-spring-boot-starter</artifactId>
    <version>14.7.3</version>
</dependency>

Gradle:

implementation 'com.vaadin:vaadin-spring-boot-starter:14.7.3'

2. 게시판 UI 구성

Vaadin을 사용하여 게시판의 UI를 구성합니다. Vaadin은 서버에서 UI를 생성하고 클라이언트에게 전달하는 방식으로 동작합니다.

@Route("board")
public class BoardView extends VerticalLayout {

    private Grid<Post> postGrid = new Grid<>(Post.class);
    private Button addButton = new Button("글쓰기");

    public BoardView() {
        configureComponents();
        buildLayout();
    }

    private void configureComponents() {
        postGrid.setColumns("title", "author", "date");
        addButton.addClickListener(e -> navigateTo(PostEditorView.class));
    }

    private void buildLayout() {
        add(postGrid, addButton);
    }
}

위 코드는 게시글 목록을 표시하는 그리드와 “글쓰기” 버튼이 있는 간단한 게시판 UI를 생성합니다.

3. 데이터 처리

Vaadin은 데이터 처리를 위해 백엔드와 프론트엔드를 연결합니다. 데이터 처리를 위해 Spring Data JPA를 사용하여 게시글 정보를 가져오는 Repository 클래스를 작성합니다.

@Repository
public interface PostRepository extends JpaRepository<Post, Long> {

    List<Post> findAll();

    List<Post> findByAuthor(String author);

    List<Post> findByTitleContaining(String keyword);
}

위 코드는 Post 엔티티 클래스의 CRUD 작업을 처리할 수 있는 Repository입니다. findAll(), findByAuthor(), findByTitleContaining() 메소드를 사용하여 게시글 목록을 조회할 수 있습니다.

4. 게시글 작성 기능 추가

Vaadin을 사용하여 게시글 작성을 위한 폼 화면을 추가합니다.

@Route("board/new")
public class PostEditorView extends VerticalLayout {

    private TextField titleField = new TextField("제목");
    private TextField authorField = new TextField("작성자");
    private TextArea contentArea = new TextArea("내용");
    private Button saveButton = new Button("저장");

    public PostEditorView(PostRepository postRepository) {
        configureComponents();
        buildLayout();
        saveButton.addClickListener(e -> save(postRepository));
    }

    private void configureComponents() {
        // 컴포넌트 구성 및 이벤트 처리 코드 작성
    }

    private void buildLayout() {
        // 레이아웃과 컴포넌트를 추가하는 코드 작성
    }

    private void save(PostRepository postRepository) {
        // 게시글 저장 및 DB에 반영하는 코드 작성
    }
}

위 코드는 게시글 작성 시 사용되는 폼 화면 및 저장 기능을 구현한 클래스입니다. PostRepository를 인자로 받아 save() 메소드에서 게시글을 저장하고 DB에 반영합니다.

5. 실행 및 확인

프로젝트를 실행한 후 브라우저에서 http://localhost:8080/board에 접속하여 게시판을 확인할 수 있습니다. “글쓰기” 버튼을 클릭하여 새로운 게시글을 작성해볼 수도 있습니다.

추가적으로, 게시글 목록을 필터링할 수 있는 검색 기능을 추가하거나 게시글 상세 화면을 개발할 수도 있습니다.

본 문서에서는 Java 기반의 Vaadin 프레임워크를 사용하여 게시판을 구현하는 방법을 알아보았습니다. Vaadin을 통해 UI와 데이터 처리를 편리하게 구현할 수 있으며, 추가적인 기능을 개발하여 더욱 강화된 게시판을 구현할 수 있습니다.

참고 자료: